@vcmap/ui 6.0.0-rc.3 → 6.0.0-rc.6

package/src/components/notification/VcsHelp.vue

@@ -1,6 +1,9 @@
 <template>
-  <div v-if="show" class="ma-0 font-weight-regular rounded-0 bg-base-lighten-4">
-    <v-container class="pa-1 vcs-help">
+  <div
+    v-if="$slots.default || text"
+    class="ma-0 font-weight-regular rounded-0 bg-base-lighten-4"
+  >
+    <v-container class="py-1 px-2 vcs-help">
       <slot>
         <span>{{ $st(text) }}</span>
       </slot>
@@ -10,6 +13,7 @@
 <style lang="scss">
   .vcs-help {
     box-sizing: border-box;
+    padding-left: 16px;
     ol,
     ul {
       padding-left: 16px; /* Indentation for list items */
@@ -22,7 +26,6 @@
   /**
    * @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.
    */
   export default {
@@ -35,10 +38,6 @@
         type: String,
         default: undefined,
       },
-      show: {
-        type: Boolean,
-        required: true,
-      },
     },
   };
 </script>

package/src/components/notification/VcsHelp.vue.d.ts

@@ -3,19 +3,11 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: undefined;
     };
-    show: {
-        type: BooleanConstructor;
-        required: true;
-    };
 }, any, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     text: {
         type: StringConstructor;
         default: undefined;
     };
-    show: {
-        type: BooleanConstructor;
-        required: true;
-    };
 }>>, {
     text: string;
 }, {}>;

package/src/components/plugins/AbstractConfigEditor.vue

@@ -32,11 +32,7 @@
    * @vue-prop {boolean} [showReset=false] - Flag to show a reset button in the footer. You need to handle @reset in a child component.
    * @vue-prop {Array<VcsAction>} [actions] - Optional actions rendered as ActionButtonList in the footer.
    * @vue-prop {string} [submitButtonTitle='components.apply'] - Option to change the submit button title, e.g. to 'components.add'.
-   * @vue-prop {boolean} [setConfigOnCancel=true] - Whether setConfig shall be called on cancel. Ensures compatability with v5.0.x
    * @vue-prop {boolean} [autoClose=true] - Whether window component shall be close on submit or cancel.
-   * @vue-prop {function():void} [onSubmit] - Callback function called on submit.
-   * @vue-prop {function():void} [onReset] - Callback function called on reset.
-   * @vue-prop {function():void} [onCancel] - Callback function called on cancel.
    * @vue-event {Event} submit - Event fired on clicking the submit button.
    * @vue-event {Event} cancel - Event fired on clicking the cancel button.
    * @vue-event {Event} reset - Event fired on clicking the reset button.
@@ -70,19 +66,8 @@
         type: Boolean,
         default: true,
       },
-      onSubmit: {
-        type: Function,
-        default: () => {},
-      },
-      onReset: {
-        type: Function,
-        default: () => {},
-      },
-      onCancel: {
-        type: Function,
-        default: () => {},
-      },
     },
+    emits: ['submit', 'cancel', 'reset'],
     setup(props, { attrs, emit }) {
       const app = inject('vcsApp');
 
@@ -95,24 +80,18 @@
       return {
         isValid: ref(true),
         submit(e) {
-          props.onSubmit();
           emit('submit', e);
           if (props.autoClose) {
             close();
           }
         },
         cancel(e) {
-          props.onCancel();
-          if (props.setConfigOnCancel) {
-            attrs.setConfig?.();
-          }
           emit('cancel', e);
           if (props.autoClose) {
             close();
           }
         },
         reset(e) {
-          props.onReset();
           emit('reset', e);
         },
       };

package/src/components/plugins/AbstractConfigEditor.vue.d.ts

@@ -19,24 +19,12 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-    onSubmit: {
-        type: FunctionConstructor;
-        default: () => void;
-    };
-    onReset: {
-        type: FunctionConstructor;
-        default: () => void;
-    };
-    onCancel: {
-        type: FunctionConstructor;
-        default: () => void;
-    };
 }, {
     isValid: import("vue").Ref<boolean>;
     submit(e: any): void;
     cancel(e: any): void;
     reset(e: any): void;
-}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("cancel" | "reset" | "submit")[], "cancel" | "reset" | "submit", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     showReset: {
         type: BooleanConstructor;
         default: boolean;
@@ -57,26 +45,15 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-    onSubmit: {
-        type: FunctionConstructor;
-        default: () => void;
-    };
-    onReset: {
-        type: FunctionConstructor;
-        default: () => void;
-    };
-    onCancel: {
-        type: FunctionConstructor;
-        default: () => void;
-    };
-}>>, {
-    onReset: Function;
-    onSubmit: Function;
+}>> & {
+    onReset?: ((...args: any[]) => any) | undefined;
+    onSubmit?: ((...args: any[]) => any) | undefined;
+    onCancel?: ((...args: any[]) => any) | undefined;
+}, {
     actions: unknown[];
     showReset: boolean;
     submitButtonTitle: string;
     setConfigOnCancel: boolean;
     autoClose: boolean;
-    onCancel: Function;
 }, {}>;
 export default _default;

