nathanreyes / v-calendar

An elegant calendar and datepicker plugin for Vue.
https://vcalendar.io
MIT License
4.41k stars 863 forks source link

error TS2322: Type '{ modelValue: string; class: string; modelConfig: { type: string; mask: string; }; "model-config": { type: string; mask: string; }; }' is not assignable to type 'IntrinsicAttributes & App<any>'. #1221

Open rushan21pink opened 1 year ago

rushan21pink commented 1 year ago

Hi, I use calendar in conjunction with vue 3 and TypeScript. everything works, but when I try to create a commit, the compiler swears, I've been looking for a solution for a long time, but I haven't found it

My component code


<template>
  <div class="flex relative">

//location of the error
    <DatePicker
      v-if="showDatePicker"
      v-model="date"
      v-on-click-outside="close"
      class="my-calendar !absolute z-10"
      :model-config="modelConfig"
    />
  </div>
</template>

<script setup lang="ts">
import { DatePicker } from 'v-calendar';
import { vOnClickOutside } from '@vueuse/components';

const props = defineProps({
  config: {
    type: String,
    default: 'DD.MM.YYYY',
  },
  modelValue: {
    type: String,
    default: '',
  },
});

const emit = defineEmits(['update:modelValue']);

const modelConfig = computed(() => {
  return {
    type: 'string',
    mask: props.config || 'DD.MM.YYYY',
  };
});

const date = ref<string>(props.modelValue || '');
const showDatePicker = ref(false);

const close = () => showDatePicker.value = false;

watchEffect(() => {
  emit('update:modelValue', date);
});
</script>

How do I use it

<RFDataPicker
        v-model="state.date"
        class="mb-8"
        config="DD.MM.YYYY"
      />

what I get at the output

src/components/atoms/base/RFDatePicker.vue(16,6): error TS2322: Type '{ modelValue: string; class: string; modelConfig: { type: string; mask: string; }; "model-config": { type: string; mask: string; }; }' is not assignable to type 'IntrinsicAttributes & App'. Type '{ modelValue: string; class: string; modelConfig: { type: string; mask: string; }; "model-config": { type: string; mask: string; }; }' is missing the following properties from type 'App': version, config, use, mixin, and 11 more.

UksusoFF commented 1 year ago

Same trouble with npm run type-check. But npm run build-only works.

biroplane commented 1 year ago

any solution yet?

hugopedro commented 1 year ago

@rushan21pink same problem here, It occurs only when i do npm run build.