Modal.vue component missing screen-md class on prop validator

[JoeSixGo]

• Laravel Version: 9.30
• Nova Version: 4.14.3
• PHP Version: 8.1.9
• Database Driver & Version:
• Operating System and Version: #.#
• Browser type and version: #.#
• Reproduction Repository: https://github.com/###/###

Description:

Vue is throwing a warning when opening a custom modal having size="screen-md". It seems to me that the validator function of size prop is missing 'screen-md' value from the array. It is actually included in sizeClasses method.

Actual Modal.vue component props: `props: { show: { type: Boolean, default: false, },

size: {
  type: String,
  default: 'xl',
  validator: v => ['sm', 'md', 'lg', 'xl', '2xl'].includes(v),
},

modalStyle: {
  type: String,
  default: 'window',
},

role: {
  type: String,
  default: 'dialog',
},

},`

sizeClasses() method: sizeClasses() { return { sm: 'max-w-sm', md: 'max-w-md', lg: 'max-w-lg', xl: 'max-w-xl', '2xl': 'max-w-2xl', 'screen-md': 'max-w-screen-md', } }

Detailed steps to reproduce the issue on a fresh Nova installation:

[kusab85]

Please enlarge size option list by adding more max-w-... options. #4809, #3950

[davidhemphill]

The 'screen-md' was leftover from the previous modal size implementation and wasn't intended to be left in or used (it wasn't even used previously).

I've added more modal sizes, up to '7xl'. Past that, you should probably just set the modal to fullscreen instead. The new sizes will come in the next release.

[github-actions[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.