custom validation does not run inside shape

[davidbeijinho]

I was not able to make custom validation run inside of a shape validator, I have modified the example for vue2 slightly to create an example for this problem

import Vue from 'vue2'
import VueTypes from 'vue-types'
import { PropValidator } from 'vue2/types/options'

Vue.config.silent = false

interface ModelItem {
  id: string
  pet: 'dog' | 'cat'
  isNew: boolean
  modelname: any
  modelprop: any
}

function minLength(value: any) {
  return typeof value === 'string' && value.length >= 6
}

const Model = Vue.extend({
  template: '<li>{{ model.id }} {{ isNew }} (pet: {{ model.pet }})</li>',
  props: {
    model: VueTypes.shape<ModelItem>({
      id: VueTypes.string.isRequired,
      pet: VueTypes.oneOf(['dog', 'cat'] as const).isRequired,
      isNew: VueTypes.bool,
      modelname: VueTypes.custom(minLength).isRequired,
      modelprop: VueTypes.custom<string>(minLength).isRequired,
    }).isRequired as PropValidator<ModelItem>,
    username: VueTypes.custom(minLength).isRequired,
    theprop: VueTypes.custom<string>(minLength).isRequired,
  },
  computed: {
    isNew(): string {
      return this.model.isNew ? '- new' : ''
    },
  },
})

const App = Vue.extend({
  template: `
    <section>
      <h1>A list of models</h1>
      <button type="button" @click="addPet('parrot')">Add parrot (invalid, logs to console)</button>
      <button type="button" @click="addPet('dog')">Add dog</button>
      <ul><Model v-for="model in models" :model="model" :key="model.id" :username="'aaaaaaaa'" :theprop="'aaaaaaaa'" /></ul>
    </section>
  `,
  data: () => ({
    models: [] as ModelItem[],
  }),
  components: {
    Model,
  },
  methods: {
    addPet(pet: any) {
      const newId = 'model-' + this.models.length
      this.models.forEach((model) => {
        model.isNew = false
      })
      this.models.push({
        id: newId,
        pet,
        isNew: true,
        modelname: false,
        modelprop: {},
      })
    },
  },
})

new Vue({ render: (h) => h(App) }).$mount('#app')

[davidbeijinho]

the same result for the vue3

import { defineComponent, createApp, h, computed, ref } from 'vue3'
import VueTypes from '../../../src'

interface ModelItem {
  id: string
  pet: 'dog' | 'cat'
  isNew: boolean
  modelname: any
  modelprop: any
}

function minLength(value: any) {
  return typeof value === 'string' && value.length >= 6
}

const Model = defineComponent({
  template: '<li>{{ model.id }} {{ isNew }} (pet: {{ model.pet }})</li>',
  props: {
    model: VueTypes.shape<ModelItem>({
      id: VueTypes.string.isRequired,
      pet: VueTypes.oneOf(['dog', 'cat'] as const).isRequired,
      isNew: VueTypes.bool,
      modelname: VueTypes.custom(minLength).isRequired,
      modelprop: VueTypes.custom<string>(minLength).isRequired,
    }).isRequired,
    username: VueTypes.custom(minLength).isRequired,
    theprop: VueTypes.custom<string>(minLength).isRequired,
  },
  setup(props) {
    const isNew = computed(() => (props.model.isNew ? '- new' : ''))
    return { isNew }
  },
})

const App = defineComponent({
  template: `
    <section>
      <h1>A list of models</h1>
      <button type="button" @click="addPet('parrot')">Add parrot (invalid, logs to console)</button>
      <button type="button" @click="addPet('dog')">Add dog</button>
      <ul><Model v-for="model in models" :model="model" :key="model.id" :username="'aaaaaaaa'" :theprop="'aaaaaaaa'" /></ul>
    </section>
  `,
  setup() {
    const models = ref<ModelItem[]>([])

    function addPet(pet: ModelItem['pet']) {
      models.value.forEach((model) => {
        model.isNew = false
      })
      models.value.push({
        id: 'model-' + models.value.length,
        pet,
        isNew: true,
        modelname: false,
        modelprop: {},
      })
    }

    return { models, addPet }
  },
  components: {
    Model,
  },
})

createApp({ render: () => h(App) }).mount('#app')

[dwightjack]

@davidbeijinho I guess that's a bug. I will work on a fix in the next few days.

[dwightjack]

@davidbeijinho I've pushed a fix in #177 and published it as vue-types@4.1.1-rc.0.

Could you check if it fixed your issue?

[dwightjack]

@davidbeijinho sorry to ping you again. Can you confirm that the issue has been solved?

[dwightjack]

Released in the stable channel as v4.1.1.