@vcmap/ui 5.3.2 → 6.0.0-rc.1

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,
           );
         },

package/src/components/style/MenuWrapper.vue.d.ts

@@ -1,5 +1,5 @@
 declare const _default: import("vue").DefineComponent<{
-    value: {
+    modelValue: {
         default: undefined;
         required: false;
         type: ObjectConstructor;
@@ -25,8 +25,8 @@ declare const _default: import("vue").DefineComponent<{
     reset(): void;
     close(): void;
     handleCheckbox(value: any): void;
-}, {}, {}, {}, 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, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: {
         default: undefined;
         required: false;
         type: ObjectConstructor;
@@ -48,8 +48,8 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
     };
 }>>, {
-    value: Record<string, any>;
     disabled: boolean;
+    modelValue: Record<string, any>;
     valueDefault: Record<string, any>;
-}>;
+}, {}>;
 export default _default;

package/src/components/style/VcsFeatureStyleComponent.vue

@@ -1,6 +1,6 @@
 <template>
   <VcsVectorStyleComponent
-    :value="styleOptions"
+    :model-value="styleOptions"
     @update:fill="updateFill"
     @update:stroke="updateStroke"
     @update:image="updateImage"

package/src/components/style/VcsFeatureStyleComponent.vue.d.ts

@@ -11,21 +11,21 @@ declare const _default: import("vue").DefineComponent<{
         image: undefined;
         text: undefined;
     }>;
-    valueDefault: import("@vcmap/core").VectorStyleItemOptions;
+    valueDefault: import("@vcmap/core", { with: { "resolution-mode": "import" } }).VectorStyleItemOptions;
     updateFill(update: any): void;
     updateStroke(update: any): void;
     updateText(update: any): void;
     updateImage(update: 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<{
     featureProperties: {
         type: ObjectConstructor;
         required: true;
     };
-}>>, {}>;
+}>>, {}, {}>;
 export default _default;
 export type StyleOptions = {
-    fill?: any | null | undefined;
-    stroke?: any | null | undefined;
-    image?: any | null | undefined;
-    text?: any | null | undefined;
+    fill?: import("ol/style/Fill").Options | null | undefined;
+    stroke?: import("ol/style/Stroke").Options | null | undefined;
+    image?: import("ol/style/Image").Options | null | undefined;
+    text?: import("ol/style/Text").Options | null | undefined;
 };

package/src/components/style/VcsFillMenu.vue

@@ -1,22 +1,21 @@
 <template>
   <MenuWrapper
-    v-bind="{ value, valueDefault, disabled }"
+    v-bind="{ ...$attrs, modelValue, valueDefault, disabled }"
     :value-fallback="{ color: [255, 255, 255, 1] }"
-    v-on="$listeners"
     name="components.style.fill"
   >
     <template #preview>
       <v-sheet :color="rgbaString" width="100%" height="100%" />
     </template>
     <template #content>
-      <VcsFillSelector :value="value" v-on="$listeners" />
+      <VcsFillSelector :model-value="modelValue" v-bind="$attrs" />
     </template>
   </MenuWrapper>
 </template>
 
 <script>
   import { computed } from 'vue';
-  import { VSheet } from 'vuetify/lib';
+  import { VSheet } from 'vuetify/components';
   import VcsFillSelector from './VcsFillSelector.vue';
   import MenuWrapper from './MenuWrapper.vue';
   import { useColorObject, rgbaObjectToString } from './composables.js';
@@ -36,7 +35,7 @@
       MenuWrapper,
     },
     props: {
-      value: {
+      modelValue: {
         type: Object,
         default: undefined,
       },
@@ -50,7 +49,7 @@
       },
     },
     setup(props) {
-      const rgbaObject = useColorObject(() => props.value?.color);
+      const rgbaObject = useColorObject(() => props.modelValue?.color);
       return {
         rgbaString: computed(() => rgbaObjectToString(rgbaObject.value)),
       };

package/src/components/style/VcsFillMenu.vue.d.ts

@@ -1,5 +1,5 @@
 declare const _default: import("vue").DefineComponent<{
-    value: {
+    modelValue: {
         type: ObjectConstructor;
         default: undefined;
     };
@@ -13,8 +13,8 @@ declare const _default: import("vue").DefineComponent<{
     };
 }, {
     rgbaString: import("vue").ComputedRef<string>;
-}, {}, {}, {}, 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, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: {
         type: ObjectConstructor;
         default: undefined;
     };
@@ -27,8 +27,8 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
 }>>, {
-    value: Record<string, any>;
     disabled: boolean;
+    modelValue: Record<string, any>;
     valueDefault: Record<string, any>;
-}>;
+}, {}>;
 export default _default;

package/src/components/style/VcsFillSelector.vue

@@ -1,17 +1,16 @@
 <template>
   <v-sheet>
     <v-color-picker
-      :value="rgbaObject"
-      @input="updateColor"
+      :model-value="rgbaObject"
+      @update:model-value="updateColor"
       mode="rgba"
