diff --git a/packages/components/card/__tests__/__snapshots__/card.spec.ts.snap b/packages/components/card/__tests__/__snapshots__/card.spec.ts.snap index 4a013d2ea..8471ef064 100644 --- a/packages/components/card/__tests__/__snapshots__/card.spec.ts.snap +++ b/packages/components/card/__tests__/__snapshots__/card.spec.ts.snap @@ -8,5 +8,6 @@ exports[`Card > render work 1`] = `
Some Content
+ " `; diff --git a/packages/components/card/__tests__/__snapshots__/cardGrid.spec.ts.snap b/packages/components/card/__tests__/__snapshots__/cardGrid.spec.ts.snap index 63bfcd995..528c59f05 100644 --- a/packages/components/card/__tests__/__snapshots__/cardGrid.spec.ts.snap +++ b/packages/components/card/__tests__/__snapshots__/cardGrid.spec.ts.snap @@ -16,6 +16,7 @@ exports[`CardGrid > hoverable work 1`] = ` + " `; @@ -35,6 +36,7 @@ exports[`CardGrid > hoverable2 work 1`] = ` + " `; @@ -54,5 +56,6 @@ exports[`CardGrid > render work 1`] = ` + " `; diff --git a/packages/components/card/__tests__/card.spec.ts b/packages/components/card/__tests__/card.spec.ts index 526fe936c..3ee698233 100644 --- a/packages/components/card/__tests__/card.spec.ts +++ b/packages/components/card/__tests__/card.spec.ts @@ -88,6 +88,48 @@ describe('Card', () => { expect(wrapper.classes()).not.toContain('ix-card-has-shadow') }) + test('disabled work', async () => { + const wrapper = CardMount({ props: { disabled: true } }) + expect(wrapper.classes()).toContain('ix-card-disabled') + + await wrapper.setProps({ disabled: false }) + expect(wrapper.classes()).not.toContain('ix-card-disabled') + }) + + test('selectable work', async () => { + const wrapper = CardMount({ props: { selectable: true } }) + expect(wrapper.classes()).toContain('ix-card-selectable') + + await wrapper.setProps({ selectable: false }) + expect(wrapper.classes()).not.toContain('ix-card-selectable') + }) + + test('v-model:selected work', async () => { + const onUpdateSelected = vi.fn() + const wrapper = CardMount({ props: { selectable: true, selected: true, 'onUpdate:selected': onUpdateSelected } }) + expect(wrapper.classes()).toContain('ix-card-selected') + + await wrapper.setProps({ selected: false }) + expect(wrapper.classes()).not.toContain('ix-card-selected') + + await wrapper.trigger('click') + expect(onUpdateSelected).toBeCalledWith(true) + }) + + test('onChange work', async () => { + const handleSelected = vi.fn() + const wrapper = CardMount({ + props: { + onSelectedChange: handleSelected, + selectable: true, + selected: false, + }, + }) + + await wrapper.trigger('click') + expect(handleSelected).toBeCalledWith(true) + }) + test('loading work', async () => { const wrapper = CardMount({ props: { loading: true } }) expect(wrapper.find('.ix-card-loading').exists()).toBe(true) diff --git a/packages/components/card/demo/Disable.md b/packages/components/card/demo/Disable.md new file mode 100644 index 000000000..dedd6c777 --- /dev/null +++ b/packages/components/card/demo/Disable.md @@ -0,0 +1,14 @@ +--- +order: 7 +title: + zh: 禁用 + en: Disabled State +--- + +## zh + +如果 `disabled` 属性为 `true`,卡片为禁用状态。 + +## en + +If the `disabled` property is `true`, the card is disabled. diff --git a/packages/components/card/demo/Disable.vue b/packages/components/card/demo/Disable.vue new file mode 100644 index 000000000..454146f40 --- /dev/null +++ b/packages/components/card/demo/Disable.vue @@ -0,0 +1,11 @@ + +Card content
+Card content
+Card content
+Card content
+Card content
+Card content
+Card content
+Card content
+Card content
+Card content
+Card content
+Card content
+