@vcmap/ui 5.3.3 → 6.0.0-rc.2

package/plugins/@vcmap-show-case/extent-example/src/ExtentExample.vue

@@ -1,71 +0,0 @@
-<template>
-  <VcsFormSection
-    heading="extentExample.title"
-    expandable
-    start-open
-    :header-actions="actions"
-    v-if="localConfig.extent"
-  >
-    <VcsExtent v-model="localConfig.extent" />
-  </VcsFormSection>
-</template>
-
-<script>
-  import { computed, inject, onUnmounted } from 'vue';
-  import {
-    setupExtentComponentActions,
-    VcsFormSection,
-    VcsExtent,
-  } from '@vcmap/ui';
-  import { Extent } from '@vcmap/core';
-
-  export default {
-    name: 'ExtentExample',
-    components: {
-      VcsFormSection,
-      VcsExtent,
-    },
-    props: {
-      value: {
-        type: Object,
-        required: true,
-      },
-    },
-    setup(props, { emit }) {
-      const app = inject('vcsApp');
-      const localConfig = computed({
-        get() {
-          return props.value;
-        },
-        set(value) {
-          emit('input', value);
-        },
-      });
-
-      const extent = computed({
-        get() {
-          return new Extent(localConfig.value.extent);
-        },
-        set(value) {
-          localConfig.value.extent = value.toJSON();
-        },
-      });
-      const { actions, destroy } = setupExtentComponentActions(
-        app,
-        extent,
-        props.disabled,
-      );
-
-      onUnmounted(() => {
-        destroy();
-      });
-
-      return {
-        localConfig,
-        actions,
-      };
-    },
-  };
-</script>
-
-<style scoped></style>

package/src/components/form-inputs-controls/VcsRadioGrid.vue

@@ -1,160 +0,0 @@
-<template>
-  <VcsTooltip
-    :tooltip-position="tooltipPosition"
-    :tooltip="errorMessage"
-    color="error"
-    :max-width="200"
-  >
-    <template #activator="{ on, attrs }">
-      <v-container v-on="on" class="py-0" :class="isDense ? 'px-1' : 'px-2'">
-        <v-radio-group
-          ref="radioGroup"
-          hide-details
-          class="vcs-radio-group"
-          :ripple="false"
-          :dense="isDense"
-          v-bind="{ ...$attrs, ...attrs }"
-          v-on="{ ...$listeners, ...on }"
-        >
-          <div class="d-flex gap-1 px-2 pt-2 pb-1 justify-center">
-            <div v-for="(item, idx) in items" :key="idx">
-              <div class="pt-1 pb-0" :class="$attrs.disabled ? 'disabled' : ''">
-                <slot name="label" :value="item[itemValue]" :src="item.src">
-                  <img :src="item.src" :alt="item[itemValue]" class="image" />
-                </slot>
-              </div>
-              <v-radio
-                :value="item[itemValue]"
-                :ripple="false"
-                class="ma-0 justify-center"
-                :class="isDense ? 'vcs-radio-dense' : 'vcs-radio'"
-                :dense="isDense"
-              />
-            </div>
-          </div>
-        </v-radio-group>
-      </v-container>
-    </template>
-  </VcsTooltip>
-</template>
-
-<script>
-  import { computed, ref } from 'vue';
-  import { VContainer, VRadioGroup, VRadio } from 'vuetify/lib';
-  import VcsTooltip from '../notification/VcsTooltip.vue';
-  import { useErrorSync } from './composables.js';
-
-  /**
-   * @description Stylized wrapper around {@link https://vuetifyjs.com/en/api/v-radio-group/ |vuetify radio group} which places icons or raster src files above the radio buttons as labels and arranges them in a grid.
-   * Use figure and figcaption for labeled radio icons:
-   * @example
-   * <VcsRadioGrid v-model="model" items="items" >
-   *    <template #label="{ src, value }">
-   *       <figure>
-   *          <v-icon size="24" class="d-flex justify-center">{{src}}</v-icon>
-   *          <figcaption class="d-flex justify-center">{{ value }}</figcaption>
-   *       </figure>
-   *    </template>
-   * </VcsRadioGrid>
-   * @vue-prop {{value: string, src: string}[]} items - The items to be displayed in the grid. The src is the path to the raster image.
-   * @vue-prop {('bottom' | 'left' | 'top' | 'right')}  [tooltipPosition='right'] - Position of the error tooltip.
-   * @vue-prop {string} itemValue - The key of the provided item objects that contains the value.
-   * @vue-data {slot} [#label] - slot to display labels where the src does not contain a path to an img but e.g. the name of an icon. Then an v-icon can be used in the slot.
-   */
-  export default {
-    name: 'VcsRadioGrid',
-    components: {
-      VContainer,
-      VRadioGroup,
-      VRadio,
-      VcsTooltip,
-    },
-    props: {
-      items: {
-        type: Array,
-        required: true,
-      },
-      tooltipPosition: {
-        type: String,
-        default: 'right',
-      },
-      itemValue: {
-        type: String,
-        default: 'value',
-      },
-    },
-    setup(props, { attrs }) {
-      const radioGroup = ref();
-
-      const errorMessage = useErrorSync(radioGroup);
-      return {
-        isDense: computed(() => attrs.dense !== false),
-        radioGroup,
-        errorMessage,
-      };
-    },
-    model: {
-      event: 'change',
-    },
-  };
-</script>
-
-<style lang="scss" scoped>
-  // TODO: scss for radio buttons should be moved to own file.
-  @import '../../styles/vcsFont.scss';
-  @import '../../styles/shades.scss';
-  .v-input--radio-group--column .v-radio:not(:last-child):not(:only-child) {
-    margin-bottom: 0;
-  }
-  .v-input {
-    &.vcs-radio-group {
-      ::v-deep {
-        margin-top: 0;
-        padding-top: 0;
-        label.v-label,
-        .v-icon.v-icon {
-          font-size: $vcs-font-size;
-          color: inherit;
-          &.theme--light {
-            color: map-get($shades, 'black') !important;
-            &.error--text {
-              color: var(--v-error-base) !important;
-            }
-          }
-          &.theme--dark {
-            color: map-get($shades, 'white') !important;
-            &.error--text {
-              color: var(--v-error-base) !important;
-            }
-          }
-        }
-        .v-radio:not(:last-child):not(:only-child) {
-          margin-bottom: 0;
-        }
-        .v-input--selection-controls__input {
-          margin: 0;
-        }
-        label.v-label.error--text {
-          animation: none;
-        }
-      }
-    }
-  }
-  .vcs-radio {
-    height: 40px;
-    align-items: center;
-  }
-  .vcs-radio-dense {
-    height: 32px;
-    align-items: center;
-  }
-  .image {
-    max-height: 24px;
-    max-width: 24px;
-    height: auto;
-    width: auto;
-  }
-  .disabled {
-    opacity: 0.3;
-  }
-</style>