-      :hide-mode-switch="true"
       :disabled="!value"
     />
   </v-sheet>
 </template>
 
 <script>
-  import { VSheet, VColorPicker } from 'vuetify/lib';
+  import { VSheet, VColorPicker } from 'vuetify/components';
   import { useColorObject } from './composables.js';
 
   /**
@@ -25,19 +24,19 @@
       VColorPicker,
     },
     props: {
-      value: {
+      modelValue: {
         type: Object,
         default: undefined,
       },
     },
     setup(props, { emit }) {
       return {
-        rgbaObject: useColorObject(() => props.value?.color),
+        rgbaObject: useColorObject(() => props.modelValue?.color),
         updateColor(rgba) {
           const fill = {
             color: [rgba.r, rgba.g, rgba.b, rgba.a],
           };
-          emit('input', fill);
+          emit('update:modelValue', fill);
         },
       };
     },

package/src/components/style/VcsFillSelector.vue.d.ts

@@ -1,5 +1,5 @@
 declare const _default: import("vue").DefineComponent<{
-    value: {
+    modelValue: {
         type: ObjectConstructor;
         default: undefined;
     };
@@ -11,12 +11,12 @@ declare const _default: import("vue").DefineComponent<{
         a: number;
     }>;
     updateColor(rgba: any): void;
-}, {}, {}, {}, 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, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: {
         type: ObjectConstructor;
         default: undefined;
     };
 }>>, {
-    value: Record<string, any>;
-}>;
+    modelValue: Record<string, any>;
+}, {}>;
 export default _default;

package/src/components/style/VcsImageMenu.vue

@@ -1,12 +1,11 @@
 <template>
   <MenuWrapper
-    v-bind="{ value, valueDefault }"
+    v-bind="{ ...$attrs, modelValue, valueDefault }"
     :value-fallback="{
       radius: 10,
       fill: { color: [255, 255, 255, 1] },
       stroke: { color: [0, 0, 0, 1], width: 2 },
     }"
-    v-on="$listeners"
     name="components.style.image"
   >
     <template #preview>
@@ -14,8 +13,13 @@
     </template>
     <template #content>
       <VcsImageSelector
-        v-bind="{ value, valueDefault, iconOptions, extendedShapeSettings }"
-        v-on="$listeners"
+        v-bind="{
+          ...$attrs,
+          modelValue,
+          valueDefault,
+          iconOptions,
+          extendedShapeSettings,
+        }"
         class="pb-2"
       />
     </template>
@@ -29,7 +33,7 @@
 
   /**
    * @description A wrapper for the VcsImageSelector, that has a small shape/icon preview and a menu that pops up when clicking the preview, containing the image selector.
-   * @vue-prop {import("ol/style/RegularShape").Options | import("ol/style/Circle").Options | import("ol/style/Icon").Options} value - The Image options
+   * @vue-prop {import("ol/style/RegularShape").Options | import("ol/style/Circle").Options | import("ol/style/Icon").Options} modelValue - The Image options
    * @vue-prop {import("ol/style/RegularShape").Options | import("ol/style/Circle").Options | import("ol/style/Icon").Options} valueDefault - The default image options
    * @vue-prop {import("ol/style/Icon").Options} iconOptions - The icon options too choose from. Scale and opacity are ignored.
    * @vue-prop {boolean} [extendedShapeSettings=false] - If true, there are all the input fields needed to create arbitrary ol RegularShapes.
@@ -41,7 +45,7 @@
       VcsImageSelector,
     },
     props: {
-      value: {
+      modelValue: {
         type: Object,
         default: undefined,
       },
@@ -62,12 +66,12 @@
       const canvas = ref(null);
 
       onMounted(() => {
-        drawImageStyle(canvas.value, props.value, true);
+        drawImageStyle(canvas.value, props.modelValue, true);
         watch(
-          () => props.value,
+          () => props.modelValue,
           () => {
             // XXX Maybe add some sort of timeout funciton, so it draws only once when user stops using the slider
-            drawImageStyle(canvas.value, props.value, true);
+            drawImageStyle(canvas.value, props.modelValue, true);
           },
           { deep: true },
         );

package/src/components/style/VcsImageMenu.vue.d.ts

@@ -1,5 +1,5 @@
 declare const _default: import("vue").DefineComponent<{
-    value: {
+    modelValue: {
         type: ObjectConstructor;
         default: undefined;
     };
@@ -17,8 +17,8 @@ declare const _default: import("vue").DefineComponent<{
     };
 }, {
     canvas: import("vue").Ref<null>;
-}, {}, {}, {}, 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, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: {
         type: ObjectConstructor;
         default: undefined;
     };
@@ -35,9 +35,9 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
 }>>, {
-    value: Record<string, any>;
+    modelValue: Record<string, any>;
     valueDefault: Record<string, any>;
     extendedShapeSettings: boolean;
     iconOptions: unknown[];
-}>;
+}, {}>;
 export default _default;