@vcmap/ui 5.3.1 → 6.0.0-rc.1

package/src/components/buttons/VcsToolButton.vue

@@ -1,85 +1,81 @@
 <template>
-  <div class="vcs-button-wrap">
-    <v-btn
-      v-if="!tooltip"
-      :color="appliedColor"
-      :text="isTextButton"
-      class="vcs-tool-button"
-      :class="classes"
-      :ripple="{ class: 'primary--text text--darken-4' }"
-      elevation="0"
-      v-bind="{ ...$attrs }"
-      v-on="{ ...$listeners }"
-    >
-      <v-icon v-if="icon" :class="{ 'mr-2': hasDefaultSlot }">
+  <v-btn
+    :color="appliedColor"
+    :variant="buttonVariant"
+    :height="itemHeight + 2"
+    :min-width="itemHeight + itemHeight / 3"
+    class="vcsToolButton"
+    :disabled="disabled"
+    :class="{
+      'vcs-background': background,
+      'vcs-active': active,
+    }"
+    elevation="0"
+    v-bind="{ ...$attrs }"
+  >
+    <template #default="scope">
+      <v-tooltip
+        activator="parent"
+        v-if="tooltip"
+        :text="tooltip"
+        :location="tooltipPosition"
+      />
+      <v-icon :size="iconSize" v-if="icon" :class="{ 'mr-2': hasDefaultSlot }">
         {{ icon }}
       </v-icon>
-      <slot />
-    </v-btn>
-    <VcsTooltip
-      v-else
-      :tooltip="tooltip"
-      :tooltip-position="tooltipPosition"
-      v-bind="{ ...tooltipProps }"
-    >
-      <template #activator="{ on, attrs }">
-        <v-btn
-          :color="appliedColor"
-          :text="isTextButton"
-          class="vcs-tool-button"
-          :class="classes"
-          :ripple="{ class: 'primary--text text--darken-4' }"
-          elevation="0"
-          v-bind="{ ...$attrs, ...attrs }"
-          v-on="{ ...$listeners, ...on }"
-        >
-          <v-icon v-if="icon" :class="{ 'mr-2': hasDefaultSlot }">
-            {{ icon }}
-          </v-icon>
-          <slot />
-        </v-btn>
-      </template>
-    </VcsTooltip>
-    <VcsBadge v-if="hasUpdate" :color="'warning'" class="position-absolute" />
-  </div>
+      <VcsBadge
+        v-if="hasUpdate"
+        :color="'bg-warning'"
+        class="position-absolute"
+      />
+      <slot name="default" v-bind="scope ?? {}" />
+    </template>
+    <template v-for="slot of forwardSlots" #[slot]="scope">
+      <slot :name="slot" v-bind="scope ?? {}" />
+    </template>
+  </v-btn>
 </template>
 
 <style lang="scss" scoped>
-  .vcs-button-wrap {
-    position: relative;
-    display: inline-block;
-  }
   .badge {
     top: -3px;
     right: -3px;
   }
