@vcmap/ui 5.3.3 → 6.0.0-rc.2

package/src/components/icons/UserProfileIcon.vue

@@ -1,14 +1,8 @@
 <!-- eslint-disable max-len -->
 
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="16"
-    height="16"
-    viewBox="0 0 16 16"
-  >
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
     <path
-      id="Vereinigungsmenge_60"
       d="M10931.333,16339.334a.333.333,0,0,1-.332-.332v-1.259a2.342,2.342,0,0,1,1.546-2.2l3.12-1.111v-1.472a4.628,4.628,0,0,1-1.648-4.048,3.038,3.038,0,0,0,1.566.418,3.663,3.663,0,0,0,2.489-1.033,2.285,2.285,0,0,0,1.952,1.091,4.388,4.388,0,0,0,1.3-.229,4.637,4.637,0,0,1-1.661,3.8v1.472l3.121,1.111a2.337,2.337,0,0,1,1.546,2.2V16339a.334.334,0,0,1-.332.332Zm7.049-11.785a.315.315,0,0,0-.3-.168.323.323,0,0,0-.286.18,2.756,2.756,0,0,1-2.215,1.107,2.6,2.6,0,0,1-1.456-.455,3.839,3.839,0,0,1,3.539-3.215,3.9,3.9,0,0,1,3.6,3.489c-.382.095-.722.181-.742.185a2.582,2.582,0,0,1-.492.052C10939.337,16328.724,10938.849,16328.364,10938.382,16327.549Z"
       transform="translate(-10929.668 -16324)"
       fill="currentColor"

package/src/components/icons/UserProfileIcon.vue.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 export default _default;

package/src/components/icons/UserShareIcon.vue

@@ -1,12 +1,7 @@
 <!-- eslint-disable max-len -->
 
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="16"
-    height="16.007"
-    viewBox="0 0 16 16.007"
-  >
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16.007">
     <path
       id="Pfad_81"
       d="M9.167,9.333A2.761,2.761,0,0,1,10,9.463a.167.167,0,0,0,.133-.017l.709-.425a.167.167,0,0,0,.067-.206c-.025-.061-.051-.12-.08-.179-.359-.717-1.538-1.15-3.169-1.751l-.419-.153a.4.4,0,0,1-.092-.207,1.721,1.721,0,0,1,.039-.867,3.744,3.744,0,0,0,.977-2.876A2.559,2.559,0,0,0,5.667,0a2.567,2.567,0,0,0-2.5,2.783,3.737,3.737,0,0,0,.971,2.865,1.636,1.636,0,0,1,.049.877.405.405,0,0,1-.09.206l-.421.155C2.04,7.485.861,7.919.5,8.636A6.125,6.125,0,0,0,0,11a.333.333,0,0,0,.333.333H6.353a.168.168,0,0,0,.157-.111A2.825,2.825,0,0,1,9.167,9.333ZM16,14.167a1.827,1.827,0,0,0-3.091-1.326.168.168,0,0,1-.177.034l-1.63-.652a.167.167,0,0,1-.1-.145.931.931,0,0,0-.011-.108.164.164,0,0,1,.079-.165l1.893-1.139a.166.166,0,0,1,.18.006A1.813,1.813,0,0,0,14.167,11a1.833,1.833,0,1,0-1.833-1.833h0a1.616,1.616,0,0,0,.014.2.164.164,0,0,1-.079.165l-1.893,1.141a.166.166,0,0,1-.18-.006,1.809,1.809,0,0,0-1.029-.327,1.833,1.833,0,1,0,1.258,3.159.168.168,0,0,1,.177-.034l1.63.652a.167.167,0,0,1,.1.149A1.833,1.833,0,0,0,16,14.167Z"

package/src/components/icons/UserShareIcon.vue.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 export default _default;

package/src/components/icons/VideoRecorderIcon.vue

@@ -1,12 +1,7 @@
 <!-- eslint-disable max-len -->
 
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="22"
-    height="22"
-    viewBox="0 0 22 22"
-  >
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22">
     <g id="Gruppe_2012" transform="translate(-1592 -578)">
       <path
         id="Pfad_791"

package/src/components/icons/VideoRecorderIcon.vue.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 export default _default;

