fix: warning is not a valid value for v-model in JetBrains IDE

[anyesu]

这个 PR 做了什么? (简要描述所做更改)

相关问题

• https://youtrack.jetbrains.com/issue/WEB-52219

适用范围

intellij-community 2021 年起的所有版本。

Version 2.0 of the format

Starting with version 2021.3.1 of WebStorm (and other JetBrains IDEs), a full support for the new Web-Types format is supported (the new format has been partially supported since 2021.2).

我本地只验证了版本（ IntelliJ IDEA 2021.2.3 到 IntelliJ IDEA 2023.3.2 ）修复有效。

更早之前的版本有这个问题的话应该也适用。

修复说明

按照 WebStorm 相关代码的维护者所说，在 web-types.json 中应该使用属性名 modelValue 而非 v-model ，这样做只能去掉警告但是会丢失代码提示（属性描述）。

我结合了两种方式去修复，不需要等 IDE 修复：

• 在 web-types.json 中将 v-model 的定义拷贝一份为 modelValue

  同时兼容 v-model="value" 和 :model-value="value" 两种用法。

  另外增加了 update:modelValue 事件（ 支持被 .md 文件中定义的内容覆盖 ）。

• 将 "type": "boolean" 改为 "type": "boolean "

  加空格 的目的是为了使 type 被识别为 COMPLEX 类型而非 BOOLEAN 类型 。这个写法看着是奇怪一点，但确实有效，比起 修改大小写 的方式（ 比如修改为 Boolean ）可以兼容旧的 IDE 。

  另外，目前 WebStorm 不支持 v-model 和 modelValue 的类型校验，type 定义为任意复杂表达式都是一样的。

具体分析见 JetBrains/web-types#79

测试步骤

1. 新建项目安装依赖：

   npm i vue @nutui/nutui

2. 创建一个 Vue 文件：

   <template>
     <div>
       <nut-checkbox v-model="value" />
       <nut-infinite-loading v-model="value" />
       <nut-pull-refresh v-model="value" />
       <nut-tour v-model="value" :steps="steps" />
   
       <nut-checkbox :model-value="value" @update:model-value="value = $event" />
       <nut-infinite-loading :model-value="value" @update:model-value="value = $event" />
       <nut-pull-refresh :model-value="value" @update:model-value="value = $event" />
       <nut-tour :steps="steps" :modelValue="value" @update:modelValue="value = $event" />
     </div>
   </template>
   
   <script setup lang="ts">
   import { ref } from "vue";
   
   const value = ref(false);
   
   const steps = ref([
     {
       content: "京东风格的轻量级移动端组件库",
       target: "tour1",
     },
   ]);
   </script>

3. 同时使用 "name": "v-model" 和 "type": "boolean" 定义的组件会出现警告：

   value is not a valid value for v-model
   

   相关组件：

   • nut-checkbox
   • nut-infinite-loading
   • nut-pull-refresh
   • nut-tour

修复之前：

修复之后：

这个 PR 是什么类型? (至少选择一个)

• feat: 新特性提交
• fix: bug 修复
• docs: 文档改进
• style: 组件样式/交互改进
• type: 类型定义更新
• perf: 性能、包体积优化
• refactor: 代码重构、代码风格优化
• test: 测试用例
• chore(deps): 依赖升级
• chore(demo): 演示代码改进
• chore(locale): 国际化改进
• chore: 其他改动（是关于什么的改动？）

这个 PR 涉及以下平台:

• NutUI H5 @nutui/nutui
• NutUI Taro @nutui/nutui-taro

这个 PR 是否已自测:

• 自测 Vite 脚手架使用 测试仓库
• 自测 Taro 脚手架使用小程序 & Taro-H5 测试仓库

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 84.01%. Comparing base (f83471e) to head (8af6e23).
Report is 1 commits behind head on v4.

Additional details and impacted files

@@           Coverage Diff           @@
##               v4    #3029   +/-   ##
=======================================
  Coverage   84.00%   84.01%           
=======================================
  Files         218      218           
  Lines       23308    23308           
  Branches     2517     2518    +1     
=======================================
+ Hits        19581    19582    +1     
+ Misses       3709     3708    -1     
  Partials       18       18           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.