Size prop documentation - [Vue warn]: Invalid prop: custom validator check failed for prop "size"

[avrtau]

Please check all that apply

• visual bug
• functional bug
• able to consistently reproduce

Expected Behavior

Component should set the flag size without showing Vue warnings

Current Behavior

[Vue warn]: Invalid prop: custom validator check failed for prop "size"

Possible Solution

The documentation shows "L', "M", "S" (all upper-case) as possible values for the size prop, however the validator checks for lower-case letters:

Flag.vue: line 32

28: size: {
29:   type: String,
30:   default: 'm',
31:   validator: value => (
32:     ['s', 'm', 'l'].indexOf(value) !== -1
33:   ),
34: }

There are two possible solutions:

1. Change the documentation to reflect the fact that only lower-case values are accepted
2. Change the validator to accept upper-case letters as well, either by adding the upper-case letters to the array: ['s', 'm', 'l', 'S', 'M', 'L'], or, by changing the input value to lower-case ['s', 'm', 'l'].indexOf(('' + value).toLowerCase())

Steps to Reproduce

1. Set the flag size value as a capital S: <v-flag code="US" size="S" />

Logs

vue.runtime.esm.js?2b0e:619 [Vue warn]: Invalid prop: custom validator check failed for prop "size".
found in
---> <Flag>
       <VForm>
         <VCard>
           <Pages/user/profile.vue> at pages/user/profile.vue
             <Nuxt>
               <VMain>
                 <VApp>
                   <Default> at layouts/default.vue
                     <Root>

Your Environment

• Version used: 1.0.1
• Browser Name and version: Chrome Version 91.0.4472.114 (Official Build) (x86_64)
• Operating System and version (desktop or mobile): MacOS desktop

[daoneandonly]

Thanks for your thoughts on vue-flagpack! I've added these changes in #51 and will be part of the next release. I've also made a note to change the values for size variables to lowercase in the docs. Expect to see these changes happening in the near feature.

[dudintv]

I've just encountered this issue and spent some time finding the solution...
Maybe you can just change the documentation from 'S', 'M', 'L' to 's', 'm', 'l'?

[nazar1ua]

Maybe the best solution is to:

28: size: {
29:   type: String,
30:   default: 'm',
31:   validator: value => (
32:     ['s', 'm', 'l'].indexOf(value.toLowerCase()) !== -1
33:   ),
34: }

[nazar1ua]

I will add it to pr #63