package/src/components/icons/ViewpointFlightIcon.vue

@@ -1,12 +1,7 @@
 <!-- eslint-disable max-len -->
 
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-  >
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
     <g id="Gruppe_2014" transform="translate(-698 -606)">
       <path
         id="Pfad_802"

package/src/components/icons/ViewpointFlightIcon.vue.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 export default _default;

package/src/components/icons/ViewpointIcon.vue

@@ -1,12 +1,7 @@
 <!-- eslint-disable max-len -->
 
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-  >
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
     <g id="Gruppe_2013" transform="translate(-664 -604.83)">
       <path
         id="Pfad_798"

package/src/components/icons/ViewpointIcon.vue.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 export default _default;

package/src/components/icons/Viewshed360Icon.vue

@@ -1,14 +1,8 @@
 <!-- eslint-disable max-len -->
 
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-  >
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
     <path
-      id="Vereinigungsmenge_64"
       d="M11218.5,13309.529c0-.3.01-.878,3-.981,0-.007,0-.014,0-.021v-6a1,1,0,0,1,2,0v6c0,.007,0,.014,0,.021,2.992.1,3,.685,3,.981,0,.324,0,1-4,1S11218.5,13309.854,11218.5,13309.529Zm-2.89-12.895a.733.733,0,0,1,0-.781,8.084,8.084,0,0,1,13.776,0,.738.738,0,0,1,0,.784,8.084,8.084,0,0,1-13.776,0Zm2.735-1.6a8.278,8.278,0,0,0-1.188,1.212,8.185,8.185,0,0,0,1.188,1.21,7.3,7.3,0,0,0,1.3.854,3.508,3.508,0,0,1,0-4.129A7.288,7.288,0,0,0,11218.348,13295.032Zm7.677,1.212a3.5,3.5,0,0,1-.668,2.062,7.226,7.226,0,0,0,1.289-.852,8.051,8.051,0,0,0,1.192-1.21,7.821,7.821,0,0,0-1.192-1.209,7.359,7.359,0,0,0-1.289-.855A3.5,3.5,0,0,1,11226.024,13296.244Zm-5.562,0a2.039,2.039,0,1,0,2.037-2.041A2.039,2.039,0,0,0,11220.463,13296.244Zm.929,0a1.12,1.12,0,0,1,1.349-1.085.6.6,0,0,0-.083.3.6.6,0,0,0,.922.518,1.115,1.115,0,0,1-1.079,1.373A1.108,1.108,0,0,1,11221.392,13296.244Z"
       transform="translate(-11210.5 -13288.027)"
       fill="currentColor"

package/src/components/icons/Viewshed360Icon.vue.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 export default _default;

package/src/components/icons/ViewshedConeIcon.vue

@@ -1,14 +1,8 @@
 <!-- eslint-disable max-len -->
 
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-  >
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
     <path
-      id="Pfad_797"
       d="M1099,464v-1a1,1,0,0,1,2,0v1a1,1,0,0,1-2,0Zm5.95,3.05a.993.993,0,0,0,.707-.293l.707-.707a1,1,0,1,0-1.414-1.414l-.707.707a1,1,0,0,0,.707,1.707Zm-9.193,8.193a1,1,0,0,0-1.414,0l-.707.707a1,1,0,1,0,1.414,1.414l.707-.707A1,1,0,0,0,1095.757,475.243ZM1108,470h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-14,1a1,1,0,0,0-1-1h-1a1,1,0,0,0,0,2h1A1,1,0,0,0,1094,471Zm11.657,4.243a1,1,0,0,0-1.414,1.414l.707.707a1,1,0,1,0,1.414-1.414Zm-11.314-8.486a1,1,0,1,0,1.414-1.414l-.707-.707a1,1,0,1,0-1.414,1.414ZM1096,471a4,4,0,1,1,4,4A4,4,0,0,1,1096,471Zm2,0a2,2,0,1,0,2-2A2,2,0,0,0,1098,471Zm3,10.018c0-.006,0-.012,0-.018v-4a1,1,0,0,0-2,0v4c0,.006,0,.012,0,.018-2.993.1-3,.687-3,.982,0,.325,0,1,4,1s4-.675,4-1C1104,481.7,1103.989,481.123,1101,481.018Zm8,1.982,1.732-3h-3.464Zm0-7-1.732,3h3.464Z"
       transform="translate(-1088 -460)"
       fill="currentColor"

