niuma-ui 1.0.2 → 1.1.0

package/src/__tests__/RsFormList.spec.ts

@@ -0,0 +1,109 @@
+import { defineComponent, ref } from 'vue'
+import { afterEach, describe, expect, it } from 'vitest'
+import { flushPromises, mount } from '@vue/test-utils'
+import RsForm from '../components/RsForm.vue'
+import RsFormItem from '../components/RsFormItem.vue'
+import RsFormList from '../components/RsFormList.vue'
+import RsInput from '../components/RsInput.vue'
+
+describe('RsFormList', () => {
+  afterEach(() => {
+    document.body.innerHTML = ''
+  })
+
+  it('adds and removes rows on Form.model', async () => {
+    const Host = defineComponent({
+      components: { RsForm, RsFormItem, RsFormList, RsInput },
+      setup() {
+        const formRef = ref<InstanceType<typeof RsForm> | null>(null)
+        const model = ref<{ users: Array<{ name: string }> }>({ users: [] })
+        return { formRef, model }
+      },
+      template: `
+        <RsForm ref="formRef" :model="model">
+          <RsFormList name="users">
+            <template #default="{ fields, add, remove }">
+              <div v-for="field in fields" :key="field.key" class="row">
+                <RsFormItem :name="[field.name, 'name']" required>
+                  <RsInput />
+                </RsFormItem>
+                <button type="button" class="remove" @click="remove(field.index)">x</button>
+              </div>
+              <button type="button" class="add" @click="add({ name: '' })">add</button>
+            </template>
+          </RsFormList>
+        </RsForm>
+      `,
+    })
+    const wrapper = mount(Host)
+    await flushPromises()
+    await wrapper.find('.add').trigger('click')
+    await flushPromises()
+    expect(wrapper.vm.model.users).toEqual([{ name: '' }])
+
+    const invalid = await wrapper.vm.formRef!.validate()
+    expect(invalid.valid).toBe(false)
+    expect(invalid.errors['users.0.name']).toBe('此项为必填')
+
+    wrapper.find('input').setValue('Ada')
+    await flushPromises()
+    const ok = await wrapper.vm.formRef!.validate()
+    expect(ok.valid).toBe(true)
+    expect(wrapper.vm.model.users[0]?.name).toBe('Ada')
+
+    await wrapper.find('.remove').trigger('click')
+    await flushPromises()
+    expect(wrapper.vm.model.users).toEqual([])
+    wrapper.unmount()
+  })
+
+  it('resolves list-relative dependencies and getFieldValue', async () => {
+    const Host = defineComponent({
+      components: { RsForm, RsFormItem, RsFormList, RsInput },
+      setup() {
+        const formRef = ref<InstanceType<typeof RsForm> | null>(null)
+        const model = ref({
+          users: [{ password: 'aa', confirm: 'bb' }],
+        })
+        return { formRef, model }
+      },
+      template: `
+        <RsForm ref="formRef" :model="model">
+          <RsFormList name="users">
+            <template #default="{ fields }">
+              <div v-for="field in fields" :key="field.key">
+                <RsFormItem :name="[field.name, 'password']">
+                  <RsInput />
+                </RsFormItem>
+                <RsFormItem
+                  :name="[field.name, 'confirm']"
+                  :dependencies="[[field.name, 'password']]"
+                  :rules="[{
+                    validator(value, ctx) {
+                      if (String(value) !== String(ctx.getFieldValue([field.name, 'password']))) {
+                        return '两次密码不一致'
+                      }
+                      return true
+                    }
+                  }]"
+                >
+                  <RsInput />
+                </RsFormItem>
+              </div>
+            </template>
+          </RsFormList>
+        </RsForm>
+      `,
+    })
+    const wrapper = mount(Host)
+    await flushPromises()
+    const invalid = await wrapper.vm.formRef!.validate()
+    expect(invalid.valid).toBe(false)
+    expect(invalid.errors['users.0.confirm']).toBe('两次密码不一致')
+
+    wrapper.vm.model.users[0]!.password = 'bb'
+    await flushPromises()
+    expect(wrapper.findAll('.rs-form-item__error').length).toBe(0)
+    wrapper.unmount()
+  })
+})

package/src/__tests__/RsInput.spec.ts

@@ -280,4 +280,97 @@ describe('RsInput', () => {
     })
     expect((wrapper.find('input').element as HTMLInputElement).value).toBe('256')
   })