package/src/components/section/VcsExpansionPanel.vue

@@ -10,6 +10,7 @@
   import { computed, ref, useSlots } from 'vue';
   import VcsActionButtonList from '../buttons/VcsActionButtonList.vue';
   import { createEllipseTooltip } from '../composables.js';
+  import { useIconSize } from '../../vuePlugins/vuetify.js';
 
   const props = defineProps({
     heading: {
@@ -39,14 +40,19 @@
     computed(() => undefined),
     computed(() => props.heading),
   );
+  const iconSize = useIconSize();
 </script>
 <template>
   <v-expansion-panel :disabled="disabled" v-bind="$attrs">
     <v-expansion-panel-title static class="px-2">
       <template #default="{ expanded }">
         <v-list-item-title ref="panelHeader">
-          <v-icon v-if="!expanded" class="pr-1"> mdi-chevron-down </v-icon>
-          <v-icon v-if="expanded" class="pr-1"> mdi-chevron-right </v-icon>
+          <v-icon :size="iconSize" v-if="!expanded" class="pr-1">
+            mdi-chevron-right
+          </v-icon>
+          <v-icon :size="iconSize" v-if="expanded" class="pr-1">
+            mdi-chevron-down
+          </v-icon>
           <span
             :class="{
               'vcs-panel-title__append':
@@ -82,7 +88,7 @@
   :deep(.v-expansion-panel-title) {
     font-size: var(--v-vcs-font-size);
     min-height: unset;
-    height: var(--v-vcs-item-height);
+    height: calc(var(--v-vcs-font-size) * 2 + 6px);
     line-height: 1.2;
     padding: 0 8px;
   }

package/src/components/section/VcsExpansionPanel.vue.d.ts

@@ -1,11 +1,11 @@
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{}, {
-    headerActions: unknown[];
     disabled: boolean;
+    headerActions: unknown[];
     heading?: string | undefined;
     actionButtonListOverflowCount?: number | undefined;
     $props: {
-        readonly headerActions?: unknown[] | undefined;
         readonly disabled?: boolean | undefined;
+        readonly headerActions?: unknown[] | undefined;
         readonly heading?: string | undefined;
         readonly actionButtonListOverflowCount?: number | undefined;
     };

package/src/components/section/VcsFormSection.vue

@@ -10,16 +10,16 @@
             <v-btn
               :ripple="false"
               dense
-              variant="plain"
+              variant="text"
               icon
-              :size="useItemHeight().value - 4"
+              :size="fontSize * 2"
               :disabled="disabled"
               elevation="0"
               @click="open = !open"
               v-if="expandable"
               :aria-expanded="open"
             >
-              <v-icon :size="useItemHeight().value - 8">{{
+              <v-icon>{{
                 open ? 'mdi-chevron-down' : 'mdi-chevron-right'
               }}</v-icon>
             </v-btn>
@@ -36,7 +36,7 @@
         </div>
       </div>
     </slot>
-    <VcsHelp :text="helpText" :show="showHelp">
+    <VcsHelp :text="helpText" v-if="showHelp && ($slots.help || helpText)">
       <slot name="help" />
     </VcsHelp>
     <article class="section-content" v-if="showContent">
@@ -48,7 +48,7 @@
 <script>
   import { computed, reactive, ref } from 'vue';
   import { VBtn, VIcon } from 'vuetify/components';
-  import { useItemHeight } from '../../vuePlugins/vuetify.js';
+  import { useFontSize } from '../../vuePlugins/vuetify.js';
   import VcsActionButtonList from '../buttons/VcsActionButtonList.vue';
   import VcsHelp from '../notification/VcsHelp.vue';
 
@@ -134,12 +134,14 @@
         return props.headerActions;
       });
 
+      const fontSize = useFontSize();
+
       return {
         open,
         showContent,
         showHelp,
         actions,
-        useItemHeight,
+        fontSize,
       };
     },
   };
@@ -147,9 +149,13 @@
 
 <style lang="scss" scoped>
   .vcs-form-section-header {
-    height: calc(var(--v-vcs-item-height) + 8px);
+    height: calc(var(--v-vcs-font-size) * 2 + 14px);
   }
   .v-alert--text:before {
     background-color: transparent;
   }
+  // remove hover shadow over button
+  :deep(.v-btn__overlay) {
+    --v-hover-opacity: 0;
+  }
 </style>

package/src/components/section/VcsFormSection.vue.d.ts

@@ -33,7 +33,7 @@ declare const _default: import("vue").DefineComponent<{
     showContent: import("vue").ComputedRef<boolean>;
     showHelp: import("vue").ComputedRef<boolean>;
     actions: import("vue").ComputedRef<VcsAction>;
-    useItemHeight: typeof useItemHeight;
+    fontSize: import("vue").ComputedRef<number>;
 }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     heading: {
         type: StringConstructor;
@@ -65,8 +65,8 @@ declare const _default: import("vue").DefineComponent<{
         default: undefined;
     };
 }>>, {
-    headerActions: unknown[];
     disabled: boolean;
+    headerActions: unknown[];
     heading: string;
     actionButtonListOverflowCount: number;
     expandable: boolean;
@@ -74,4 +74,3 @@ declare const _default: import("vue").DefineComponent<{
     helpText: string;
 }, {}>;
 export default _default;
-import { useItemHeight } from '../../vuePlugins/vuetify.js';

package/src/components/style/VcsImageSelector.vue

@@ -45,13 +45,13 @@
       <div v-if="selectedType === ImageType.ICON">
         <v-row no-gutters>
           <v-col>
-            <VcsLabel html-for="style-icon-opacity">
+            <VcsLabel :html-for="`${cid}-style-icon-opacity`">
               {{ $t('components.style.opacity') }}
             </VcsLabel>
           </v-col>
           <v-col>
             <VcsSlider
-              id="style-icon-opacity"
+              :id="`${cid}-style-icon-opacity`"
               v-model="localValue.opacity"
               step="0.1"
               type="number"
@@ -69,11 +69,13 @@
           :key="input.key"
         >
           <v-col>
-            <VcsLabel>{{ $st(`components.style.${input.key}`) }}</VcsLabel>
+            <VcsLabel :html-for="`${cid}-${input.key}`">{{
+              $st(`components.style.${input.key}`)
+            }}</VcsLabel>
           </v-col>
           <v-col cols="3">
             <VcsTextField
-              :id="`style-shape-${input.key}`"
+              :id="`${cid}-${input.key}`"
               :hide-spin-buttons="true"
               type="number"
               :unit="input.unit || ''"
@@ -102,11 +104,13 @@
         v-if="extendedShapeSettings || selectedType === ImageType.ICON"
       >
         <v-col>
-          <VcsLabel>{{ $t('components.style.scale') }}</VcsLabel>
+          <VcsLabel :html-for="`${cid}-style-shape-scale`">{{
+            $t('components.style.scale')
+          }}</VcsLabel>
         </v-col>
         <v-col cols="3">
           <VcsTextField
-            id="style-shape-scale"
+            :id="`${cid}-style-shape-scale`"
             :hide-spin-buttons="true"
             type="number"
             v-model.number="selectedScale"
@@ -148,6 +152,7 @@
   import { toContext } from 'ol/render.js';
   import { Point } from 'ol/geom.js';
   import { getImageStyleFromOptions } from '@vcmap/core';
+  import { useComponentId } from '../composables.js';
   import { useProxiedComplexModel } from '../modelHelper.js';
   import VcsLabel from '../form-inputs-controls/VcsLabel.vue';
   import VcsTextField from '../form-inputs-controls/VcsTextField.vue';
@@ -907,6 +912,8 @@
         );
       });
 
