feat(slider): default value prop

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` |  |

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` |  |

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": {

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)

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