diff --git a/demo/documentation/components/slider/enUS/index.demo-entry.md b/demo/documentation/components/slider/enUS/index.demo-entry.md index e03ca5f13..ff104b6e1 100644 --- a/demo/documentation/components/slider/enUS/index.demo-entry.md +++ b/demo/documentation/components/slider/enUS/index.demo-entry.md @@ -14,6 +14,7 @@ mark | Name | Type | Default | Description | | --- | --- | --- | --- | +| default-value | `number \| [number, number] \| null` | `null` | | | disabled | `boolean` | `false` | | | marks | `{ [markValue: number]: string }` | `undefined` | | | max | `number` | `100` | | @@ -21,5 +22,5 @@ mark | range | `boolean` | `false` | | | step | `number` | `1` | | | theme | `'light' \| 'dark' \| string` | `undefined` | | -| value | `number \| [number, number]` | `null` | +| value | `number \| [number, number] \| null` | `undefined` | | on-update:value | `(value: number \| [number, number]) => any` | `undefined` | | diff --git a/demo/documentation/components/slider/zhCN/index.demo-entry.md b/demo/documentation/components/slider/zhCN/index.demo-entry.md index 3c5d891a4..34b6c4b01 100644 --- a/demo/documentation/components/slider/zhCN/index.demo-entry.md +++ b/demo/documentation/components/slider/zhCN/index.demo-entry.md @@ -14,6 +14,7 @@ mark | 名称 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | +| default-value | `number \| [number, number] \| null` | `null` | | | disabled | `boolean` | `false` | | | marks | `{ [markValue: number]: string }` | `undefined` | | | max | `number` | `100` | | @@ -21,5 +22,5 @@ mark | range | `boolean` | `false` | | | step | `number` | `1` | | | theme | `'light' \| 'dark' \| string` | `undefined` | | -| value | `number \| [number, number]` | `null` | +| value | `number \| [number, number] \| null` | `undefined` | | on-update:value | `(value: number \| [number, number]) => any` | `undefined` | | diff --git a/package.json b/package.json index 8c115909f..3521d7304 100644 --- a/package.json +++ b/package.json @@ -117,7 +117,7 @@ "vfonts": "^0.0.1", "vooks": "^0.0.6", "vue": "^3.0.4", - "vueuc": "^0.0.1" + "vueuc": "0.0.2" }, "sideEffects": false, "husky": { diff --git a/src/slider/src/Slider.vue b/src/slider/src/Slider.vue index d27bfc1fb..83f6e49d5 100644 --- a/src/slider/src/Slider.vue +++ b/src/slider/src/Slider.vue @@ -150,6 +150,10 @@ export default { }, mixins: [configurable, themeable, withCssr(styles), asFormItem()], props: { + defaultValue: { + type: [Number, Array], + default: null + }, marks: { type: Object, default: undefined @@ -176,7 +180,7 @@ export default { }, value: { type: [Number, Array], - default: null + default: undefined }, placement: { type: String, @@ -206,6 +210,13 @@ export default { } }, setup (props) { + const uncontrolledValueRef = ref(props.defaultValue) + const controlledValueRef = toRef(props, 'value') + const mergedValueRef = useMergedState( + controlledValueRef, + uncontrolledValueRef + ) + const handleActive1Ref = ref(false) const handleActive2Ref = ref(false) const handleClicked1Ref = ref(false) @@ -234,6 +245,8 @@ export default { return handleClicked1Ref.value || handleClicked2Ref.value }) return { + uncontrolledValue: uncontrolledValueRef, + mergedValue: mergedValueRef, isMounted: useIsMounted(), adjustedTo: useAdjustedTo(props), mergedShowTooltip1: mergedShowTooltip1Ref, @@ -289,25 +302,27 @@ export default { } }, handleValue1 () { + const { mergedValue, sanitizeValue } = this if (this.range) { - if (this.value) { - if (this.value[0] > this.value[1]) { - return this.justifyValue(this.value[1]) + if (mergedValue) { + if (mergedValue[0] > mergedValue[1]) { + return sanitizeValue(mergedValue[1]) } else { - return this.justifyValue(this.value[0]) + return sanitizeValue(mergedValue[0]) } } return null } else { - return this.justifyValue(this.value) + return sanitizeValue(mergedValue) } }, handleValue2 () { - if (this.range && this.value) { - if (this.value[0] > this.value[1]) { - return this.justifyValue(this.value[0]) + const { mergedValue, range } = this + if (range && mergedValue) { + if (mergedValue[0] > mergedValue[1]) { + return this.sanitizeValue(mergedValue[0]) } else { - return this.justifyValue(this.value[1]) + return this.sanitizeValue(mergedValue[1]) } } return null @@ -328,7 +343,7 @@ export default { } }, watch: { - value (newValue, oldValue) { + mergedValue (newValue, oldValue) { const { changeSource } = this if (this.range && newValue) { if (oldValue && oldValue[1] !== newValue[1]) { @@ -387,6 +402,7 @@ export default { } = this if (onChange) call(onChange, value) if (onUpdateValue) call(onUpdateValue, value) + this.uncontrolledValue = value nTriggerFormInput() nTriggerFormChange() }, @@ -427,7 +443,7 @@ export default { this.dispatchValueUpdate(newValue, { source: 'click' }) this.handleRef1.focus() } else { - if (this.value) { + if (this.mergedValue) { if ( Math.abs(this.handleValue1 - newValue) < Math.abs(this.handleValue2 - newValue) @@ -563,7 +579,7 @@ export default { return closestValue } }, - justifyValue (value) { + sanitizeValue (value) { let justifiedValue = value justifiedValue = Math.max(this.min, justifiedValue) justifiedValue = Math.min(this.max, justifiedValue) @@ -602,7 +618,7 @@ export default { handleHandleMouseUp (e) { if ( !this.handleRef1.contains(e.target) && - !this.handleRef2.contains(e.target) + (this.range ? !this.handleRef2.contains(e.target) : true) ) { this.doUpdateShow(false, false) } @@ -614,14 +630,15 @@ export default { }, dispatchValueUpdate (value, options = { source: null }) { const { source } = options - if (this.range) { + const { range, sanitizeValue } = this + if (range) { if (Array.isArray(value)) { if (value[0] > value[1]) { - value = [this.justifyValue(value[1]), this.justifyValue(value[0])] + value = [sanitizeValue(value[1]), sanitizeValue(value[0])] } else { - value = [this.justifyValue(value[0]), this.justifyValue(value[1])] + value = [sanitizeValue(value[0]), sanitizeValue(value[1])] } - const { value: oldValue } = this + const { mergedValue: oldValue } = this if ( !Array.isArray(oldValue) || oldValue[0] !== value[0] || @@ -632,7 +649,7 @@ export default { } } } else { - const { value: oldValue, max, min } = this + const { mergedValue: oldValue, max, min } = this if (value > max) { if (oldValue !== max) { this.changeSource = source @@ -644,7 +661,7 @@ export default { this.doUpdateValue(min) } } else { - const newValue = this.justifyValue(value) + const newValue = this.sanitizeValue(value) if (oldValue !== newValue) { this.changeSource = source this.doUpdateValue(newValue) diff --git a/vue3.md b/vue3.md index 3e7699dde..bb9b32569 100644 --- a/vue3.md +++ b/vue3.md @@ -1,5 +1,7 @@ # 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 @@ -10,6 +12,7 @@ - `n-nimbus-icon` is removed ## Components + - [x] form - form-item - new @@ -52,6 +55,7 @@ - new - `cascade` prop - `show-path` prop + - `default-value` prop - deprecated - `on-change` => `on-update:value` - [x] checkbox @@ -149,13 +153,13 @@ - [x] input-number - deprecate - `on-change` => `on-update:value` + - new + - `default-value` prop - [x] layout - layout-content, layout - - breaking - `use-native-scrollbar` => `native-scrollbar` + - breaking `use-native-scrollbar` => `native-scrollbar` - layout-sider - - breaking - `use-native-scrollbar` => `native-scrollbar` + - breaking `use-native-scrollbar` => `native-scrollbar` - deprecate - `on-expand` => `on-update:collapsed` - `on-collapse` => `on-update:collapsed` @@ -259,6 +263,8 @@ - [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 @@ -313,18 +319,17 @@ - `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 + - [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) @@ -334,8 +339,7 @@ - [x] remove hollowoutable - [x] styleScheme, css variables 组件 - 文档之后再说 - - [x] use-global-style ? 感觉效果不会特别好而且还是很无谓的性能开销 - 这个问题可以之后再思考，现阶段 vue 的写法还是全局 install + - [x] use-global-style ? 感觉效果不会特别好而且还是很无谓的性能开销这个问题可以之后再思考，现阶段 vue 的写法还是全局 install - [x] dynamic-input, no value - [x] button, input 的 css 变量名需要修改一下 - [x] test rollup treeshaking @@ -360,6 +364,5 @@ - [ ] date-picker input 的 clear 有时候不会清除，看起来是 vue 的 bug... ## Info -https://github.com/vuejs/vue-next/issues/2549 -last cherry-picked commit: 6560ae34d71b81d584af79f810cb9dfa87119d1a +https://github.com/vuejs/vue-next/issues/2549 last cherry-picked commit: 6560ae34d71b81d584af79f810cb9dfa87119d1a