+  .vcs-active.vcs-background:not(.v-btn--disabled) :deep(.badge) {
+    top: -5px;
+    right: -5px;
+  }
   .v-btn {
-    &.vcs-tool-button {
-      min-width: 42px;
-      height: 34px;
-      padding: 0;
-      position: relative;
-
-      &.vcs-tool-button--active-background {
-        border: 2px solid var(--v-primary-base);
-        background-color: var(--v-base-lighten2) !important;
-      }
+    padding-left: 11px;
+    padding-right: 11px;
 
-      &.v-btn--disabled {
-        background-color: transparent !important;
-      }
+    &.vcs-active.vcs-background:not(.v-btn--disabled) {
+      padding-left: 9px;
+      padding-right: 9px;
+      border: 2px solid rgb(var(--v-theme-primary));
+      background-color: rgb(var(--v-theme-base-lighten-2)) !important;
+    }
+    &.v-btn--disabled.v-btn--variant-text {
+      opacity: var(--v-disabled-opacity);
+    }
+    :deep(.v-btn__loader > .v-progress-circular) {
+      width: calc(var(--v-vcs-font-size) * (1.2 + 0.1 / 3)) !important;
+      height: calc(var(--v-vcs-font-size) * (1.2 + 0.1 / 3)) !important;
     }
   }
 </style>
 
 <script>
-  import { VBtn, VIcon } from 'vuetify/lib';
+  import { computed } from 'vue';
+  import { VBtn, VIcon, VTooltip } from 'vuetify/components';
   import VcsBadge from '../notification/VcsBadge.vue';
-  import VcsTooltip from '../notification/VcsTooltip.vue';
+  import { useForwardSlots } from '../composables.js';
+  import { useItemHeight, useFontSize } from '../../vuePlugins/vuetify.js';
 
   /**
    * @description a button with tooltip extending {@link https://vuetifyjs.com/en/api/v-btn/|vuetify v-btn} using {@link VcsTooltip}. Used for tool buttons in the Navbar.
    * @vue-prop {boolean}                                active - Whether button has background color. Applies vuetify primary color if color property is not set.
+   * @vue-prop {boolean}                                disabled - Whether button is disabled.
    * @vue-prop {string}                                 color - Passes property to v-btn in case prop active is true.
    * @vue-prop {boolean}                                background - When applied with active the button shows an active-background state implying that a tool is active, but running in background, e.g. windowComponent closed.
    * @vue-prop {boolean}                                hasUpdate - Whether the button shows a badge in the top right.
@@ -87,20 +83,16 @@
    * @vue-prop {string}                                 tooltip - Text content of a tooltip which appears on hover with default delay.
    * @vue-prop {('bottom' | 'left' | 'top' | 'right')}  tooltipPosition - Position of the tooltip.
    * @vue-prop {Object<string, any>}                    tooltipProps - Properties to be passed to VcsTooltip {@link https://vuetifyjs.com/en/api/v-tooltip/#props|vuetify v-tooltip}
-   * @vue-prop {string[]}                               [customClasses] - CSS classes to customize style
    * @vue-computed {string}                             appliedColor - color applied to button, depending on size and state
-   * @vue-computed {Object<string, string>}             classes - css classes applied to button, depending on size and state
    * @vue-computed {boolean}                            hasDefaultSlot
-   * @vue-computed {boolean}                            isTextButton - button is text
-   * @vue-event {MouseEvent}                            click - Emits click event when the button is clicked.
    */
   export default {
     name: 'VcsToolButton',
     components: {
-      VcsTooltip,
       VcsBadge,
       VBtn,
       VIcon,
+      VTooltip,
     },
     inheritAttrs: false,
     props: {
@@ -108,6 +100,10 @@
         type: Boolean,
         default: false,
       },
+      disabled: {
+        type: Boolean,
+        default: false,
+      },
       color: {
         type: String,
         default: undefined,
@@ -132,39 +128,40 @@
         type: String,
         default: 'bottom',
       },
-      tooltipProps: {
-        type: Object,
-        default: () => ({}),
-      },
-      customClasses: {
-        type: Array,
-        default: () => [],
-      },
     },
-    computed: {
-      appliedColor() {
-        if (this.active) {
-          return this.color ? this.color : 'primary';
+    setup(props, { slots }) {
+      const appliedColor = computed(() => {
+        if (props.active && !props.disabled) {
+          return props.color ? props.color : 'primary';
         } else {
           return null;
         }
-      },
-      classes() {
-        return {
-          ...this.customClasses.reduce(
-            (acc, cur) => ({ ...acc, [cur]: true }),
-            {},
-          ),
-          'vcs-tool-button--active-background':
-            this.active && this.background && !this.$attrs.disabled,
-        };
-      },
-      hasDefaultSlot() {
-        return !!this.$slots?.default?.[0]?.text?.trim();
-      },
-      isTextButton() {
-        return !this.active ? true : null;
-      },
+      });
+      const hasDefaultSlot = computed(() => {
+        return !!slots?.default;
+      });
+      const forwardSlots = useForwardSlots(slots, ['default']);
+      const buttonVariant = computed(() => {
+        if (props.active && !props.disabled) {
+          return 'flat';
+        }
+        return 'text';
+      });
+
+      const fontSize = useFontSize();
+      const itemHeight = useItemHeight();
+      const iconSize = computed(() => {
+        return fontSize.value * 1.5;
+      });
+
+      return {
+        itemHeight,
+        iconSize,
+        appliedColor,
+        forwardSlots,
+        buttonVariant,
+        hasDefaultSlot,
+      };
     },
   };
 </script>

package/src/components/buttons/VcsToolButton.vue.d.ts

@@ -3,6 +3,10 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     color: {
         type: StringConstructor;
         default: undefined;
@@ -27,24 +31,22 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: string;
     };
-    tooltipProps: {
-        type: ObjectConstructor;
-        default: () => {};
-    };
-    customClasses: {
-        type: ArrayConstructor;
-        default: () => never[];
-    };
-}, {}, {}, {
-    appliedColor(): any;
-    classes(): any;
-    hasDefaultSlot(): boolean;
-    isTextButton(): true | null;
-}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+}, {
+    itemHeight: import("vue").ComputedRef<number>;
+    iconSize: import("vue").ComputedRef<number>;
+    appliedColor: import("vue").ComputedRef<string | null>;
+    forwardSlots: import("vue").ComputedRef<string[]>;
+    buttonVariant: import("vue").ComputedRef<"flat" | "text">;
+    hasDefaultSlot: import("vue").ComputedRef<boolean>;
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     active: {
         type: BooleanConstructor;
         default: boolean;
     };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     color: {
         type: StringConstructor;
         default: undefined;
@@ -69,15 +71,8 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: string;
     };
-    tooltipProps: {
-        type: ObjectConstructor;
-        default: () => {};
-    };
-    customClasses: {
-        type: ArrayConstructor;
-        default: () => never[];
-    };
 }>>, {
+    disabled: boolean;
     tooltip: string;
     tooltipPosition: string;
     icon: string;
@@ -85,7 +80,5 @@ declare const _default: import("vue").DefineComponent<{
     hasUpdate: boolean;
     background: boolean;
     color: string;
-    tooltipProps: Record<string, any>;
-    customClasses: unknown[];
-}>;
+}, {}>;
 export default _default;

