@vcmap/ui 5.3.2 → 6.0.0-rc.1

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,5 +1,5 @@
 <template>
-  <v-list v-if="actions.length > 0">
+  <v-list v-if="actions.length > 0" rounded>
     <VcsTooltip
       v-for="(action, index) in actions"
       :key="`${action.name}-${index}`"
@@ -7,43 +7,33 @@
       :tooltip-position="tooltipPosition"
       v-bind="{ ...tooltipProps }"
     >
-      <template #activator="{ on, attrs }">
+      <template #activator="{ props }">
         <v-list-item
-          :class="action.active ? 'primary--text' : ''"
+          :class="action.active ? 'text-primary' : ''"
           :disabled="action.disabled || disabled"
           @click="action.callback($event)"
-          v-bind="{ ...$attrs, ...attrs }"
-          v-on="{ ...$listeners, ...on }"
+          v-bind="{ ...$attrs, ...props }"
         >
-          <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>
+          <template #prepend v-if="showIcon && action.icon">
+            <v-icon>{{ action.icon }}</v-icon>
+          </template>
+          <v-list-item-title>{{ $st(action.name) }}</v-list-item-title>
         </v-list-item>
       </template>
     </VcsTooltip>
   </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-title:hover) {
+    color: rgb(var(--v-theme-primary));
+  }
+  :deep(.v-list-item .v-list-item__prepend .v-list-item__spacer) {
+    width: 8px;
   }
 </style>
 <script>
   import { is } from '@vcsuite/check';
-  import {
-    VIcon,
-    VList,
-    VListItem,
-    VListItemContent,
-    VListItemIcon,
-    VListItemTitle,
-  } from 'vuetify/lib';
+  import { VIcon, VList, VListItem, VListItemTitle } from 'vuetify/components';
   import VcsTooltip from '../notification/VcsTooltip.vue';
 
   /**
@@ -93,10 +83,8 @@
       VcsTooltip,
       VList,
       VListItem,
-      VListItemIcon,
       VIcon,
       VListItemTitle,
-      VListItemContent,
     },
     props: {
       actions: {

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

@@ -35,7 +35,7 @@ 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<{
+}, any, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     actions: {
         type: ArrayConstructor;
         required: true;
@@ -58,9 +58,9 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
 }>>, {
-    tooltipPosition: string;
     disabled: boolean;
+    tooltipPosition: string;
     tooltipProps: Record<string, any>;
     showIcon: boolean;
-}>;
+}, {}>;
 export default _default;