naive-ui/vue3.md

Migrate from V1

General Breaking Changes

• css
  • css index naive-ui/lib|es/styles/index.css has been removed, do not import it any more!
• fonts
  • naive-ui/lib|es/styles/fonts/* has been removed, use vfonts
• icons
  • naive-ui/lib|es/icons/* is deprecated, use vicons instead.
• n-nimbus-form-card is removed
• n-nimbus-icon is removed

Components

• form

  • form-item
    • new
      • show-feedback prop

• affix

  • deprecate
    • target => listen-to

• alert

• anchor

  • deprecate
    • target => listen-to

• auto-complete

  • break
    • v-model => v-model:value
  • deprecate
    • on-input => on-update:value
  • new
    • on-blur
    • on-focus

• avatar

• back-top

  • new
    • show controlled show
    • on-update:show
    • to teleport target
  • deprecate
    • on-show => on-update:show
    • on-hide => on-update:show
    • target => listen-to

• badge

• breadcrumb

• button

• button-group

• card

• cascader

  • break
    • v-model => v-model:value
    • on-load has different usage
    • leaf-only has different meaning
  • new
    • cascade prop
    • show-path prop
    • default-value prop
  • deprecated
    • on-change => on-update:value

• checkbox

  • checkbox
    • break
      • value only supports string
    • deprecate
      • on-change => on-update:checked
    • new
      • default-checked prop
  • checkbox-group
    • break
      • value only supports string or null
    • deprecate
      • on-change => on-update:value

• code

• collapse

  • deprecate
    • on-expanded-names-change => on-update:expanded-names
  • removed
    • v-model => v-model:expanded-names

• config-consumer

• config-provider

  • break
    • $NOs.theme => useOsTheme
    • theme => legacy-theme
  • deprecate
    • as => tag
    • styleScheme won't working in next version
  • new
    • provide useOsTheme hook

• confirm => dialog

  • break
    • rename confirm to dialog
  • remove
    • $NConfirm, $NModal => inject.dialog

• data-table

  • deprecate
    • on-filters-change => on-update:filters
    • on-sorter-change => on-update:sorter
    • on-checked-row-keys-change => on-update:checked-row-keys
    • on-page-change => on-update:page
    • on-page-size-change => on-update:page-size

• date-picker

  • break
    • v-model => v-model:value
  • deprecate
    • on-change => on-update:value
  • new
    • default-value prop

• descriptions

• divider

• drawer

  • break
    • v-model
  • deprecate
    • on-show => on-update:show
    • on-hide => on-update:show
    • target => to
    • drawer-class => class
    • drawer-style => style
  • new
    • display-directive prop

• dropdown

  • break
    • option.value => option.key
    • item must have unique key
    • submenu must have unique key
  • remove
    • submenu-width
    • submenu-min-width
    • submenu-max-width
  • new
    • option.icon

• dynamic-input

  • break
    • v-model => v-model:value
    • on-clear is removed
  • deprecate
    • on-input => on-update:value
  • new
    • min
    • default-value

• dynamic-tags

  • break
    • v-model => v-model:value

• element

• empty

• gradient-text

• grid

• icon

• input

  • break
    • v-model => v-model:value
  • new
    • on-update:value prop
    • default-value prop

• input-group

• input-group-label

• input-number

  • deprecate
    • on-change => on-update:value
  • new
    • default-value prop

• layout

  • layout-content, layout
    • breaking use-native-scrollbar => native-scrollbar
  • layout-sider
    • breaking use-native-scrollbar => native-scrollbar
    • deprecate
      • on-expand => on-update:collapsed
      • on-collapse => on-update:collapsed

• list

• loading-bar

  • remove
    • $NLoadingBar
  • new
    • n-loading-bar-provider

• log

  • deprecate
    • scrollToTop => scrollTo
    • scrollToBottom => scrollTo

• menu

  • deprecate
    • on-expanded-names-change => on-update:expanded-keys
    • on-select => on-update:value
    • expanded-names => expanded-keys
    • default-expanded-names => default-expanded-keys
    • item.name => item.key
    • item.titleExtra => item.extra
  • remove
    • overlay-width
    • overlay-min-width

• message

  • rewrite message using n-message-provider
  • deprecate
    • onHide => onLeave
    • onAfterHide => onAfterLeave
  • remove
    • message.hide => message.destroy

• modal

  • rewrite with teleport
  • new
    • display-directive
  • deprecate
    • v-model
    • on-show => on-update:show
    • on-hide => on-update:show
    • overlay-style => style
  • remove
    • default hide behavior for preset
  • BUG:
    • dialog preset slot (below vue 3.0.2)

• notification

  • deprecate
    • open => create
    • onHide => onLeave
    • onAfterShow => onAfterEnter
    • onAfterHide => onAfterHide

• pagination

  • deprecate
    • on-change => on-update:page
    • on-page-size-change => on-update:page-size

• popconfirm

• popover

  • new
    • default-show
  • deprecate
    • #activator => #trigger
    • overlay-xxx => body-xxx
  • remove
    • controller
    • max-width
    • width
    • min-width
    • manual trigger is removed, use null instead
    • body-class, use class instead
    • body-style, use style instead
  • other
    • set default trigger to null

• popselect

  • break
    • v-model => v-model:value
  • deprecate
    • on-change => on-update:value

• progress

• radio

  • radio-group
    • break
      • default size 'small' => 'medium'
      • value only supports string or null
    • deprecate
      • on-change => on-update:value
  • radio & radio-button
    • break
      • value only supports string
      • checked-value => checked
        • It is change to conform html standard usage
      • on-change => on-update:checked
        • on-change is now a native event

• result

• scrollbar

• select

  • break
    • v-model => v-model:value
    • on-scroll(event, container, content) => on-scroll(event)
    • option.render(h, data) => option.render(data)
  • deprecated
    • on-change => on-update:value

• slider

  • deprecated
    • on-change => on-update:value
  • new
    • default-value prop
  • bug
    • vue refs https://github.com/vuejs/vue-next/issues/2283
    • drag logic

• space

• spin

  • breaking
    • 'in-small', 'in-medium' and 'in-large' size are removed
  • deprecate
    • spinning => show

• statistic

• steps

• switch

  • remove
    • value => value
    • change => on-update:value

• table

• tabs

  • deprecate
    • active-name => value
    • on-active-name-change => on-update:value

• tag

  • break
    • v-model => v-model:value
  • deprecate
    • on-checked-change => on-update:checked

• thing

• time

• time-picker

  • break
    • v-model => v-model:value

• timeline

• tooltip

  • deprecate
    • #activator => #trigger

• transfer

  • break
    • v-model => v-model:value
  • deprecate
    • on-change => on-update:value
  • new
    • default-value prop

• tree

  • break
    • v-model => v-model:selected-keys
  • deprecate
    • on-selected-keys-change => on-update:selected-keys
    • on-checked-keys-change => on-update:checked-keys
    • on-expanded-keys-change => on-update:expanded-keys

• typography

  • breaking
    • text, p
      • depth from primary ... tertiary => 1, 2, 3
  • deprecate
    • text
      • as => tag

• upload

• nimbus-service-layout

  • breaking
    • v-model => v-model:value

• TODO

  • vooks
  • icons from vicons
  • fonts from vfonts
  • vite-build
  • rollup-build
    • wait for new version of rollup-plugin-vue, https://github.com/vuejs/rollup-plugin-vue/issues/408
  • tusimple theme
  • clean delegate
  • site production tag (bug)
  • demo scrollbar 的问题
  • table x scroll 右侧阴影不消失
  • log scrollTo 有点问题
  • remove hollowoutable
  • styleScheme, css variables 组件
    • 文档之后再说
  • use-global-style ? 感觉效果不会特别好而且还是很无谓的性能开销这个问题可以之后再思考，现阶段 vue 的写法还是全局 install
  • dynamic-input, no value
  • button, input 的 css 变量名需要修改一下
  • test rollup treeshaking
  • test webpack treeshaking
  • menu utils render
  • dialog bug
  • data-table css vars
  • typography css vars
  • spin css vars
  • radio css vars
  • checkbox css vars
  • avatar css vars
  • landing page icon
  • switch styles
  • slider styles
  • drawer api
  • chrome date-picker overflow (focus({ preventScroll }))
  • slider 键盘好像会激活不该激活的 tooltip...
  • transfer 打包之后有问题
  • side effects = false 好像会影响 rollup 的打包（这让我很不安，要是生效 css 怎么办？要是不生效 JS 怎么办？）（事实上确实会影响网站对于 fonts 的打包，只能先靠脚本凑活一下） https://github.com/rollup/plugins/issues/692
  • vue 在 $attrs 的处理上 dev 和 prod 还是有差别 https://github.com/vuejs/vue-next/issues/2741
  • date-picker input 的 clear 有时候不会清除，看起来是 vue 的 bug
    • https://github.com/vuejs/vue-next/issues/2768
  • radio-group 影响主题切换，看起来是 vue 的 bug
    • https://github.com/vuejs/vue-next/issues/2829
  • cascader demo async 切换未重置数据，demo 写的有问题
  • gradient-text transition 又没了
  • md-loader code
  • input + form-item style
  • loadingbar theme
  • dropdown group + menu use dropdown
  • 多行 message
  • progress height
  • close 重构
  • data-table, radio style 重构
  • message icon style
  • transfer search icon style
  • base selection icon style
  • date picker not working
  • avatar font size bug

Info

https://github.com/vuejs/vue-next/issues/2549 last cherry-picked commit: 6560ae34d71b81d584af79f810cb9dfa87119d1a