package/src/components/form-inputs-controls/VcsRadioGrid.vue.d.ts

@@ -1,35 +0,0 @@
-declare const _default: import("vue").DefineComponent<{
-    items: {
-        type: ArrayConstructor;
-        required: true;
-    };
-    tooltipPosition: {
-        type: StringConstructor;
-        default: string;
-    };
-    itemValue: {
-        type: StringConstructor;
-        default: string;
-    };
-}, {
-    isDense: import("vue").ComputedRef<boolean>;
-    radioGroup: import("vue").Ref<any>;
-    errorMessage: import("vue").Ref<string>;
-}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
-    items: {
-        type: ArrayConstructor;
-        required: true;
-    };
-    tooltipPosition: {
-        type: StringConstructor;
-        default: string;
-    };
-    itemValue: {
-        type: StringConstructor;
-        default: string;
-    };
-}>>, {
-    tooltipPosition: string;
-    itemValue: string;
-}>;
-export default _default;

package/src/components/form-inputs-controls/composables.d.ts

@@ -1,7 +0,0 @@
-/**
- * Syncs the error and validation state with the underlying vuetify component.
- * @param {import("vue").Ref<unknown>} elementRef The template ref to the base vuetify component.
- * @returns {import("vue").Ref<string>} Error message to display. Is empty string if either there are no error messages or if the validation errors are not displayed because
- * no interaction with the component or validation was reset by form. Validation errors have precedence over custom error messages.
- */
-export function useErrorSync(elementRef: import("vue").Ref<unknown>): import("vue").Ref<string>;

package/src/components/form-inputs-controls/composables.js

