Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug??] No intellisense for Vue FilePond component props in vscode #287

Open
2 tasks done
natac13 opened this issue Nov 21, 2023 · 0 comments
Open
2 tasks done

[Bug??] No intellisense for Vue FilePond component props in vscode #287

natac13 opened this issue Nov 21, 2023 · 0 comments
Labels
bug Something isn't working

Comments

@natac13
Copy link

natac13 commented Nov 21, 2023

Is there an existing issue for this?

  • I have searched the existing issues

Have you updated Vue FilePond, FilePond, and all plugins?

  • I have updated FilePond and its plugins

Describe the bug

I am coming from using the react-filepond version of this to a new project that is forcing me to use vue.

I am having trouble with getting prop intellisense to show the available props on the FilePond component.

Is this expected or am I doing something wrong?

I dont get any red lines on the props. But I also can pass props which I know for sure do not exist and there is still no red warning.

Is this a bug / something with the vue-filepond package that is expected. Or am I the dummy who does not know how to get vue intellisense working? I do have volar vs code extension installed and for locally authored SFCs I have intellisense.

Thanks you for the help. Have a great day!

Reproduction

<script setup lang="ts">
import FilePondPluginFileEncode from 'filepond-plugin-file-encode';
import FilePondPluginMaxFileSize from 'filepond-plugin-file-validate-size';
import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type';
import FilePondPluginImageEdit from 'filepond-plugin-image-edit';
import FilePondPluginImageExifOrientation from 'filepond-plugin-image-exif-orientation';
import FilePondPluginImagePreview from 'filepond-plugin-image-preview';
import FilePondPluginImageResize from 'filepond-plugin-image-resize';
import FilePondPluginImageTransform from 'filepond-plugin-image-transform';
import createFilePond from 'vue-filepond';

import 'filepond-plugin-image-edit/dist/filepond-plugin-image-edit.css';
import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css';
import 'filepond/dist/filepond.min.css';


import { ref } from 'vue';

const FilePond = createFilePond(
  FilePondPluginFileEncode,
  FilePondPluginMaxFileSize,
  FilePondPluginFileValidateType,
  FilePondPluginImageEdit,
  FilePondPluginImageExifOrientation,
  FilePondPluginImagePreview,
  FilePondPluginImageResize,
  FilePondPluginImageTransform,
);

const props = withDefaults(
  defineProps<{
    id: string;
    label: string;
    name: string;
    required?: boolean;
    maxFileSize?: number;
    maxFiles?: number;
    disabled?: boolean;
    allowMultiple?: boolean;
    error?: string;
    description?: string;
  }>(),
  {
    required: false,
    maxFileSize: 5,
    maxFiles: 1,
    disabled: false,
    allowMultiple: false,
  },
);

const pondRef = ref<typeof FilePond>();
const error = ref<string | undefined>(props.error);
const files = ref<File[]>([]);

const onUpdateFiles = (fileItems: File[]) => {
  console.log('onUpdate');
  console.log(fileItems);
  files.value = fileItems.map((fileItem) => fileItem);
};
</script>

<template>
  <div>
    <label :for="props.id">{{ props.label }}</label>
    <file-pond
      ref="pondRef"
      :id="props.id"
      :name="props.name"
      :allowMultiple="props.allowMultiple"
      :disabled="props.disabled"
      :required="props.required"
      :instantUpload="false"
      :files="files"
      @updatefiles="onUpdateFiles"
    />
    <div
      v-if="props.description && !error"
      class="mt-2"
    >
      {{ props.description }}
    </div>
    <div
      v-if="error"
      class="mt-2 text-danger"
    >
      {{ error }}
    </div>
  </div>
</template>



Environment

- Device: Mac
- OS: Sonoma 14.0
- Broser: Chrome
- Vue version: 3.x.x

Screenshot 2023-11-21 at 8 47 37 AM

@natac13 natac13 added the bug Something isn't working label Nov 21, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

1 participant