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`](https://www.npmjs.com/package/vfonts)
- icons
  - `naive-ui/lib|es/icons/*` is deprecated, use [`vicons`](https://www.npmjs.com/package/vicons) instead.
- `n-nimbus-form-card` is removed
- `n-nimbus-icon` is removed

## Components

- [x] form
  - form-item
    - new
      - `show-feedback` prop
- [x] affix
  - deprecate
    - `target` => `listen-to`
- [x] alert
- [x] anchor
  - deprecate
    - `target` => `listen-to`
- [x] auto-complete
  - break
    - `v-model` => `v-model:value`
  - deprecate
    - `on-input` => `on-update:value`
  - new
    - `on-blur`
    - `on-focus`
- [x] avatar
- [x] 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`
- [x] badge
- [x] breadcrumb
- [x] button
- [x] button-group
- [x] card
- [x] 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`
- [x] 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`
- [x] code
- [x] collapse
  - deprecate
    - `on-expanded-names-change` => `on-update:expanded-names`
  - removed
    - `v-model` => `v-model:expanded-names`
- [x] config-consumer
- [x] config-provider
  - break
    - `$NOs.theme` => `useOsTheme`
    - `theme` => `legacy-theme`
  - deprecate
    - `as` => `tag`
    - `styleScheme` won't working in next version
  - new
    - provide `useOsTheme` hook
- [x] confirm => `dialog`
  - break
    - rename `confirm` to `dialog`
  - remove
    - `$NConfirm`, `$NModal` => `inject.dialog`
- [x] 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`
- [x] date-picker
  - break
    - `v-model` => `v-model:value`
  - deprecate
    - `on-change` => `on-update:value`
  - new
    - `default-value` prop
- [x] descriptions
- [x] divider
- [x] 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
- [x] 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`
- [x] dynamic-input
  - break
    - `v-model` => `v-model:value`
    - `on-clear` is removed
  - deprecate
    - `on-input` => `on-update:value`
  - new
    - `min`
    - `default-value`
- [x] dynamic-tags
  - break
    - `v-model` => `v-model:value`
- [x] element
- [x] empty
- [x] gradient-text
- [x] grid
- [x] icon
- [x] input
  - break
    - `v-model` => `v-model:value`
  - new
    - `on-update:value` prop
    - `default-value` prop
- [x] input-group
- [x] input-group-label
- [x] input-number
  - deprecate
    - `on-change` => `on-update:value`
  - new
    - `default-value` prop
- [x] 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`
- [x] list
- [x] loading-bar
  - remove
    - `$NLoadingBar`
  - new
    - `n-loading-bar-provider`
- [x] log
  - deprecate
    - `scrollToTop` => `scrollTo`
    - `scrollToBottom` => `scrollTo`
- [x] 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`
- [x] message
  - rewrite message using `n-message-provider`
  - deprecate
    - `onHide` => `onLeave`
    - `onAfterHide` => `onAfterLeave`
  - remove
    - `message.hide` => `message.destroy`
- [x] 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)
- [x] notification
  - deprecate
    - `open` => `create`
    - `onHide` => `onLeave`
    - `onAfterShow` => `onAfterEnter`
    - `onAfterHide` => `onAfterHide`
- [x] pagination
  - deprecate
    - `on-change` => `on-update:page`
    - `on-page-size-change` => `on-update:page-size`
- [x] popconfirm
- [x] 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`
- [x] popselect
  - break
    - `v-model` => `v-model:value`
  - deprecate
    - `on-change` => `on-update:value`
- [x] progress
- [x] 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
- [x] result
- [x] scrollbar
- [x] 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`
- [x] slider
  - deprecated
    - `on-change` => `on-update:value`
  - new
    - `default-value` prop
  - bug
    - vue refs https://github.com/vuejs/vue-next/issues/2283
    - drag logic
- [x] space
- [x] spin
  - breaking
    - `'in-small'`, `'in-medium'` and `'in-large'` size are removed
  - deprecate
    - `spinning` => `show`
- [x] statistic
- [x] steps
- [x] switch
  - remove
    - `value` => `value`
    - `change` => `on-update:value`
- [x] table
- [x] tabs
  - deprecate
    - `active-name` => `value`
    - `on-active-name-change` => `on-update:value`
- [x] tag
  - break
    - `v-model` => `v-model:value`
  - deprecate
    - `on-checked-change` => `on-update:checked`
- [x] thing
- [x] time
- [x] time-picker
  - break
    - `v-model` => `v-model:value`
- [x] timeline
- [x] tooltip
  - deprecate
    - `#activator` => `#trigger`
- [x] transfer
  - break
    - `v-model` => `v-model:value`
  - deprecate
    - `on-change` => `on-update:value`
  - new
    - `default-value` prop
- [x] 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`
- [x] typography
  - breaking
    - text, p
      - `depth` from `primary` ... `tertiary` => `1`, `2`, `3`
  - deprecate
    - text
      - `as` => `tag`
- [x] upload
- [x] nimbus-service-layout

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

- TODO
  - [x] vooks
  - [x] icons from `vicons`
  - [x] fonts from `vfonts`
  - [x] vite-build
  - [x] rollup-build
    - [x] wait for new version of rollup-plugin-vue, https://github.com/vuejs/rollup-plugin-vue/issues/408
  - tusimple theme
  - [x] clean delegate
  - [x] site production tag (bug)
  - [x] demo scrollbar 的问题
  - [x] table x scroll 右侧阴影不消失
  - [x] log scrollTo 有点问题
  - [x] remove hollowoutable
  - [x] styleScheme, css variables 组件
    - 文档之后再说
  - [x] use-global-style ? 感觉效果不会特别好而且还是很无谓的性能开销这个问题可以之后再思考，现阶段 vue 的写法还是全局 install
  - [x] dynamic-input, no value
  - [x] button, input 的 css 变量名需要修改一下
  - [x] test rollup treeshaking
  - [x] test webpack treeshaking
  - [x] menu utils render
  - [x] dialog bug
  - [x] data-table css vars
  - [x] typography css vars
  - [x] spin css vars
  - [x] radio css vars
  - [x] checkbox css vars
  - [x] avatar css vars
  - [x] landing page icon
  - [x] switch styles
  - [x] slider styles
  - [x] drawer api
  - [x] chrome date-picker overflow (focus({ preventScroll }))
  - [x] slider 键盘好像会激活不该激活的 tooltip...
  - [x] transfer 打包之后有问题
  - [x] side effects = false 好像会影响 rollup 的打包（这让我很不安，要是生效 css 怎么办？要是不生效 JS 怎么办？）（事实上确实会影响网站对于 fonts 的打包，只能先靠脚本凑活一下） https://github.com/rollup/plugins/issues/692
  - [x] 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
  - [x] cascader demo async 切换未重置数据，demo 写的有问题
  - [ ] gradient-text transition 又没了
  - [x] md-loader code

## Info

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