@@ -1,31 +0,0 @@
-import { computed } from 'vue';
-
-/**
- * Syncs the error and validation state with the underlying vuetify component.
- * @param {import("vue").Ref<unknown>} elementRef The template ref to the base vuetify component.
- * @returns {import("vue").Ref<string>} Error message to display. Is empty string if either there are no error messages or if the validation errors are not displayed because
- * no interaction with the component or validation was reset by form. Validation errors have precedence over custom error messages.
- */
-// eslint-disable-next-line import/prefer-default-export
-export function useErrorSync(elementRef) {
-  return computed(() => {
-    // if element is already mounted
-    if (elementRef.value) {
-      // errorMessages of selectField can either be (empty) array or string. Makes sure it is array.
-      const customErrorMessages = Array.isArray(elementRef.value.errorMessages)
-        ? elementRef.value.errorMessages
-        : [elementRef.value.errorMessages];
-      // if validationState is 'error' (reset button removes this) or if there is errorMessages prop
-      if (
-        elementRef.value.validationState === 'error' ||
-        !!customErrorMessages.length
-      ) {
-        // custom errorMessages are displayed when all validation error are solved.
-        return (
-          [...elementRef.value.errorBucket, ...customErrorMessages][0] || ''
-        );
-      }
-    }
-    return '';
-  });
-}

package/src/components/import/FileDrop.vue.d.ts

@@ -1,26 +0,0 @@
-declare const _default: import("vue").DefineComponent<{
-    value: {
-        type: ArrayConstructor;
-        default: () => never[];
-    };
-    title: {
-        type: StringConstructor;
-        default: string;
-    };
-}, {
-    isDragging: import("vue").Ref<boolean>;
-    dropped(event: any): void;
-}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
-    value: {
-        type: ArrayConstructor;
-        default: () => never[];
-    };
-    title: {
-        type: StringConstructor;
-        default: string;
-    };
-}>>, {
-    value: unknown[];
-    title: string;
-}>;
-export default _default;

package/src/components/vector-properties/composables.d.ts

@@ -1,33 +0,0 @@
-/**
- * Creates a computed property with a getter and a setter for a specific primitive object property/key of the modelled object. This composable allows to pass the computed to an v-model of a sub component. The getter returns the value of the key. The setter merges the passed value with the other object properties of the modelled object and emits the whole object as a input event, and only the changed props as an change event.
- * @param {function():T} modelObject Getter for the property that is modelled by the component and should be updated with input event, usually this is the 'value' prop.
- * @param {K} key The key of the modelObject that should be returned on get and updated on set.
- * @param {function(string, unknown[]):void} emit The emit function of the component context that is using this composable.
- * @returns {import('vue').WritableComputedRef<T[K]>} A computed with a getter and a setter.
- * @template {Record<string, unknown>} T
- * @template {string} K
- */
-export function usePrimitiveProperty<T extends Record<string, unknown>, K extends string>(modelObject: () => T, key: K, emit: (arg0: string, arg1: unknown[]) => void): import("vue").WritableComputedRef<T[K]>;
-/**
- * Creates an object with the entries of the input array as keys and computed properties as values. These have a getter and a setter for a specific entry of the array, that is an object property/key of the modelled object. This composable allows to pass the computeds to an v-model of a sub component. The getter returns the value of the array entry. The setter first merges the passed value with the other array entries, and then with the other object properties of the modelled object and emits the whole object as a input event, and only the changed props as an change event.
- * @param {function():T} modelObject Getter for the property that is modelled by the component and should be updated with input event, usually this is the 'value' prop.
- * @param {K} key The key of the modelObject that should be returned on get and updated on set.
- * @param {function(string, unknown[]):void} emit The emit function of the component context that is using this composable.
- * @param {number} arrayLength The length of the array property.
- * @returns {import('vue').WritableComputedRef<T[K][number]>[]} An object with the provided names as keys and the corresponding computed properties with a getter and a setter.
- * @template {Object} T
- * @template {string} K
- */
-export function useArrayProperty<T extends Object, K extends string>(modelObject: () => T, key: K, emit: (arg0: string, arg1: unknown[]) => void, arrayLength: number): import("vue").WritableComputedRef<T[K][number]>[];
-/**
- * Creates a computed property that returns whether a specific key of the modelled object (value prop) is undefined or not. If set to true, the provided default value is applied to the key of the modelled object.
- * @param {function():T} modelObject Getter for the property that is modelled by the component and should be updated with input event, usually this is the 'value' prop.
- * @param {K} key The key of the modelObject that should be return on get and updated on set.
- * @param {function(string, unknown[]):void} emit The emit function of the component context that is using this composable.
- * @param {D} valueDefault  The defualt value that is set when `true` is provided to the setter of the computed property.
- * @returns {import('vue').WritableComputedRef<boolean>} A computed ref with a setter and a getter.
- * @template {Object} T
- * @template {string} K
- * @template D
- */
-export function useHasProperty<T extends Object, K extends string, D>(modelObject: () => T, key: K, emit: (arg0: string, arg1: unknown[]) => void, valueDefault: D): import('vue').WritableComputedRef<boolean>;

package/src/components/vector-properties/composables.js

@@ -1,100 +0,0 @@
-import { computed } from 'vue';
-
-/**
- * Creates a computed property with a getter and a setter for a specific primitive object property/key of the modelled object. This composable allows to pass the computed to an v-model of a sub component. The getter returns the value of the key. The setter merges the passed value with the other object properties of the modelled object and emits the whole object as a input event, and only the changed props as an change event.
- * @param {function():T} modelObject Getter for the property that is modelled by the component and should be updated with input event, usually this is the 'value' prop.
- * @param {K} key The key of the modelObject that should be returned on get and updated on set.
- * @param {function(string, unknown[]):void} emit The emit function of the component context that is using this composable.
- * @returns {import('vue').WritableComputedRef<T[K]>} A computed with a getter and a setter.
- * @template {Record<string, unknown>} T
- * @template {string} K
- */
-export function usePrimitiveProperty(modelObject, key, emit) {
-  return computed({
-    get() {
-      return modelObject()[key];
-    },
-    set(value) {
-      if (modelObject()[key] !== value) {
-        const newParams = structuredClone(modelObject());
-        const changedParams = { [key]: value ?? undefined };
-        emit('input', Object.assign(newParams, changedParams));
-        emit('propertyChange', changedParams);
-      }
-    },
-  });
-}
-
-/**
- * Creates an object with the entries of the input array as keys and computed properties as values. These have a getter and a setter for a specific entry of the array, that is an object property/key of the modelled object. This composable allows to pass the computeds to an v-model of a sub component. The getter returns the value of the array entry. The setter first merges the passed value with the other array entries, and then with the other object properties of the modelled object and emits the whole object as a input event, and only the changed props as an change event.
- * @param {function():T} modelObject Getter for the property that is modelled by the component and should be updated with input event, usually this is the 'value' prop.
- * @param {K} key The key of the modelObject that should be returned on get and updated on set.
- * @param {function(string, unknown[]):void} emit The emit function of the component context that is using this composable.
- * @param {number} arrayLength The length of the array property.
- * @returns {import('vue').WritableComputedRef<T[K][number]>[]} An object with the provided names as keys and the corresponding computed properties with a getter and a setter.
- * @template {Object} T
- * @template {string} K
- */
-export function useArrayProperty(modelObject, key, emit, arrayLength) {
-  return Array(arrayLength)
-    .fill()
-    .map((entry, index) => {
-      return computed({
-        get() {
-          if (modelObject()?.[key]) {
-            return modelObject()[key][index];
-          } else {
-            return undefined;
-          }
-        },
-        set(value) {
-          const newParams = structuredClone(modelObject());
-          let changedParams;
-          if (!modelObject()?.[key]) {
-            const newArray = Array(arrayLength).fill();
-            newArray[index] = value;
-            changedParams = { [key]: newArray };
-          } else if (modelObject()[key][index] !== value) {
-            const newArray = [...modelObject()[key]];
-            newArray[index] = value;
-            changedParams = { [key]: newArray };
-          }
-
-          if (changedParams) {
-            emit('input', Object.assign(newParams, changedParams));
-            emit('propertyChange', changedParams);
-          }
-        },
-      });
-    });
-}
-
-/**
- * Creates a computed property that returns whether a specific key of the modelled object (value prop) is undefined or not. If set to true, the provided default value is applied to the key of the modelled object.
- * @param {function():T} modelObject Getter for the property that is modelled by the component and should be updated with input event, usually this is the 'value' prop.
- * @param {K} key The key of the modelObject that should be return on get and updated on set.
- * @param {function(string, unknown[]):void} emit The emit function of the component context that is using this composable.
- * @param {D} valueDefault  The defualt value that is set when `true` is provided to the setter of the computed property.
- * @returns {import('vue').WritableComputedRef<boolean>} A computed ref with a setter and a getter.
- * @template {Object} T
- * @template {string} K
- * @template D
- */
-export function useHasProperty(modelObject, key, emit, valueDefault) {
-  return computed({
-    get() {
-      return modelObject()?.[key] !== undefined;
-    },
-    set(value) {
-      const newParams = structuredClone(modelObject());
-      let changedParams;
-      if (value) {
-        changedParams = { [key]: valueDefault };
-      } else {
-        changedParams = { [key]: undefined };
-      }
-      emit('input', Object.assign(newParams, changedParams));
-      emit('propertyChange', changedParams);
-    },
-  });
-}

package/src/styles/utils/_all.scss

