Skip to content

Replace Naive UI form and input primitives #3017

@nighca

Description

@nighca

Background

As part of #3013, we scanned the current naive-ui dependency surface in spx-gui.

The largest direct dependency cluster is the form / input layer.

Current dependency points include:

  • src/components/ui/form/UIForm.vue
  • src/components/ui/form/UIFormItem.vue
  • src/components/ui/form/UIFormItemInternal.vue
  • src/components/ui/UITextInput.vue
  • src/components/ui/UINumberInput.vue
  • src/components/ui/UISlider.vue
  • src/components/ui/UISwitch.vue
  • src/components/ui/checkbox/UICheckbox.vue
  • src/components/ui/checkbox/UICheckboxGroup.vue
  • src/components/ui/radio/UIRadio.vue
  • src/components/ui/radio/UIRadioGroup.vue

Problem

The current form/input abstraction still relies heavily on naive-ui, and in several places it depends on internal behavior instead of stable public contracts:

  • UIForm wraps NForm
  • UIFormItem wraps NFormItem
  • UIFormItemInternal imports formItemInjectionKey from naive-ui/es/_mixins/use-form-item and hijacks internal injection to intercept blur/input behavior
  • UITextInput and UINumberInput rely on deep selectors against naive-ui class names such as n-input-*
  • UITextInput and UINumberInput also work around autofocus behavior manually
  • UISlider is built on NSlider
  • checkbox / radio / switch controls are still thin wrappers over naive-ui

This layer is the biggest remaining reason the project still depends on naive-ui.

Goal

Replace the remaining naive-ui form and input primitives with internal components while preserving the current external UI* APIs where reasonable.

Scope

  • replace NForm / NFormItem
  • remove the dependency on naive-ui internal injection APIs
  • replace NInput, NInputNumber, NSlider, NSwitch, NCheckbox, NCheckboxGroup, NRadio, and NRadioGroup
  • keep the validation behavior currently expected by the app, including submit handling, validation state display, and IME-safe input behavior
  • reduce style coupling to naive-ui class names

Notes

This is likely the largest child task under #3013, and may need to be split again later by control type if execution becomes too broad.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions