@vcmap/ui 5.3.2 → 6.0.0-rc.1

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/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;
-}

package/src/styles/utils/_text.scss

@@ -1,30 +0,0 @@
-.font-size-14 {
-  font-size: 14px !important;
-}
-.font-size-12 {
-  font-size: 12px !important;
-}
-
-.line-height-1\.2 {
-  line-height: 1.2 !important;
-}
-
-.line-height-30px {
-  line-height: 30px;
-}
-
-.line-height-1 {
-  line-height: 1 !important;
-}
-
-strong.caption {
-  font-weight: bolder !important;
-}
-
-.theme--light.v-icon {
-  color: inherit !important;
-}
-
-#app.theme--light.v-application .text--primary {
-  color: var(--v-primary-base) !important;
-}

package/src/styles/utils/_transform.scss

@@ -1,11 +0,0 @@
-.flip-vertical {
-  transform: scale(-1, 1);
-}
-
-.rotate {
-  transition: 0.1s transform ease;
-
-  &-180--right {
-    transform: rotate(-180deg);
-  }
-}

package/src/styles/utils/_transition.scss

@@ -1,11 +0,0 @@
-.transition-color-100-ease {
-  transition: color 0.1s ease;
-}
-
-.transition-transform-100-ease {
-  transition: transform 0.1s ease;
-}
-
-.transition-transform-200-ease {
-  transition: transform 0.2s ease;
-}

package/src/styles/utils/_z-index.scss

@@ -1,15 +0,0 @@
-.z-index-1 {
-  z-index: 1;
-}
-
-.z-index-2 {
-  z-index: 2;
-}
-
-.z-index-99 {
-  z-index: 99;
-}
-
-.z-index-100 {
-  z-index: 100;
-}