@@ -1,12 +0,0 @@
-@import './border';
-@import './cursor';
-@import './display';
-@import './fade-in';
-@import './transform';
-@import './position';
-@import './size';
-@import './slide-in';
-@import './spacing';
-@import './text';
-@import './transition';
-@import './z-index';

package/src/styles/utils/_border.scss

@@ -1,7 +0,0 @@
-.border-1--primary {
-  border: 1px solid var(--v-primary-base);
-}
-
-.border-2--primary {
-  border: 2px solid var(--v-primary-base);
-}

package/src/styles/utils/_cursor.scss

@@ -1,19 +0,0 @@
-.cursor-grab {
-  cursor: grab;
-}
-
-.cursor-pointer {
-  cursor: pointer;
-}
-
-.cursor-auto {
-  cursor: auto;
-}
-
-.cursor-not-allowed {
-  cursor: not-allowed !important;
-}
-
-.user-select-none {
-  user-select: none;
-}

package/src/styles/utils/_display.scss

@@ -1,3 +0,0 @@
-.d-contents {
-  display: contents;
-}

package/src/styles/utils/_fade-in.scss

@@ -1,8 +0,0 @@
-.fade-in-100-ease-enter-active,
-.fade-in-100-ease-leave-active {
-  transition: opacity 0.1s ease;
-}
-.fade-in-100-ease-enter,
-.fade-in-100-ease-leave-to {
-  opacity: 0;
-}

package/src/styles/utils/_position.scss

@@ -1,38 +0,0 @@
-.position-absolute {
-  position: absolute;
-}
-
-.position-relative {
-  position: relative;
-}
-
-.pos-a-0 {
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-}
-
-.pos-t-0 {
-  top: 0;
-}
-
-.pos-t-11 {
-  top: 44px;
-}
-
-.pos-r-0 {
-  right: 0;
-}
-
-.pos-r-1 {
-  right: 4px;
-}
-
-.pos-r-8 {
-  right: 32px;
-}
-
-.pos-b-4 {
-  bottom: 16px;
-}

package/src/styles/utils/_size.scss

@@ -1,79 +0,0 @@
-.w-full {
-  width: 100%;
-}
-
-.w-half {
-  width: 50%;
-}
-
-.w-max-half {
-  max-width: 50% !important;
-}
-
-.w-max-unset {
-  max-width: unset !important;
-}
-
-.h-full {
-  height: 100%;
-}
-
-.h-3 {
-  height: 12px;
-}
-
-.h-6 {
-  height: 24px;
-}
-
-.h-8 {
-  height: 32px;
-}
-
-.h-8 {
-  height: 32px;
-}
-
-.h-10 {
-  height: 40px;
-}
-
-.h-10\.5 {
-  height: 42px;
-}
-
-.h-12 {
-  height: 48px;
-}
-
-.h-16 {
-  height: 64px;
-}
-
-.w-3 {
-  width: 12px;
-}
-
-.w-4 {
-  width: 16px;
-}
-
-.w-8 {
-  width: 32px;
-}
-
-.w-16 {
-  width: 64px;
-}
-
-.w-12 {
-  width: 48px;
-}
-
-.w-13 {
-  width: 52px;
-}
-
-.w-max-16 {
-  max-width: 64px !important;
-}

package/src/styles/utils/_slide-in.scss

@@ -1,26 +0,0 @@
-.slide-from-left-300-ease-enter-active,
-.slide-from-left-300-ease-leave-active {
-  transition: transform 0.3s ease;
-}
-.slide-from-left-300-ease-enter,
-.slide-from-left-300-ease-leave-to {
-  transform: translateX(-120%);
-}
-
-.slide-from-top-200-ease-enter-active,
-.slide-from-top-200-ease-leave-active {
-  transition: transform 0.2s ease;
-}
-.slide-from-top-200-ease-enter,
-.slide-from-top-200-ease-leave-to {
-  transform: translateY(-120%);
-}
-
-.slide-from-top-300-ease-enter-active,
-.slide-from-top-300-ease-leave-active {
-  transition: transform 0.3s ease;
-}
-.slide-from-top-300-ease-enter,
-.slide-from-top-300-ease-leave-to {
-  transform: translateY(-120%);
-}

package/src/styles/utils/_spacing.scss

@@ -1,11 +0,0 @@
-.-mt-2 {
-  margin-top: -8px;
-}
-.-mx-2 {
-  margin-left: -8px;
-  margin-right: -8px;
-}
-.-mx-3 {
-  margin-left: -12px;
-  margin-right: -12px;
-}