refactor(steps): support vue3

src/_mixins/asformitem.js

@@ -3,6 +3,23 @@ export default function (events = {
   blur: 'blur',
   focus: 'focus'
 }, defaultSize = 'medium', syntheticSize = null) {
+  return {
+    data () {
+      return {
+        syntheticSize: 'medium'
+      }
+    },
+    provide () {
+      return {
+        NFormItem: '__FORM_ITEM_INNER__'
+      }
+    },
+    inject: {
+      NFormItem: {
+        default: null
+      }
+    }
+  }
   return {
     computed: {
       syntheticSize: syntheticSize || function () {

src/_utils/composition/index.js

@@ -6,7 +6,8 @@ import {
   inject,
   toRef,
   getCurrentInstance,
-  onBeforeUnmount
+  onBeforeUnmount,
+  nextTick
 } from 'vue'
 
 export function useFalseUntilTruthy (valueRef) {
@@ -52,6 +53,30 @@ export function useIsMounted () {
   return isMounted
 }
 
+export function useNotMounted () {
+  const notMounted = ref(true)
+  onMounted(() => {
+    notMounted.value = false
+  })
+  return notMounted
+}
+
+export function useDisabledUntilMounted (durationTickCount = 0) {
+  const disabled = ref(true)
+  onMounted(() => {
+    function countDown () {
+      if (!durationTickCount) {
+        disabled.value = false
+      } else {
+        durationTickCount -= 1
+        nextTick(countDown)
+      }
+    }
+    countDown()
+  })
+  return disabled
+}
+
 export function useMemo (valueGenerator, deps) {
   const valueRef = ref(valueGenerator())
   watch(deps, () => {

src/radio/index.js

@@ -1,6 +1,6 @@
 /* istanbul ignore file */
 import Radio from './src/Radio.vue'
-import RadioGroup from './src/RadioGroup.vue'
+import RadioGroup from './src/RadioGroup'
 import RadioButton from './src/RadioButton.vue'
 
 Radio.install = function (app, naive) {

src/radio/src/RadioGroup.js

@@ -1,4 +1,4 @@
-<script>
+import { h } from 'vue'
 import withapp from '../../_mixins/withapp'
 import themeable from '../../_mixins/themeable'
 import hollowoutable from '../../_mixins/hollowoutable'
@@ -6,31 +6,32 @@ import asformitem from '../../_mixins/asformitem'
 import getDefaultSlot from '../../_utils/vue/getDefaultSlot'
 import usecssr from '../../_mixins/usecssr'
 import styles from './styles/radio-group/index.js'
+import { warn } from '../../_utils/naive/warn'
 
 function mapSlot (h, defaultSlot, groupInstance) {
   const mappedSlot = []
   defaultSlot = defaultSlot || []
   for (let i = 0; i < defaultSlot.length; ++i) {
     const wrappedInstance = defaultSlot[i]
-    const instanceOptions = wrappedInstance.componentOptions
-    const instanceCtorOptions = instanceOptions && instanceOptions.Ctor.options
+    const instanceOptions = wrappedInstance.type
     if (
-      !instanceOptions ||
-      !['Radio', 'RadioButton'].includes(instanceCtorOptions.name)
-    ) {
-      console.error(
-        '[naive ui/radio]: `n-radio-group` only taks `n-radio` and `n-radio-button` as children.'
+      __DEV__ && (
+        !instanceOptions ||
+        !['Radio', 'RadioButton'].includes(instanceOptions.name)
       )
+    ) {
+      warn('radio-group', '`n-radio-group` only taks `n-radio` and `n-radio-button` as children.')
       continue
     }
-    if (i === 0 || instanceCtorOptions.name === 'Radio') {
+    const instanceProps = wrappedInstance.props
+    if (i === 0 || instanceOptions.name === 'Radio') {
       mappedSlot.push(wrappedInstance)
     } else {
-      const lastInstanceComponentOptions = mappedSlot[mappedSlot.length - 1].componentOptions
-      const lastInstanceChecked = groupInstance.$props.value === lastInstanceComponentOptions.propsData.value
-      const lastInstanceDisabled = lastInstanceComponentOptions.propsData.disabled
-      const currentInstanceChecked = groupInstance.$props.value === instanceOptions.propsData.value
-      const currentInstanceDisabled = instanceOptions.propsData.disabled
+      const lastInstanceProps = mappedSlot[mappedSlot.length - 1].props
+      const lastInstanceChecked = groupInstance.$props.value === lastInstanceProps.value
+      const lastInstanceDisabled = lastInstanceProps.disabled
+      const currentInstanceChecked = groupInstance.$props.value === instanceProps.value
+      const currentInstanceDisabled = instanceProps.disabled
       let lastInstancePriority
       let currentInstancePriority
       if (groupInstance.syntheticTheme === 'dark') {
@@ -130,17 +131,18 @@ export default {
       NFormItem: null
     }
   },
-  render (h) {
+  render () {
     const isButtonGroup = this.radioButtonCount > 0
     return h('div', {
-      staticClass: 'n-radio-group',
-      class: {
-        [`n-${this.syntheticTheme}-theme`]: this.syntheticTheme,
-        [`n-radio-group--${this.syntheticSize}-size`]: this.syntheticSize,
-        [`n-radio-group--button-group`]: isButtonGroup,
-        [`n-radio-group--transition-disabled`]: isButtonGroup && this.transitionDisabled
-      }
+      class: [
+        'n-radio-group',
+        {
+          [`n-${this.syntheticTheme}-theme`]: this.syntheticTheme,
+          [`n-radio-group--${this.syntheticSize}-size`]: this.syntheticSize,
+          [`n-radio-group--button-group`]: isButtonGroup,
+          [`n-radio-group--transition-disabled`]: isButtonGroup && this.transitionDisabled
+        }
+      ]
     }, mapSlot(h, getDefaultSlot(this), this))
   }
 }
-</script>

src/steps/index.js

@@ -1,5 +1,5 @@
 /* istanbul ignore file */
-import Steps from './src/Steps.vue'
+import Steps from './src/Steps'
 import Step from './src/Step'
 
 Steps.install = function (app, naive) {

src/steps/src/Step.vue

@@ -24,13 +24,13 @@
             v-else-if="syntheticStatus === 'finish'"
             key="finish"
           >
-            <md-checkmark />
+            <finished-icon />
           </n-icon>
           <n-icon
             v-else-if="syntheticStatus === 'error'"
             key="error"
           >
-            <md-close />
+            <error-icon />
           </n-icon>
         </n-icon-switch-transition>
       </div>
@@ -55,8 +55,8 @@
 
 <script>
 import NIcon from '../../icon'
-import mdClose from '../../_icons/md-close'
-import mdCheckmark from '../../_icons/md-checkmark'
+import ErrorIcon from '../../_icons/md-close'
+import FinishedIcon from '../../_icons/md-checkmark'
 import themeable from '../../_mixins/themeable'
 
 import NIconSwitchTransition from '../../_transition/IconSwitchTransition'
@@ -69,11 +69,13 @@ export default {
   },
   components: {
     NIcon,
-    mdCheckmark,
-    mdClose,
+    FinishedIcon,
+    ErrorIcon,
     NIconSwitchTransition
   },
-  mixins: [ themeable ],
+  mixins: [
+    themeable
+  ],
   props: {
     status: {
       type: String,

src/steps/src/Steps.js

@@ -1,17 +1,15 @@
-<script>
+import { h } from 'vue'
 import withapp from '../../_mixins/withapp'
 import themeable from '../../_mixins/themeable'
 import hollowoutable from '../../_mixins/hollowoutable'
 import usecssr from '../../_mixins/usecssr'
 import getDefaultSlot from '../../_utils/vue/getDefaultSlot'
 import styles from './styles/steps'
+import { useDisabledUntilMounted } from '../../_utils/composition'
 
 function stepWithIndex (step, i) {
-  if (step.componentOptions) {
-    step.componentOptions.propsData = Object.assign(step.componentOptions.propsData, {
-      index: i + 1
-    })
-  }
+  if (!step.props) step.props = {}
+  step.props.index = i + 1
   return step
 }
 
@@ -50,26 +48,22 @@ export default {
       default: false
     }
   },
-  data () {
+  setup () {
     return {
-      transitionDisabled: true
+      transitionDisabled: useDisabledUntilMounted(1)
     }
   },
-  mounted () {
-    this.$nextTick().then(() => {
-      this.transitionDisabled = false
-    })
-  },
-  render (h) {
+  render () {
     return h('div', {
-      staticClass: 'n-steps',
-      class: {
-        [`n-${this.syntheticTheme}-theme`]: this.syntheticTheme,
-        [`n-steps--${this.size}-size`]: true,
-        'n-steps--vertical': this.vertical,
-        'n-steps--transition-disabled': this.transitionDisabled
-      }
+      class: [
+        'n-steps',
+        {
+          [`n-${this.syntheticTheme}-theme`]: this.syntheticTheme,
+          [`n-steps--${this.size}-size`]: true,
+          'n-steps--vertical': this.vertical,
+          'n-steps--transition-disabled': this.transitionDisabled
+        }
+      ]
     }, stepsWithIndex({ ...this.$props }, getDefaultSlot(this)))
   }
 }
-</script>

vue3.md

@@ -141,7 +141,7 @@ placeable 进行了大调整
 - [ ] slider
 - [x] spin
 - [x] statistic
-- [ ] steps
+- [x] steps
 - [x] switch
   - remove
     - `value` => `model-value`