+      const cid = useComponentId();
+
       return {
         ImageType,
         localValue,
@@ -919,6 +926,7 @@
         between,
         currentItems,
         selectedImageTypeTab,
+        cid,
       };
     },
   };

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

@@ -98,6 +98,7 @@ declare const _default: import("vue").DefineComponent<{
         idx: number;
     }[]>;
     selectedImageTypeTab: import("vue").Ref<number>;
+    cid: string;
 }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         type: ObjectConstructor;

package/src/components/style/VcsStrokeSelector.vue

@@ -3,13 +3,13 @@
     <v-container class="px-1 py-0">
       <v-row no-gutters>
         <v-col>
-          <VcsLabel html-for="draw-stroke-width">
+          <VcsLabel :html-for="`${cid}-draw-stroke-width`">
             {{ $t('components.style.lineWidth') }}
           </VcsLabel>
         </v-col>
         <v-col cols="3">
           <VcsTextField
-            id="draw-stroke-width"
+            :id="`${cid}-draw-stroke-width`"
             v-model.number="width"
             :hide-spin-buttons="true"
             type="number"
@@ -38,6 +38,7 @@
     VRow,
     VCol,
   } from 'vuetify/components';
+  import { useComponentId } from '../composables.js';
   import VcsLabel from '../form-inputs-controls/VcsLabel.vue';
   import VcsTextField from '../form-inputs-controls/VcsTextField.vue';
   import { useColorObject } from './composables.js';