+
+  it('places clear before custom suffix inside the affix', () => {
+    const wrapper = mount(RsInput, {
+      props: { modelValue: 'hub', clearable: true },
+      slots: { suffix: () => '选' },
+    })
+    const affix = wrapper.find('.rs-input-group__affix--suffix')
+    const children = [...affix.element.children] as HTMLElement[]
+    expect(children.map((el) => el.className)).toEqual([
+      'rs-input-group__action',
+      'rs-input-group__custom-suffix',
+    ])
+  })
+
+  it('renders addonAfterIcon as an owned addon button and emits addonAfterClick', async () => {
+    const wrapper = mount(RsInput, {
+      props: {
+        modelValue: 'hub',
+        clearable: true,
+        addonAfterIcon: 'ellipsis',
+        addonAfterIconLabel: '选择',
+      },
+    })
+    expect(wrapper.find('.rs-input-shell--combined').exists()).toBe(true)
+    expect(wrapper.find('.rs-input-addon--icon').exists()).toBe(true)
+    const button = wrapper.find('button.rs-input-addon__button')
+    expect(button.attributes('aria-label')).toBe('选择')
+    await button.trigger('click')
+    expect(wrapper.emitted('addonAfterClick')).toHaveLength(1)
+  })
+
+  it('prefers addonAfter content over addonAfterIcon', () => {
+    const wrapper = mount(RsInput, {
+      props: {
+        modelValue: '',
+        addonAfter: '.com',
+        addonAfterIcon: 'ellipsis',
+      },
+    })
+    expect(wrapper.find('.rs-input-addon--after').text()).toBe('.com')
+    expect(wrapper.find('button.rs-input-addon__button').exists()).toBe(false)
+  })
+
+  it('renders addonBefore and addonAfter as a combined shell', () => {
+    const wrapper = mount(RsInput, {
+      props: { modelValue: '', addonBefore: 'https://', addonAfter: '.com' },
+    })
+    expect(wrapper.find('.rs-input-shell--combined').exists()).toBe(true)
+    expect(wrapper.find('.rs-input-addon--before').text()).toBe('https://')
+    expect(wrapper.find('.rs-input-addon--after').text()).toBe('.com')
+    expect(wrapper.find('.rs-input-group--combined-before').exists()).toBe(true)
+    expect(wrapper.find('.rs-input-group--combined-after').exists()).toBe(true)
+  })
+
+  it('renders addonAfter slot as a combined shell', () => {
+    const wrapper = mount(RsInput, {
+      props: { modelValue: '' },
+      slots: { addonAfter: () => h('span', { class: 'slot-addon' }, '选') },
+    })
+    expect(wrapper.find('.rs-input-addon--after .slot-addon').text()).toBe('选')
+    expect(wrapper.find('.rs-input-group--combined-after').exists()).toBe(true)
+  })
+
+  it('does not emit pressEnter while IME is composing', async () => {
+    const wrapper = mount(RsInput, { props: { modelValue: '' } })
+    const input = wrapper.find('input')
+    await input.trigger('compositionstart')
+    await input.trigger('keydown', { key: 'Enter' })
+    expect(wrapper.emitted('pressEnter')).toBeFalsy()
+    await input.trigger('compositionend')
+    await input.trigger('keydown', { key: 'Enter' })
+    expect(wrapper.emitted('pressEnter')).toHaveLength(1)
+  })
+
+  it('does not emit validate while IME is composing', async () => {
+    const wrapper = mount(RsInput, {
+      props: {
+        modelValue: '',
+        required: true,
+        validateTrigger: 'input',
+      },
+    })
+    const input = wrapper.find('input')
+    await input.trigger('blur')
+    await input.trigger('compositionstart')
+    const before = wrapper.emitted('validate')?.length ?? 0
+    await input.trigger('input')
+    await flushPromises()
+    expect(wrapper.emitted('validate')?.length ?? 0).toBe(before)
+    await input.trigger('compositionend')
+    await flushPromises()
+    expect((wrapper.emitted('validate')?.length ?? 0)).toBeGreaterThan(before)
+  })
 })

package/src/__tests__/RsInputNumber.spec.ts

@@ -108,6 +108,39 @@ describe('RsInputNumber', () => {
     expect(state.value).toBe(5)
   })
 
+  it('ignores wheel when changeOnWheel is off', async () => {
+    const { wrapper, state } = mountNumber({ modelValue: 5, step: 1 })
+    const input = wrapper.find('input')
+    await input.trigger('focus')
+    await input.trigger('wheel', { deltaY: -100 })
+    expect(state.value).toBe(5)
+  })
+
+  it('steps on wheel when changeOnWheel is on and focused', async () => {
+    const { wrapper, state } = mountNumber({
+      modelValue: 5,
+      step: 1,
+      changeOnWheel: true,
+    })
+    const input = wrapper.find('input')
+    await input.trigger('focus')
+    await input.trigger('wheel', { deltaY: -100 })
+    expect(state.value).toBe(6)
+    await input.trigger('wheel', { deltaY: 100 })
+    expect(state.value).toBe(5)
+  })
+
+  it('ignores wheel when changeOnWheel is on but not focused', async () => {
+    const { wrapper, state } = mountNumber({
+      modelValue: 5,
+      step: 1,
+      changeOnWheel: true,
+    })
+    const input = wrapper.find('input')
+    await input.trigger('wheel', { deltaY: -100 })
+    expect(state.value).toBe(5)
+  })
+
   it('clears to null on empty blur', async () => {
     const { wrapper, state } = mountNumber({ modelValue: 3 })
     const input = wrapper.find('input')