@vcmap/ui 5.3.3 → 6.0.0-rc.2

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,23 +71,14 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: string;
     };
-    tooltipProps: {
-        type: ObjectConstructor;
-        default: () => {};
-    };
-    customClasses: {
-        type: ArrayConstructor;
-        default: () => never[];
-    };
 }>>, {
-    tooltip: string;
-    tooltipPosition: string;
+    background: boolean;
     icon: string;
     active: boolean;
     hasUpdate: boolean;
-    background: boolean;
+    disabled: boolean;
     color: string;
-    tooltipProps: Record<string, any>;
-    customClasses: unknown[];
-}>;
+    tooltip: string;
+    tooltipPosition: string;
+}, {}>;
 export default _default;

package/src/components/composables.d.ts

@@ -0,0 +1,21 @@
+/**
+ * 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>>;
+/**
+ * @param {import("vue").ComputedRef<HTMLElement|undefined>} parent
+ * @param {import("vue").ComputedRef<string|undefined>} tooltip
+ * @param {import("vue").ComputedRef<string|undefined>} title
+ * @returns {import("vue").ComputedRef<string>}
+ */
+export function createEllipseTooltip(parent: import("vue").ComputedRef<HTMLElement | undefined>, tooltip: import("vue").ComputedRef<string | undefined>, title: import("vue").ComputedRef<string | undefined>): import("vue").ComputedRef<string>;

package/src/components/composables.js

@@ -0,0 +1,65 @@
+import { computed, nextTick, ref, watch } 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));
+  });
+}
+
+/**
+ * @param {import("vue").ComputedRef<HTMLElement|undefined>} parent
+ * @param {import("vue").ComputedRef<string|undefined>} tooltip
+ * @param {import("vue").ComputedRef<string|undefined>} title
+ * @returns {import("vue").ComputedRef<string>}
+ */
+export function createEllipseTooltip(parent, tooltip, title) {
+  const offsetWidth = ref(0);
+  const scrollWidth = ref(0);
+
+  watch([parent, title], async () => {
+    const elem = parent.value;
+    if (elem) {
+      await nextTick(() => {
+        offsetWidth.value = elem.offsetWidth;
+        scrollWidth.value = elem.scrollWidth;
+      });
+    } else {
+      offsetWidth.value = 0;
+      scrollWidth.value = 0;
+    }
+  });
+
+  return computed(() => {
+    if (tooltip.value) {
+      return tooltip.value;
+    }
+    if (title.value && offsetWidth.value < scrollWidth.value) {
+      return title.value;
+    }
+    return '';
+  });
+}

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>

package/src/components/flight/VcsFlightAnchorsComponent.vue.d.ts

@@ -13,18 +13,18 @@ declare const _default: import("vue").DefineComponent<{
         default: symbol;
     };
 }, {
-    addAnchorAction: import("../../actions/actionHelper.js").VcsAction;
+    addAnchorAction: import("../../actions/actionHelper.js", { with: { "resolution-mode": "import" } }).VcsAction;
     title: import("vue").Ref<string>;
-    items: import("vue").Ref<import("../../manager/collectionManager/collectionComponentClass.js").CollectionComponentListItem[]>;
+    items: import("vue").Ref<import("../../manager/collectionManager/collectionComponentClass.js", { with: { "resolution-mode": "import" } }).CollectionComponentListItem[]>;
     draggable: import("vue").Ref<boolean>;
-    actions: import("vue").ComputedRef<import("../../actions/actionHelper.js").VcsAction[]>;
+    actions: import("vue").ComputedRef<import("../../actions/actionHelper.js", { with: { "resolution-mode": "import" } }).VcsAction[]>;
     move({ item, targetIndex }: {
         item: any;
         targetIndex: any;
     }): void;
     durationRule: typeof durationRule;
     showDuration(index: any): boolean;
-}, {}, {}, {}, 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<{
     expandable: {
         type: BooleanConstructor;
         default: boolean;
@@ -38,8 +38,8 @@ declare const _default: import("vue").DefineComponent<{
         default: symbol;
     };
 }>>, {
-    parentId: string;
     owner: string | symbol;
+    parentId: string;
     expandable: boolean;
-}>;
+}, {}>;
 export default _default;

package/src/components/flight/VcsFlightComponent.vue