@@ -66,6 +67,7 @@
     },
     setup(props, { emit }) {
       const localValue = useProxiedComplexModel(props, 'modelValue', emit);
+      const cid = useComponentId();
       return {
         rgbaObject: useColorObject(() => localValue.value?.color),
         width: computed({
@@ -81,6 +83,7 @@
         updateColor(rgba) {
           localValue.value.color = [rgba.r, rgba.g, rgba.b, rgba.a];
         },
+        cid,
       };
     },
   };

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

@@ -12,6 +12,7 @@ declare const _default: import("vue").DefineComponent<{
     }>;
     width: import("vue").WritableComputedRef<any>;
     updateColor(rgba: any): void;
+    cid: string;
 }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         type: ObjectConstructor;

package/src/components/style/VcsTextMenu.vue

@@ -1,12 +1,12 @@
 <template>
   <MenuWrapper
-    v-bind="{ ...$attrs, ...$props }"
     :value-fallback="fallbackStyle"
     name="components.style.text"
+    v-bind="{ ...$attrs, ...$props }"
   >
     <template #preview>
       <div v-if="modelValue" class="d-flex justify-center align-center">
-        <span id="text-preview">T</span>
+        <span class="vcs-text-menu-preview">T</span>
       </div>
     </template>
     <template #content>
@@ -68,7 +68,7 @@
 </script>
 
 <style>