package/src/components/composables.d.ts

@@ -0,0 +1,14 @@
+/**
+ * returns a computed which is true, if the provided attributes contain one or more
+ * padding classes
+ * @param {Object} attrs all the Attributes of the component
+ * @returns {import("vue").ComputedRef<boolean>}
+ */
+export function usePadding(attrs: Object): import("vue").ComputedRef<boolean>;
+/**
+ * returns only the slotNames which are not excluded as a computed.
+ * @param {import("vue").Slots} slots
+ * @param {Array<string>} exclude
+ * @returns {import("vue").ComputedRef<Array<string>>}
+ */
+export function useForwardSlots(slots: import("vue").Slots, exclude?: Array<string>): import("vue").ComputedRef<Array<string>>;

package/src/components/composables.js

@@ -0,0 +1,31 @@
+import { computed } from 'vue';
+
+/**
+ * returns a computed which is true, if the provided attributes contain one or more
+ * padding classes
+ * @param {Object} attrs all the Attributes of the component
+ * @returns {import("vue").ComputedRef<boolean>}
+ */
+export function usePadding(attrs) {
+  return computed(() => {
+    if (attrs.class) {
+      const classes = attrs.class.split(' ');
+      return classes.some((c) => {
+        return /^p[tblrsexyac]-.*/.test(c);
+      });
+    }
+    return false;
+  });
+}
+
+/**
+ * returns only the slotNames which are not excluded as a computed.
+ * @param {import("vue").Slots} slots
+ * @param {Array<string>} exclude
+ * @returns {import("vue").ComputedRef<Array<string>>}
+ */
+export function useForwardSlots(slots, exclude = []) {
+  return computed(() => {
+    return Object.keys(slots).filter((slotName) => !exclude.includes(slotName));
+  });
+}

package/src/components/{form-inputs-controls → extent}/VcsExtent.vue

@@ -1,8 +1,8 @@
 <template>
   <v-container class="py-0 px-1">
-    <v-row no-gutters v-if="value.projection">
+    <v-row no-gutters v-if="modelValue.projection">
       <v-col :cols="firstCols">
-        <VcsLabel html-for="projection" dense>
+        <VcsLabel html-for="projection">
           {{ $t('components.extent.projection') }}
         </VcsLabel>
       </v-col>
@@ -10,8 +10,7 @@
         <VcsTextField
           id="projection"
           disabled
-          dense
-          :value="value.projection.epsg"
+          :model-value="modelValue.projection.epsg"
         />
       </v-col>
     </v-row>
@@ -26,7 +25,7 @@
     >
       <template #prepend="{ prefixes }">
         <v-col :cols="firstCols">