@@ -70,6 +70,7 @@
             <VcsTextField
               id="duration"
               v-model.number="duration"
+              :hide-spin-buttons="true"
               type="number"
               unit="s"
               step="1"
@@ -103,7 +104,7 @@
 
 <script>
   import { computed, onUnmounted, ref, inject } from 'vue';
-  import { VSheet, VContainer, VRow, VCol, VDivider } from 'vuetify/lib';
+  import { VSheet, VContainer, VRow, VCol, VDivider } from 'vuetify/components';
   import { getSplineAndTimesForInstance } from '@vcmap/core';
   import VcsFormSection from '../form-inputs-controls/VcsFormSection.vue';
   import VcsLabel from '../form-inputs-controls/VcsLabel.vue';

package/src/components/flight/VcsFlightComponent.vue.d.ts

@@ -42,12 +42,12 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     name: string;
     title: import("vue").WritableComputedRef<unknown>;
-    interpolation: import("vue").WritableComputedRef<import("@vcmap/core").FlightInterpolation>;
+    interpolation: import("vue").WritableComputedRef<import("@vcmap/core", { with: { "resolution-mode": "import" } }).FlightInterpolation>;
     duration: import("vue").WritableComputedRef<number>;
     durationRule: typeof durationRule;
     loop: import("vue").WritableComputedRef<boolean>;
     disablePlayer: import("vue").Ref<boolean>;
-}, {}, {}, {}, 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<{
     heading: {
         type: StringConstructor;
         default: string;
@@ -89,8 +89,8 @@ declare const _default: import("vue").DefineComponent<{
         default: symbol;
     };
 }>>, {
-    parentId: string;
     owner: string | symbol;
+    parentId: string;
     heading: string;
     expandable: boolean;
     hideName: boolean;
@@ -99,6 +99,6 @@ declare const _default: import("vue").DefineComponent<{
     hideInterpolation: boolean;
     hideDuration: boolean;
     hideLoop: boolean;
-}>;
+}, {}>;
 export default _default;
 import { durationRule } from './VcsFlightAnchorsComponent.vue';

package/src/components/flight/VcsFlightEditor.vue.d.ts

@@ -15,7 +15,7 @@ declare const _default: import("vue").DefineComponent<{
     apply(): Promise<void>;
     cancel(): Promise<void>;
     reset(): Promise<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<{
     getFlightInstance: {
         type: FunctionConstructor;
         required: true;
@@ -30,5 +30,5 @@ declare const _default: import("vue").DefineComponent<{
     };
 }>>, {
     resetFlightInstance: Function;
-}>;
+}, {}>;
 export default _default;

package/src/components/flight/VcsFlightPlayer.vue

@@ -25,8 +25,7 @@
         :has-update="btn.hasUpdate"
         :background="btn.background"
         @click.stop="btn.callback($event)"
-        v-bind="{ ...$attrs }"
-        v-on="{ ...$listeners, ...btn.listeners }"
+        v-bind="{ ...$attrs, ...btn.listeners }"
       />
       <span>{{ clockTime(clock.endTime) }}</span>
     </div>
@@ -34,7 +33,7 @@
 </template>
 <script>
   import { inject, onMounted, onUnmounted, ref } from 'vue';
-  import { VContainer } from 'vuetify/lib';
+  import { VContainer } from 'vuetify/components';
   import VcsSlider from '../form-inputs-controls/VcsSlider.vue';
   import VcsLabel from '../form-inputs-controls/VcsLabel.vue';
   import VcsButton from '../buttons/VcsButton.vue';

package/src/components/flight/VcsFlightPlayer.vue.d.ts

@@ -10,16 +10,16 @@ declare const _default: import("vue").DefineComponent<{
         currentTime: number;
         times: never[];
     }>;
-    actions: import("../../actions/actionHelper.js").VcsAction[];
+    actions: import("../../actions/actionHelper.js", { with: { "resolution-mode": "import" } }).VcsAction[];
     isCurrentPlayer: import("vue").Ref<boolean>;
     clockTime(seconds: any): string;
     setTime(seconds: 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<{
     disabled: {
         type: BooleanConstructor;
         default: boolean;
     };
 }>>, {
     disabled: boolean;
-}>;
+}, {}>;
 export default _default;