-  #text-preview {
+  .vcs-text-menu-preview {
     font: v-bind(fontStyle) !important;
     font-size: 20px !important;
     -webkit-text-stroke-color: v-bind(strokeColor);

package/src/components/style/VcsVectorStyleComponent.vue

@@ -5,9 +5,9 @@
       :key="key"
       :is="componentMap[key]"
       :value-default="valueDefault[key]"
+      v-bind="specificProps[key]"
       v-model="localValue[key]"
       @update:model-value="(v) => $emit(`update:${key}`, v)"
-      v-bind="specificProps[key]"
     />
   </v-sheet>
 </template>

package/src/components/tables/VcsDataTable.vue

@@ -38,12 +38,8 @@
       v-model:items-per-page="itemsPerPageRef"
       @update:options="(o) => $emit('update:items', { ...o, search })"
     >
-      <template v-for="slot of Object.keys($slots)" #[slot]="scope">
-        <slot
-          v-if="!['prepend', 'default', 'append'].includes(slot)"
-          :name="slot"
-          v-bind="scope"
-        />
+      <template v-for="slot of forwardSlots" #[slot]="scope">
+        <slot :name="slot" v-bind="scope ?? {}" />
       </template>
       <template
         #header.data-table-select="{ allSelected, selectAll, someSelected }"
@@ -72,28 +68,30 @@
         <tfoot>
           <tr class="v-data-table__tr">
             <td colspan="100" class="text-center pa-1">
-              <v-menu dense>
-                <template #activator="{ props }">
-                  <VcsButton
-                    color="primary"
-                    v-bind="props"
-                    class="v-btn--variant-plain mx-2 d-flex flex-wrap"
-                  >
-                    {{ itemsPerPageRef }}
-                    <v-icon>mdi-chevron-down</v-icon>
-                  </VcsButton>
-                </template>
-                <v-list>
-                  <v-list-item
-                    v-for="(number, index) in itemsPerPageArray"
-                    :key="index"
-                    @click="updateItemsPerPage(number)"
-                    style="min-height: auto; height: 24px; text-align: right"
-                  >
-                    <v-list-item-title>{{ number }}</v-list-item-title>
-                  </v-list-item>
-                </v-list>
-              </v-menu>
+              <div class="d-inline-block">
+                <v-menu>
+                  <template #activator="{ props }">
+                    <VcsButton
+                      color="primary"
+                      v-bind="props"
+                      class="v-btn--variant-plain mx-2 d-flex flex-wrap"
+                    >
+                      {{ itemsPerPageRef }}
+                      <v-icon>mdi-chevron-down</v-icon>
+                    </VcsButton>
+                  </template>
+                  <v-list>
+                    <v-list-item
+                      v-for="(number, index) in itemsPerPageArray"
+                      :key="index"
+                      @click="updateItemsPerPage(number)"
+                      style="min-height: auto; height: 24px; text-align: right"
+                    >
+                      <v-list-item-title>{{ number }}</v-list-item-title>
+                    </v-list-item>
+                  </v-list>
+                </v-menu>
+              </div>
               <span class="mx-2">{{
                 $t('components.vcsDataTable.itemsPerPage')
               }}</span>
@@ -135,6 +133,7 @@
   import VcsTreeviewSearchbar from '../lists/VcsTreeviewSearchbar.vue';
   import VcsButton from '../buttons/VcsButton.vue';
   import VcsCheckbox from '../form-inputs-controls/VcsCheckbox.vue';
+  import { useForwardSlots } from '../composables.js';
 
   /**
    * @typedef {Object} UpdateItemsEvent
@@ -218,7 +217,7 @@
         default: 'isSelectable',
       },
     },
-    setup(props, { attrs, emit }) {
+    setup(props, { attrs, emit, slots }) {
       const vm = getCurrentInstance().proxy;
       const hovering = ref(null);
       /**
@@ -364,6 +363,12 @@
           props.serverItemsLength > itemsPerPageRef.value,
       );
 
+      const forwardSlots = useForwardSlots(slots, [
+        'prepend',
+        'default',
+        'append',
+      ]);
+
       return {
         hovering,
         search,
@@ -391,6 +396,7 @@
         handleSearch,
         translatedHeaders,
         showFooter,
+        forwardSlots,
       };
     },
   };
@@ -419,6 +425,9 @@
   }
 
   :deep(.vcs-table > .v-table__wrapper) {
+    overflow-x: hidden;
+    overflow-y: auto;
+
     table tbody tr {
       &:hover {
         background-color: transparent !important;
@@ -430,6 +439,7 @@
 
       td {
         padding: 0 8px;
+        border-bottom: transparent !important;
       }
     }
     table thead tr {
@@ -440,10 +450,10 @@
   }
 
   .v-table--density-compact {
-    --v-table-header-height: var(--v-vcs-item-height);
-    --v-table-row-height: var(--v-vcs-item-height);
+    --v-table-header-height: calc(var(--v-vcs-font-size) * 2 + 6px);
+    --v-table-row-height: calc(var(--v-vcs-font-size) * 2 + 6px);
     & :deep(.v-selection-control--density-default) {
-      --v-selection-control-size: var(--v-vcs-item-height);
+      --v-selection-control-size: calc(var(--v-vcs-font-size) * 2 + 6px);
     }
   }
 

package/src/components/tables/VcsDataTable.vue.d.ts

@@ -54,6 +54,7 @@ declare const _default: import("vue").DefineComponent<{
     handleSearch: () => void;
     translatedHeaders: ComputedRef<Object[]>;
     showFooter: import("vue").ComputedRef<boolean>;
+    forwardSlots: import("vue").ComputedRef<string[]>;
 }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     headers: {
         type: ArrayConstructor;