package/src/components/icons/ViewshedConeIcon.vue.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 export default _default;

package/src/components/icons/ViewshedIcon.vue

@@ -1,14 +1,8 @@
 <!-- eslint-disable max-len -->
 
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-  >
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
     <path
-      id="Vereinigungsmenge_63"
       d="M11153,13347a1,1,0,0,1-1-1v-5a1,1,0,0,1,1-1h3a1,1,0,0,1,1,1v5a1,1,0,0,1-1,1Zm1-2h1v-3h-1Zm-4.225-.145-7.018-4.244c-.1.135-.19.282-.3.409a6.143,6.143,0,0,1-1.179,1.008.513.513,0,0,1-.274.081.5.5,0,0,1-.419-.229.5.5,0,0,1,.147-.689,5.168,5.168,0,0,0,.981-.841c.073-.08.124-.174.19-.258l-1.42-.857a1,1,0,0,1-.482-.857v-2.82a1,1,0,0,1,.526-.878l1.4-.757a4.936,4.936,0,0,0-1.049-1.012.5.5,0,0,1,.576-.817,6.029,6.029,0,0,1,1.363,1.347l11.7-6.321a1,1,0,0,1,1.477.881v10a1,1,0,0,1-1,1h-3.705v5a1,1,0,0,1-1,1A1.022,1.022,0,0,1,11149.776,13344.856Zm-6.056-9.63a5.706,5.706,0,0,1-.03,3.611l5.6,3.39V13338a1,1,0,0,1,1-1H11154v-7.322Zm-1.722.932v1.657l.807.489a4.659,4.659,0,0,0,.021-2.593Zm-6,.84,2.636-1.43a3,3,0,0,1,.091,2.687Z"
       transform="translate(-11134 -13325)"
       fill="currentColor"

package/src/components/icons/ViewshedIcon.vue.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 export default _default;

package/src/components/icons/WalkingIcon.vue

@@ -1,12 +1,7 @@
 <!-- eslint-disable max-len -->
 
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="10.666"
-    height="15.999"
-    viewBox="0 0 10.666 15.999"
-  >
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10.666 15.999">
     <path
       id="Path_7"
       d="M9.731.784A1.828,1.828,0,0,1,11.6,2.567a1.872,1.872,0,0,1-3.74,0A1.828,1.828,0,0,1,9.731.784ZM11.37,8.2a6.486,6.486,0,0,0,1.809.9l.88.28a1.176,1.176,0,0,0,.355.055,1.066,1.066,0,0,0,.3-2.1l-.827-.262a4.2,4.2,0,0,1-1.17-.585l-.76-.543A4.438,4.438,0,0,0,7.5,5.558,4.494,4.494,0,0,0,4.869,9.531,1.088,1.088,0,0,0,5.9,10.679c.029,0,.058,0,.088,0A1.1,1.1,0,0,0,7.113,9.665a2.409,2.409,0,0,1,1.213-2.1.193.193,0,0,1,.257.06.164.164,0,0,1,.027.093v.968a13.235,13.235,0,0,1-.346,3.008,8.9,8.9,0,0,1-1.655,3.352,1.037,1.037,0,0,0,.176,1.5,1.16,1.16,0,0,0,1.578-.168,12.131,12.131,0,0,0,1.915-3.786.192.192,0,0,1,.324-.058,11.634,11.634,0,0,1,1.807,3.514,1.118,1.118,0,0,0,1.065.732,1.15,1.15,0,0,0,.355-.056,1.06,1.06,0,0,0,.711-1.353v0a12.176,12.176,0,0,0-3.417-5.362.7.7,0,0,1-.266-.538V8.186a.183.183,0,0,1,.187-.178.2.2,0,0,1,.112.036Z"

package/src/components/icons/WalkingIcon.vue.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 export default _default;

package/src/components/icons/WallIcon.vue

