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 (vue-loader is required), use [`vicons`](https://www.npmjs.com/package/vicons) instead.
- `n-nimbus-icon` is moved to `naive-ui/compat/nimbus-icon` (vue-loader is required)
- `n-nimbus-form-card` 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 (deprecated)
- [x] config-provider
  - break
    - `theme` use new theme from naive export
    - `$NOs.theme` => `useOsTheme`
    - `theme` => `legacy-theme`
  - deprecate
    - `as` => `tag`
    - `styleScheme` won't working in next version
  - new
    - `date-locale` prop
    - `locale` prop
    - 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
    - `item-style` prop
    - `min` prop
    - `default-value` prop
- [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`
  - remove
    - `item.titleExtra`
    - `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
  - break
    - `type` default from `'relative'` to `'date-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 写的有问题
  - [x] gradient-text transition 又没了
  - [x] md-loader code
  - [x] input + form-item style
  - [x] loadingbar theme
  - [x] dropdown group + menu use dropdown
  - [x] 多行 message
  - [x] progress height
  - [x] close 重构
  - [ ] data-table, radio style 重构
  - [x] message icon style
  - [x] transfer search icon style
  - [x] base selection icon style
  - [x] date picker not working
  - [x] avatar font size bug
  - [x] handle global style
    - 暂时放在 useTheme + useStyle 中... 似乎没啥太好的办法，最终还是要想办法让样式不要溢出
  - [ ] prefixCls ?
  - [x] select menu padding top & bottom
  - [x] time-picker invalid
  - [x] date-picker invalid
  - [x] vooks `useNow`
  - [x] treemate activePath includeGroup: false
  - [ ] select menu multiple, when show=true, checkmark transiton not working
  - [x] menu + dropdown collapsed 时候 menu item 不更新（selected 从使用 useMemo 切换成 computed（性能下降）, Vue 在这种时候一定存在 bug，但是暂时没空找了...）
  - [x] 拆分 dateFns locale => dateLocale
  - [ ] 更新一波文档 props
  - [ ] 更新样式的文档
  - [x] 试图把组件的 demo 放到 src 里面
  - [x] 去掉仅存的 mixin
  - [x] form item default type explain
  - [x] selection focus style
  - [x] refactor site use store!!! singleton
  - [x] 文档网站主题切换
  - [x] 文档网站 demo 样式
  - [x] anchor bug！
  - [x] getKey select & autocomplete type safe & input event interface? onInput value | null or value
  - [x] vshow (maybe create a vue pr)
  - [x] jsx focusin out (waiting for vue update)
  - [x] inject key & value in type (I should use InjectionKey...)
  - [x] form item no label css
  - [x] unify treemate ignored
  - [ ] fix menu extra
  - [x] build icon
  - [x] compat
  - [ ] on update value api
  - [x] fix upload dragger
  - [x] fix table sorter
  - [x] tree 多选节点第二个 demo
  - [x] table treemate!!!
  - [x] createTheme
  - [ ] build site

## Build

package: tsx => es|lib => terse cssr => release site: build package => move to node_modules => setup side effects => vite build

## Info

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