naive-ui/vue3.md

395 lines
10 KiB
Markdown
Raw Normal View History

2020-11-05 15:24:18 +08:00
# Migrate from V1
2020-12-14 02:43:48 +08:00
2020-11-05 15:24:18 +08:00
## General Breaking Changes
2020-12-14 02:43:48 +08:00
2020-11-05 14:54:47 +08:00
- 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
2020-09-10 14:18:02 +08:00
2020-11-05 15:24:18 +08:00
## Components
2020-12-14 02:43:48 +08:00
2020-11-05 15:24:18 +08:00
- [x] form
- form-item
2020-11-05 14:54:47 +08:00
- new
2020-11-05 15:24:18 +08:00
- `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
2020-12-14 02:43:48 +08:00
- `default-value` prop
2020-11-05 15:24:18 +08:00
- deprecated
- `on-change` => `on-update:value`
- [x] checkbox
- checkbox
- break
2020-11-05 15:24:18 +08:00
- `value` only supports `string`
- deprecate
2020-11-05 15:24:18 +08:00
- `on-change` => `on-update:checked`
- new
2020-11-05 15:24:18 +08:00
- `default-checked` prop
- checkbox-group
2020-11-05 14:54:47 +08:00
- break
2020-11-05 15:24:18 +08:00
- `value` only supports `string` or `null`
2020-09-28 14:18:14 +08:00
- deprecate
- `on-change` => `on-update:value`
2020-11-05 15:24:18 +08:00
- [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`
2021-01-04 01:03:09 +08:00
- `theme` => `legacy-theme`
2020-11-05 15:24:18 +08:00
- 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`
2020-12-14 03:34:36 +08:00
- new
- `default-value` prop
2020-11-05 15:24:18 +08:00
- [x] descriptions
- [x] divider
- [x] drawer
- break
- `v-model`
- deprecate
- `on-show` => `on-update:show`
- `on-hide` => `on-update:show`
- `target` => `to`
2020-12-15 16:24:39 +08:00
- `drawer-class` => `class`
- `drawer-style` => `style`
2020-11-05 15:24:18 +08:00
- 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
2020-11-05 15:24:18 +08:00
- deprecate
- `on-input` => `on-update:value`
- new
- `min`
- `default-value`
2020-11-05 15:24:18 +08:00
- [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
2020-12-14 03:47:21 +08:00
- `on-update:value` prop
- `default-value` prop
2020-11-05 15:24:18 +08:00
- [x] input-group
- [x] input-group-label
- [x] input-number
- deprecate
- `on-change` => `on-update:value`
2020-12-14 02:43:48 +08:00
- new
- `default-value` prop
2020-11-05 15:24:18 +08:00
- [x] layout
- layout-content, layout
2020-12-14 02:43:48 +08:00
- breaking `use-native-scrollbar` => `native-scrollbar`
2020-11-05 15:24:18 +08:00
- layout-sider
2020-12-14 02:43:48 +08:00
- breaking `use-native-scrollbar` => `native-scrollbar`
2020-09-27 03:21:50 +08:00
- deprecate
2020-11-05 15:24:18 +08:00
- `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`
2020-12-15 16:24:39 +08:00
- `overlay-style` => `style`
2020-11-05 15:24:18 +08:00
- 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
2020-12-16 02:24:35 +08:00
- `#activator` => `#trigger`
2020-11-05 15:24:18 +08:00
- `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
2020-11-05 15:24:18 +08:00
- 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
2020-11-05 14:54:47 +08:00
- break
2020-11-05 15:24:18 +08:00
- default `size` `'small'` => `'medium'`
- value only supports `string` or `null`
2020-09-29 00:56:27 +08:00
- deprecate
- `on-change` => `on-update:value`
2020-11-05 15:24:18 +08:00
- radio & radio-button
2020-11-05 14:54:47 +08:00
- break
2020-11-05 15:24:18 +08:00
- 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`
2020-12-14 02:43:48 +08:00
- new
- `default-value` prop
2020-11-05 15:24:18 +08:00
- 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`
2020-11-05 15:24:18 +08:00
- [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
2020-12-16 02:24:35 +08:00
- deprecate
- `#activator` => `#trigger`
2020-11-05 15:24:18 +08:00
- [x] transfer
- break
- `v-model` => `v-model:value`
- deprecate
- `on-change` => `on-update:value`
2020-12-14 03:14:45 +08:00
- new
- `default-value` prop
2020-11-05 15:24:18 +08:00
- [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
2020-11-07 01:02:26 +08:00
- breaking
- text, p
- `depth` from `primary` ... `tertiary` => `1`, `2`, `3`
2020-11-05 15:24:18 +08:00
- deprecate
- text
- `as` => `tag`
- [x] upload
- [x] nimbus-service-layout
2020-12-14 02:43:48 +08:00
- breaking
- `v-model` => `v-model:value`
2020-11-02 21:41:40 +08:00
2020-11-05 15:24:18 +08:00
- TODO
- [x] vooks
- [x] icons from `vicons`
- [x] fonts from `vfonts`
- [x] vite-build
- [x] rollup-build
2020-12-14 02:43:48 +08:00
- [x] wait for new version of rollup-plugin-vue, https://github.com/vuejs/rollup-plugin-vue/issues/408
2020-11-05 15:24:18 +08:00
- tusimple theme
- [x] clean delegate
2020-11-05 15:24:18 +08:00
- [x] site production tag (bug)
- [x] demo scrollbar 的问题
- [x] table x scroll 右侧阴影不消失
- [x] log scrollTo 有点问题
- [x] remove hollowoutable
2020-11-14 20:38:30 +08:00
- [x] styleScheme, css variables 组件
- 文档之后再说
2020-12-14 02:43:48 +08:00
- [x] use-global-style ? 感觉效果不会特别好而且还是很无谓的性能开销这个问题可以之后再思考,现阶段 vue 的写法还是全局 install
2020-11-07 00:22:09 +08:00
- [x] dynamic-input, no value
2020-11-14 20:38:30 +08:00
- [x] button, input 的 css 变量名需要修改一下
2020-11-11 23:10:58 +08:00
- [x] test rollup treeshaking
- [x] test webpack treeshaking
2020-11-14 20:38:30 +08:00
- [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...
2020-12-07 17:21:23 +08:00
- [x] transfer 打包之后有问题
- [x] side effects = false 好像会影响 rollup 的打包(这让我很不安,要是生效 css 怎么办?要是不生效 JS 怎么办?)(事实上确实会影响网站对于 fonts 的打包,只能先靠脚本凑活一下) https://github.com/rollup/plugins/issues/692
2020-12-07 17:21:23 +08:00
- [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 写的有问题
2021-01-04 01:03:09 +08:00
- [ ] gradient-text transition 又没了
- [x] md-loader code
2021-01-05 18:03:22 +08:00
- [ ] input + form-item style
2021-01-10 14:25:21 +08:00
- [x] loadingbar theme
2021-01-05 21:58:28 +08:00
- [ ] dropdown group + menu use dropdown
- [x] 多行 message
- [ ] progress height
- [x] close 重构
- [ ] data-table, radio style 重构
- [x] message icon style
2021-01-10 15:25:08 +08:00
- [ ] transfer search icon style
2021-01-09 17:07:44 +08:00
- [ ] base selection icon style
2021-01-10 15:25:08 +08:00
- [ ] date picker not working
2021-01-10 18:51:50 +08:00
- [ ] avatar font size bug
2020-11-05 15:24:18 +08:00
## Info
2020-12-14 02:43:48 +08:00
https://github.com/vuejs/vue-next/issues/2549 last cherry-picked commit: 6560ae34d71b81d584af79f810cb9dfa87119d1a