@@ -1,11 +1,6 @@
 <!-- eslint-disable max-len -->
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-  >
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
     <g id="Gruppe_1440" transform="translate(3 1)">
       <path
         id="Pfad_530"

package/src/components/icons/WallIcon.vue.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 export default _default;

package/src/components/icons/WandIcon.vue

@@ -1,12 +1,7 @@
 <!-- eslint-disable max-len -->
 
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="16"
-    height="16"
-    viewBox="0 0 16 16"
-  >
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
     <g id="wand" transform="translate(1.706 1.705)">
       <g id="Gruppe_1465" transform="translate(0 10.491)">
         <g id="Gruppe_1464">

package/src/components/icons/WandIcon.vue.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 export default _default;

package/src/components/import/{FileDrop.vue → VcsFileDrop.vue}

@@ -10,23 +10,29 @@
     v-bind="$attrs"
   >
     <slot>
-      <v-card-title>{{ $t(title) }}</v-card-title>
+      <v-card-title class="d-flex align-center">{{ $st(title) }}</v-card-title>
     </slot>
   </v-card>
 </template>
 
 <script>
-  import { VCard, VCardTitle } from 'vuetify/lib';
+  import { VCard, VCardTitle } from 'vuetify/components';
   import { ref } from 'vue';
 
+  /**
+   * A component providing a file drop area based on  {@link https://vuetifyjs.com/en/api/v-card/|vuetify v-card}
+   * @vue-props {Array<File>} [modelValue=[]] - The model containing dropped files
+   * @vue-props {string} [title] - Option to override the drop areas default title
+   * @vue-prop {boolean} [multiple=true] - allows or disallows importing multiple files at once
+   */
   export default {
-    name: 'FileDrop',
+    name: 'VcsFileDrop',
     components: {
       VCard,
       VCardTitle,
     },
     props: {
-      value: {
+      modelValue: {
         type: Array,
         default: () => [],
       },
@@ -34,8 +40,13 @@
         type: String,
         default: 'components.import.fileDrop',
       },
+      multiple: {
+        type: Boolean,
+        default: true,
+      },
     },
-    setup(_p, { emit }) {
+    emits: ['update:modelValue'],
+    setup(props, { emit }) {
       const isDragging = ref(false);
 
       return {
@@ -47,7 +58,7 @@
             for (let i = 0; i < event.dataTransfer.files.length; i++) {
               files.push(event.dataTransfer.files[i]);
             }
-            emit('input', files);
+            emit('update:modelValue', props.multiple ? files : files[0]);
           }
         },
       };
@@ -57,13 +68,13 @@
 
 <style scoped lang="scss">
   .drop-field {
-    outline: 4px dashed var(--v-base-base);
+    outline: 4px dashed rgb(var(--v-theme-base));
     outline-offset: -8px;
-    background-color: var(--v-base-lighten4);
+    background-color: rgb(var(--v-theme-base-lighten-4));
   }
 
   .dragging {
-    outline-color: var(--v-primary-base);
-    background-color: var(--v-base-lighten1);
+    outline-color: rgb(var(--v-theme-primary));
+    background-color: rgb(var(--v-theme-base-lighten-1));
   }
 </style>

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

@@ -0,0 +1,37 @@
+declare const _default: import("vue").DefineComponent<{
+    modelValue: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+    title: {
+        type: StringConstructor;
+        default: string;
+    };
+    multiple: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {
+    isDragging: import("vue").Ref<boolean>;
+    dropped(event: any): void;
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+    title: {
+        type: StringConstructor;
+        default: string;
+    };
+    multiple: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
+    title: string;
+    modelValue: unknown[];
+    multiple: boolean;
+}, {}>;
+export default _default;

package/src/components/import/{ImportComponent.vue → VcsImportComponent.vue}

@@ -1,14 +1,19 @@
 <template>
   <v-card flat class="pa-2">
-    <file-drop elevation="4" height="60px" v-model="files" />
-    <vcs-text-field
-      type="file"
+    <vcs-file-drop
+      elevation="4"
+      :height="2 * useItemHeight().value"
+      :multiple="multiple"
       v-model="files"
+    />
+    <vcs-file-input
       :loading="loading"
       :multiple="multiple"
       :accept="fileTypes.join(',')"
+      v-bind="noListenerAttrs"
+      v-model="files"
     />
-    <div class="d-flex justify-end gap-1 mx-3 pt-2 pb-1">
+    <div class="d-flex justify-end gc-1 mx-3 pt-2 pb-1">
       <vcs-form-button @click="$emit('close')">
         {{ $t('components.cancel') }}
       </vcs-form-button>
@@ -23,21 +28,24 @@
 </template>
 
 <script>
-  import { VCard } from 'vuetify/lib';
+  import { VCard } from 'vuetify/components';
   import { computed, inject, ref } from 'vue';
-  import FileDrop from './FileDrop.vue';
+  import { removeListenersFromAttrs } from '../attrsHelpers.js';
+  import { useItemHeight } from '../../vuePlugins/vuetify.js';
+  import VcsFileDrop from './VcsFileDrop.vue';
   import VcsFormButton from '../buttons/VcsFormButton.vue';
-  import VcsTextField from '../form-inputs-controls/VcsTextField.vue';
+  import VcsFileInput from '../form-inputs-controls/VcsFileInput.vue';
   import { NotificationType } from '../../notifier/notifier.js';
 
   /**
+   * A component providing an import functionality for files
    * @vue-prop {function(Array<File>):boolean} importFiles - the callback to
-   * @vue-prop {string[]} [fileTypes=[]]
-   * @vue-prop {boolean} [multiple=false]
+   * @vue-prop {string[]} [fileTypes=[]] - accepted file types, see https://html.spec.whatwg.org/multipage/input.html#attr-input-accept
+   * @vue-prop {boolean} [multiple=true] - allows or disallows importing multiple files at once
    */
   export default {
-    name: 'ImportComponent',
-    components: { VcsFormButton, VcsTextField, VCard, FileDrop },
+    name: 'VcsImportComponent',
+    components: { VcsFormButton, VcsFileInput, VCard, VcsFileDrop },
     props: {
       importFiles: {
         type: Function,
@@ -52,7 +60,7 @@
         default: true,
       },
     },
-    setup(props, { emit }) {
+    setup(props, { attrs, emit }) {
       const app = inject('vcsApp');
       const localFiles = ref([]);
       const loading = ref(false);
@@ -68,9 +76,13 @@
         },
       });
 
+      const noListenerAttrs = computed(() => removeListenersFromAttrs(attrs));
+
       return {
         files,
         loading,
+        noListenerAttrs,
+        useItemHeight,
         async doImport() {
           loading.value = true;
           try {

package/src/components/import/{ImportComponent.vue.d.ts → VcsImportComponent.vue.d.ts}

@@ -14,8 +14,10 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     files: WritableComputedRef<File[]>;
     loading: import("vue").Ref<boolean>;
+    noListenerAttrs: import("vue").ComputedRef<Record<string, unknown>>;
+    useItemHeight: typeof useItemHeight;
     doImport(): 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<{
     importFiles: {
         type: FunctionConstructor;
         required: true;
@@ -29,7 +31,8 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
 }>>, {
-    fileTypes: unknown[];
     multiple: boolean;
-}>;
+    fileTypes: unknown[];
+}, {}>;
 export default _default;
+import { useItemHeight } from '../../vuePlugins/vuetify.js';

package/src/components/lists/VcsActionList.vue

@@ -1,50 +1,48 @@
 <template>
-  <v-list v-if="actions.length > 0">
-    <VcsTooltip
+  <v-list v-if="actions.length > 0" rounded class="vcs-action-list">
+    <v-list-item
       v-for="(action, index) in actions"
       :key="`${action.name}-${index}`"
-      :tooltip="action.title"
-      :tooltip-position="tooltipPosition"
-      v-bind="{ ...tooltipProps }"
+      :class="action.active ? 'text-primary' : ''"
+      :disabled="action.disabled || disabled"
+      @click="action.callback($event)"
+      v-bind="{ ...$attrs }"
     >
-      <template #activator="{ on, attrs }">
-        <v-list-item
-          :class="action.active ? 'primary--text' : ''"
-          :disabled="action.disabled || disabled"
-          @click="action.callback($event)"
-          v-bind="{ ...$attrs, ...attrs }"
-          v-on="{ ...$listeners, ...on }"
-        >
-          <v-list-item-icon v-if="showIcon && action.icon">
-            <v-icon small>{{ action.icon }}</v-icon>
-          </v-list-item-icon>
-          <v-list-item-content class="vcs-action-list">
-            <v-list-item-title>{{ $t(action.name) }}</v-list-item-title>
-          </v-list-item-content>
-        </v-list-item>
+      <template #prepend v-if="showIcon && action.icon">
+        <v-icon :size="iconSize">{{ action.icon }}</v-icon>
       </template>
-    </VcsTooltip>
+      <v-list-item-title>{{ $st(action.name) }}</v-list-item-title>
+      <v-tooltip
+        v-if="action.title"
+        activator="parent"
+        :text="$st(action.title)"
+        :location="tooltipPosition"
+        v-bind="{ ...tooltipProps }"
+      />
+    </v-list-item>
   </v-list>
 </template>
-<style lang="scss">
-  .vcs-action-list {
-    width: 100%;
-    &:hover {
-      color: var(--v-primary-base);
+<style lang="scss" scoped>
+  :deep(.v-list-item:hover) {
+    .v-list-item-title {
+      color: rgb(var(--v-theme-primary));
     }
   }
+  :deep(.v-list-item .v-list-item__prepend .v-list-item__spacer) {
+    width: 8px;
+  }
 </style>
 <script>
+  import { computed } from 'vue';
   import { is } from '@vcsuite/check';
   import {
     VIcon,
     VList,
     VListItem,
-    VListItemContent,
-    VListItemIcon,
     VListItemTitle,
-  } from 'vuetify/lib';
-  import VcsTooltip from '../notification/VcsTooltip.vue';
+    VTooltip,
+  } from 'vuetify/components';
+  import { useFontSize } from '../../vuePlugins/vuetify.js';
 
   /**
    * pattern to check actions
@@ -79,24 +77,21 @@
 
   /**
    * @description
-   * A component rendering a list of actions with overflow mechanic using
-   * {@link https://vuetifyjs.com/en/api/v-list-item-group/|vuetify v-list-item-group} and {@link VcsTooltip}.
+   * A component rendering a list of actions
    * @vue-prop {Array<VcsAction>} actions - Array of actions
-   * @vue-prop {('bottom' | 'left' | 'top' | 'right')}  tooltipPosition - Position of the tooltip.
-   * @vue-prop {Object<string, any>}                    tooltipProps - Properties to be passed to VcsTooltip {@link https://vuetifyjs.com/en/api/v-tooltip/#props|vuetify v-tooltip}
+   * @vue-prop {('bottom' | 'left' | 'top' | 'right')}  tooltipPosition - Position of the tooltip. (action.title will be rendered as a tooltip)
+   * @vue-prop {Object<string, any>}                    tooltipProps - Properties to be passed to v-tooltip
    * @vue-prop {boolean}                                [showIcon=false] - Whether list item icons should be displayed.
    * @vue-prop {boolean}                                [disabled=false] - disable all actions
    */
   export default {
     name: 'VcsActionList',
     components: {
-      VcsTooltip,
       VList,
       VListItem,
-      VListItemIcon,
       VIcon,
       VListItemTitle,
-      VListItemContent,
+      VTooltip,
     },
     props: {
       actions: {
@@ -121,5 +116,14 @@
         default: false,
       },
     },
+    setup() {
+      const fontSize = useFontSize();
+      const iconSize = computed(() => {
+        return fontSize.value * (1.2 + 0.1 / 3);
+      });
+      return {
+        iconSize,
+      };
+    },
   };
 </script>

package/src/components/lists/VcsActionList.vue.d.ts

@@ -35,7 +35,9 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-}, {}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+}, {
+    iconSize: import("vue").ComputedRef<number>;
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     actions: {
         type: ArrayConstructor;
         required: true;
@@ -58,9 +60,9 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
 }>>, {
-    tooltipPosition: string;
     disabled: boolean;
+    tooltipPosition: string;
     tooltipProps: Record<string, any>;
     showIcon: boolean;
-}>;
+}, {}>;
 export default _default;