-          <VcsLabel :html-for="`${prefixes[0]}-coordinate`" dense>
+          <VcsLabel :html-for="`${prefixes[0]}-coordinate`">
             {{ $t('components.extent.min') }}
           </VcsLabel>
         </v-col>
@@ -43,7 +42,7 @@
     >
       <template #prepend="{ prefixes }">
         <v-col :cols="firstCols">
-          <VcsLabel :html-for="`${prefixes[0]}-coordinate`" dense>
+          <VcsLabel :html-for="`${prefixes[0]}-coordinate`">
             {{ $t('components.extent.max') }}
           </VcsLabel>
         </v-col>
@@ -53,12 +52,13 @@
 </template>
 
 <script>
-  import { computed } from 'vue';
-  import { VCol, VContainer, VRow } from 'vuetify/lib';
+  import { computed, toRaw } from 'vue';
+  import { VCol, VContainer, VRow } from 'vuetify/components';
   import { Extent } from '@vcmap/core';
-  import VcsLabel from './VcsLabel.vue';
-  import VcsTextField from './VcsTextField.vue';
-  import VcsCoordinate from './VcsCoordinate.vue';
+  import VcsLabel from '../form-inputs-controls/VcsLabel.vue';
+  import VcsTextField from '../form-inputs-controls/VcsTextField.vue';
+  import VcsCoordinate from '../form-inputs-controls/VcsCoordinate.vue';
+  import { useProxiedComplexModel } from '../modelHelper.js';
 
   function checkInput(min, max) {
     return min < max || 'components.extent.invalid';
@@ -66,12 +66,13 @@
 
   /**
    * An input for modelling @vcmap/core ExtentOptions
-   * @vue-prop {import("@vcmap/core").ExtentOptions} value - the extent options to be modeled.
-   * @vue-prop {boolean} disabled - Disable coordinate input.
+   * @vue-prop {import("@vcmap/core").ExtentOptions} [modelValue] - the extent options to be modeled.
+   * @vue-prop {boolean} [disabled=false] - Disable coordinate input.
    * @vue-prop {number} [firstCols=4] - Property to set the column distribution. Default is 4 (one-third/two-third). Use 6 for half-half.
    */
   export default {
     name: 'VcsExtent',
+    inheritAttrs: false,
     components: {
       VcsCoordinate,
       VContainer,
@@ -81,9 +82,9 @@
       VcsTextField,
     },
     props: {
-      value: {
+      modelValue: {
         type: Object,
-        required: true,
+        default: () => new Extent().toJSON(),
       },
       disabled: {
         type: Boolean,
@@ -94,18 +95,21 @@
         default: 4,
       },
     },
+    emits: ['update:modelValue'],
     setup(props, { emit }) {
+      const localValue = useProxiedComplexModel(props, 'modelValue', emit);
+
       const getCoordinate = (start, end = 4) =>
         computed({
           get() {
-            return props.value.coordinates.slice(start, end);
+            return localValue.value.coordinates.slice(start, end);
           },
           set(value) {
-            const clone = structuredClone(props.value);
+            const clone = structuredClone(toRaw(localValue.value));
             clone.coordinates[start] = value[0];
             clone.coordinates[end - 1] = value[1];
             if (Extent.validateOptions(clone)) {
-              emit('input', clone);
+              localValue.value = clone;
             }
           },
         });

package/src/components/{form-inputs-controls → extent}/VcsExtent.vue.d.ts

@@ -1,7 +1,7 @@
 declare const _default: import("vue").DefineComponent<{
-    value: {
+    modelValue: {
         type: ObjectConstructor;
-        required: true;
+        default: () => import("@vcmap/core", { with: { "resolution-mode": "import" } }).ExtentOptions;
     };
     disabled: {
         type: BooleanConstructor;
@@ -15,10 +15,10 @@ declare const _default: import("vue").DefineComponent<{
     min: import("vue").WritableComputedRef<any>;
     max: import("vue").WritableComputedRef<any>;
     checkInput: typeof checkInput;
-}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
-    value: {
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: {
         type: ObjectConstructor;
-        required: true;
+        default: () => import("@vcmap/core", { with: { "resolution-mode": "import" } }).ExtentOptions;
     };
     disabled: {
         type: BooleanConstructor;
@@ -28,9 +28,12 @@ declare const _default: import("vue").DefineComponent<{
         type: NumberConstructor;
         default: number;
     };
-}>>, {
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
     disabled: boolean;
+    modelValue: Record<string, any>;
     firstCols: number;
-}>;
+}, {}>;
 export default _default;
 declare function checkInput(min: any, max: any): true | "components.extent.invalid";

package/src/components/extent/VcsExtentEditor.vue

@@ -0,0 +1,79 @@
+<template>
+  <VcsFormSection
+    :heading="heading"
+    :header-actions="actions"
+    :action-button-list-overflow-count="2"
+    :disabled="disabled"
+    expandable
+    start-open
+    v-bind="$attrs"
+  >
+    <VcsExtent v-model="localValue" />
+  </VcsFormSection>
+</template>
+
+<script>
+  import { computed, inject, onUnmounted } from 'vue';
+  import { Extent } from '@vcmap/core';
+  import { useProxiedComplexModel } from '../modelHelper.js';
+  import { setupExtentComponentActions } from '../../actions/extentActions.js';
+  import VcsExtent from './VcsExtent.vue';
+  import VcsFormSection from '../form-inputs-controls/VcsFormSection.vue';
+
+  /**
+   * A VcsFormSection with actions to draw and edit an extent
+   * Uses VcsExtent for editing the extent options via input field
+   * @vue-prop {import("@vcmap/core").ExtentOptions} [modelValue] - the extent options to be modeled.
+   * @vue-prop {boolean} [disabled=false] - Disable coordinate input.
+   * @vue-prop {string} [heading='component.extent.title] - Header of the form section
+   */
+  export default {
+    name: 'VcsExtentEditor',
+    inheritAttrs: false,
+    components: {
+      VcsFormSection,
+      VcsExtent,
+    },
+    props: {
+      modelValue: {
+        type: Object,
+        default: () => new Extent().toJSON(),
+      },
+      disabled: {
+        type: Boolean,
+        default: false,
+      },
+      heading: {
+        type: String,
+        default: 'components.extent.title',
+      },
+    },
+    emits: ['update:modelValue'],
+    setup(props, { emit }) {
+      const app = inject('vcsApp');
+      const localValue = useProxiedComplexModel(props, 'modelValue', emit);
+
+      const extent = computed({
+        get() {
+          return new Extent(localValue.value);
+        },
+        set(value) {
+          localValue.value = value.toJSON();
+        },
+      });
+
+      const { actions, destroy } = setupExtentComponentActions(app, extent);
+
+      onUnmounted(() => {
+        destroy();
+      });
+
+      return {
+        localValue,
+        actions,
+      };
+    },
+  };
+</script>
+
+<style scoped></style>

package/src/components/extent/VcsExtentEditor.vue.d.ts

@@ -0,0 +1,37 @@
+declare const _default: import("vue").DefineComponent<{
+    modelValue: {
+        type: ObjectConstructor;
+        default: () => import("@vcmap/core", { with: { "resolution-mode": "import" } }).ExtentOptions;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    heading: {
+        type: StringConstructor;
+        default: string;
+    };
+}, {
+    localValue: import("vue").Ref<any>;
+    actions: import("../../actions/actionHelper.js", { with: { "resolution-mode": "import" } }).VcsAction[];
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: ObjectConstructor;
+        default: () => import("@vcmap/core", { with: { "resolution-mode": "import" } }).ExtentOptions;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    heading: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
+    disabled: boolean;
+    modelValue: Record<string, any>;
+    heading: string;
+}, {}>;
+export default _default;

package/src/components/flight/VcsFlightAnchorsComponent.vue

@@ -27,6 +27,7 @@
           <VcsTextField
             v-if="showDuration(index)"
             v-model.number="item.duration"
+            :hide-spin-buttons="true"
             type="number"
             unit="s"
             step="1"
@@ -54,7 +55,7 @@
 </template>
 <script>
   import { computed, inject, onMounted, onUnmounted, ref } from 'vue';
-  import { VContainer, VSheet } from 'vuetify/lib';
+  import { VContainer, VSheet } from 'vuetify/components';
   import {
     anchorFromViewpoint,
     anchorToViewpoint,
@@ -326,4 +327,8 @@
     },
   };
 </script>
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+  .z-index-99 {
+    z-index: 99;
+  }
+</style>