github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Refactor(demo): change options to composition api (#6499) 

* feat(demo): A-B

* feat(demo): update B-checkbox

* feat(demo): update CheckBox -DatePicker

* feat(demo): update DatePicker - Form

* feat(demo): update Form - List

* feat(demo): update  List-pagination

* feat(demo): update  List - skeleton

* feat(demo): update  skeleton - switch

* feat(demo): update  skeleton - switch

* feat(demo): update   switch - upload

* feat(demo): update  watermark

* fix(demo): del hashId
pull/6518/head
Cherry7 2023-04-28 14:08:21 +08:00 committed by GitHub
parent 063c06f9c6
commit 9be58078d2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
599 changed files with 15576 additions and 28709 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.jest.js
View File

@ -18,6 +18,7 @@ function getTestRegex(libDir) {
module.exports = {
verbose: true,
setupFiles: ['./tests/setup.js'],
setupFilesAfterEnv: ['./tests/setupAfterEnv.ts'],
moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx', 'json', 'vue', 'md', 'jpg'],
modulePathIgnorePatterns: ['/_site/'],
testPathIgnorePatterns: testPathIgnorePatterns,

6
components/affix/__tests__/__snapshots__/demo.test.js.snap
View File

@ -2,12 +2,14 @@
exports[`renders ./components/affix/demo/basic.vue correctly 1`] = `
<div>
<!---->
<div class=""><button class="ant-btn ant-btn-primary" type="button">
<!----><span>Affix top</span>
</button></div>
</div>
<br>
<div>
<!---->
<div class=""><button class="ant-btn ant-btn-primary" type="button">
<!----><span>Affix bottom</span>
</button></div>
@ -16,7 +18,8 @@ exports[`renders ./components/affix/demo/basic.vue correctly 1`] = `
exports[`renders ./components/affix/demo/on-change.vue correctly 1`] = `
<div>
<div class=""><button class="ant-btn" type="button">
<!---->
<div class=""><button class="ant-btn ant-btn-default" type="button">
<!----><span>120px to affix top</span>
</button></div>
</div>
@ -26,6 +29,7 @@ exports[`renders ./components/affix/demo/target.vue correctly 1`] = `
<div id="components-affix-demo-target" class="scrollable-container">
<div class="background">
<div>
<!---->
<div class=""><button class="ant-btn ant-btn-primary" type="button">
<!----><span>Fixed at the top of container</span>
</button></div>

16
components/affix/demo/basic.vue
View File

@ -26,16 +26,8 @@ The simplest usage.
</a-affix>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const top = ref<number>(10);
const bottom = ref<number>(10);
return {
top,
bottom,
};
},
});
<script lang="ts" setup>
import { ref } from 'vue';
const top = ref<number>(10);
const bottom = ref<number>(10);
</script>

17
components/affix/demo/on-change.vue
View File

@ -21,17 +21,8 @@ Callback with affixed state.
<a-button>120px to affix top</a-button>
</a-affix>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
setup() {
const change = (affixed: boolean) => {
console.log(affixed);
};
return {
change,
};
},
});
<script lang="ts" setup>
const change = (affixed: boolean) => {
console.log(affixed);
};
</script>

17
components/affix/demo/target.vue
View File

@ -25,23 +25,16 @@ Set a `target` for 'Affix', which is listen to scroll event of target element (d
</div>
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const containerRef = ref();
return {
containerRef,
};
},
});
<script lang="ts" setup>
import { ref } from 'vue';
const containerRef = ref();
</script>
<style>
<style scoped>
#components-affix-demo-target.scrollable-container {
height: 100px;
overflow-y: scroll;
}
#components-affix-demo-target .background {
padding-top: 60px;
height: 300px;

114
components/alert/__tests__/__snapshots__/demo.test.js.snap
View File

@ -1,5 +1,75 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders ./components/alert/demo/action.vue correctly 1`] = `
<div style="width: 100%;" class="ant-space ant-space-vertical">
<div class="ant-space-item" style="margin-bottom: 8px;">
<div role="alert" class="ant-alert ant-alert-success ant-alert-closable" data-show="true"><span role="img" aria-label="check-circle" class="anticon anticon-check-circle ant-alert-icon"><svg focusable="false" class="" data-icon="check-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"></path></svg></span>
<div class="ant-alert-content">
<div class="ant-alert-message">Success Tips</div>
<!---->
</div>
<div class="ant-alert-action"><button class="ant-btn ant-btn-text ant-btn-sm" type="button">
<!----><span>UNDO</span>
</button></div><button type="button" class="ant-alert-close-icon" tabindex="0"><span role="img" aria-label="close" class="anticon anticon-close"><svg focusable="false" class="" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></span></button>
</div>
</div>
<!---->
<div class="ant-space-item" style="margin-bottom: 8px;">
<div role="alert" class="ant-alert ant-alert-error ant-alert-with-description" data-show="true"><span role="img" aria-label="close-circle" class="anticon anticon-close-circle ant-alert-icon"><svg focusable="false" class="" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M685.4 354.8c0-4.4-3.6-8-8-8l-66 .3L512 465.6l-99.3-118.4-66.1-.3c-4.4 0-8 3.5-8 8 0 1.9.7 3.7 1.9 5.2l130.1 155L340.5 670a8.32 8.32 0 00-1.9 5.2c0 4.4 3.6 8 8 8l66.1-.3L512 564.4l99.3 118.4 66 .3c4.4 0 8-3.5 8-8 0-1.9-.7-3.7-1.9-5.2L553.5 515l130.1-155c1.2-1.4 1.8-3.3 1.8-5.2z"></path><path d="M512 65C264.6 65 64 265.6 64 513s200.6 448 448 448 448-200.6 448-448S759.4 65 512 65zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path></svg></span>
<div class="ant-alert-content">
<div class="ant-alert-message">Error Text</div>
<div class="ant-alert-description">Error Description Error Description Error Description Error Description</div>
</div>
<div class="ant-alert-action"><button class="ant-btn ant-btn-default ant-btn-sm ant-btn-dangerous" type="button">
<!----><span>Detail</span>
</button></div>
<!---->
</div>
</div>
<!---->
<div class="ant-space-item" style="margin-bottom: 8px;">
<div role="alert" class="ant-alert ant-alert-warning ant-alert-no-icon ant-alert-closable" data-show="true">
<!---->
<div class="ant-alert-content">
<div class="ant-alert-message">Warning Text</div>
<!---->
</div>
<div class="ant-alert-action">
<div class="ant-space ant-space-horizontal ant-space-align-center">
<div class="ant-space-item"><button class="ant-btn ant-btn-ghost ant-btn-sm" type="button">
<!----><span>Done</span>
</button></div>
<!---->
</div>
</div><button type="button" class="ant-alert-close-icon" tabindex="0"><span role="img" aria-label="close" class="anticon anticon-close"><svg focusable="false" class="" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></span></button>
</div>
</div>
<!---->
<div class="ant-space-item">
<div role="alert" class="ant-alert ant-alert-info ant-alert-with-description ant-alert-no-icon ant-alert-closable" data-show="true">
<!---->
<div class="ant-alert-content">
<div class="ant-alert-message">Info Text</div>
<div class="ant-alert-description">Info Description Info Description Info Description Info Description</div>
</div>
<div class="ant-alert-action">
<div class="ant-space ant-space-vertical">
<div class="ant-space-item" style="margin-bottom: 8px;"><button class="ant-btn ant-btn-primary ant-btn-sm" type="button">
<!----><span>Accept</span>
</button></div>
<!---->
<div class="ant-space-item"><button class="ant-btn ant-btn-ghost ant-btn-sm ant-btn-dangerous" type="button">
<!----><span>Decline</span>
</button></div>
<!---->
</div>
</div><button type="button" class="ant-alert-close-icon" tabindex="0"><span role="img" aria-label="close" class="anticon anticon-close"><svg focusable="false" class="" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></span></button>
</div>
</div>
<!---->
</div>
`;
exports[`renders ./components/alert/demo/banner.vue correctly 1`] = `
<div role="alert" class="ant-alert ant-alert-warning ant-alert-banner" data-show="true"><span role="img" aria-label="exclamation-circle" class="anticon anticon-exclamation-circle ant-alert-icon"><svg focusable="false" class="" data-icon="exclamation-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"></path></svg></span>
<div class="ant-alert-content">
@ -7,13 +77,15 @@ exports[`renders ./components/alert/demo/banner.vue correctly 1`] = `
<!---->
</div>
<!---->
<!---->
</div>
<br>
<div role="alert" class="ant-alert ant-alert-warning ant-alert-banner ant-alert-closable" data-show="true"><span role="img" aria-label="exclamation-circle" class="anticon anticon-exclamation-circle ant-alert-icon"><svg focusable="false" class="" data-icon="exclamation-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"></path></svg></span>
<div class="ant-alert-content">
<div class="ant-alert-message">Very long warning text warning text text text text text text text</div>
<!---->
</div><button type="button" class="ant-alert-close-icon" tabindex="0"><span role="img" aria-label="close" class="anticon anticon-close"><svg focusable="false" class="" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></span></button>
</div>
<!----><button type="button" class="ant-alert-close-icon" tabindex="0"><span role="img" aria-label="close" class="anticon anticon-close"><svg focusable="false" class="" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></span></button>
</div>
<br>
<div role="alert" class="ant-alert ant-alert-warning ant-alert-no-icon ant-alert-banner" data-show="true">
@ -23,6 +95,7 @@ exports[`renders ./components/alert/demo/banner.vue correctly 1`] = `
<!---->
</div>
<!---->
<!---->
</div>
<br>
<div role="alert" class="ant-alert ant-alert-error ant-alert-banner" data-show="true"><span role="img" aria-label="close-circle" class="anticon anticon-close-circle ant-alert-icon"><svg focusable="false" class="" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></span>
@ -31,6 +104,7 @@ exports[`renders ./components/alert/demo/banner.vue correctly 1`] = `
<!---->
</div>
<!---->
<!---->
</div>
`;
@ -42,6 +116,7 @@ exports[`renders ./components/alert/demo/basic.vue correctly 1`] = `
<!---->
</div>
<!---->
<!---->
</div>
`;
@ -51,14 +126,16 @@ exports[`renders ./components/alert/demo/closable.vue correctly 1`] = `
<div class="ant-alert-content">
<div class="ant-alert-message">Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text</div>
<!---->
</div><button type="button" class="ant-alert-close-icon" tabindex="0"><span role="img" aria-label="close" class="anticon anticon-close"><svg focusable="false" class="" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></span></button>
</div>
<!----><button type="button" class="ant-alert-close-icon" tabindex="0"><span role="img" aria-label="close" class="anticon anticon-close"><svg focusable="false" class="" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></span></button>
</div>
<div role="alert" class="ant-alert ant-alert-error ant-alert-with-description ant-alert-no-icon ant-alert-closable" data-show="true">
<!---->
<div class="ant-alert-content">
<div class="ant-alert-message">Error Text</div>
<div class="ant-alert-description">Error Description Error Description Error Description Error Description Error Description Error Description</div>
</div><button type="button" class="ant-alert-close-icon" tabindex="0"><span role="img" aria-label="close" class="anticon anticon-close"><svg focusable="false" class="" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></span></button>
</div>
<!----><button type="button" class="ant-alert-close-icon" tabindex="0"><span role="img" aria-label="close" class="anticon anticon-close"><svg focusable="false" class="" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></span></button>
</div>
`;
@ -68,7 +145,8 @@ exports[`renders ./components/alert/demo/close-text.vue correctly 1`] = `
<div class="ant-alert-content">
<div class="ant-alert-message">Info Text</div>
<!---->
</div><button type="button" class="ant-alert-close-icon" tabindex="0"><span class="ant-alert-close-text">Close Now</span></button>
</div>
<!----><button type="button" class="ant-alert-close-icon" tabindex="0"><span class="ant-alert-close-text">Close Now</span></button>
</div>
`;
@ -80,6 +158,7 @@ exports[`renders ./components/alert/demo/custom-icon.vue correctly 1`] = `
<!---->
</div>
<!---->
<!---->
</div>
<div role="alert" class="ant-alert ant-alert-success" data-show="true"><span role="img" aria-label="smile" class="anticon anticon-smile ant-alert-icon"><svg focusable="false" class="" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"></path></svg></span>
<div class="ant-alert-content">
@ -87,6 +166,7 @@ exports[`renders ./components/alert/demo/custom-icon.vue correctly 1`] = `
<!---->
</div>
<!---->
<!---->
</div>
<div role="alert" class="ant-alert ant-alert-info" data-show="true"><span role="img" aria-label="smile" class="anticon anticon-smile ant-alert-icon"><svg focusable="false" class="" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"></path></svg></span>
<div class="ant-alert-content">
@ -94,6 +174,7 @@ exports[`renders ./components/alert/demo/custom-icon.vue correctly 1`] = `
<!---->
</div>
<!---->
<!---->
</div>
<div role="alert" class="ant-alert ant-alert-warning" data-show="true"><span role="img" aria-label="smile" class="anticon anticon-smile ant-alert-icon"><svg focusable="false" class="" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"></path></svg></span>
<div class="ant-alert-content">
@ -101,6 +182,7 @@ exports[`renders ./components/alert/demo/custom-icon.vue correctly 1`] = `
<!---->
</div>
<!---->
<!---->
</div>
<div role="alert" class="ant-alert ant-alert-error" data-show="true"><span role="img" aria-label="smile" class="anticon anticon-smile ant-alert-icon"><svg focusable="false" class="" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"></path></svg></span>
<div class="ant-alert-content">
@ -108,6 +190,7 @@ exports[`renders ./components/alert/demo/custom-icon.vue correctly 1`] = `
<!---->
</div>
<!---->
<!---->
</div>
<div role="alert" class="ant-alert ant-alert-success ant-alert-with-description" data-show="true"><span role="img" aria-label="smile" class="anticon anticon-smile ant-alert-icon"><svg focusable="false" class="" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"></path></svg></span>
<div class="ant-alert-content">
@ -115,6 +198,7 @@ exports[`renders ./components/alert/demo/custom-icon.vue correctly 1`] = `
<div class="ant-alert-description">Detailed description and advices about successful copywriting.</div>
</div>
<!---->
<!---->
</div>
<div role="alert" class="ant-alert ant-alert-info ant-alert-with-description" data-show="true"><span role="img" aria-label="smile" class="anticon anticon-smile ant-alert-icon"><svg focusable="false" class="" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"></path></svg></span>
<div class="ant-alert-content">
@ -122,6 +206,7 @@ exports[`renders ./components/alert/demo/custom-icon.vue correctly 1`] = `
<div class="ant-alert-description">Additional description and informations about copywriting.</div>
</div>
<!---->
<!---->
</div>
<div role="alert" class="ant-alert ant-alert-warning ant-alert-with-description" data-show="true"><span role="img" aria-label="smile" class="anticon anticon-smile ant-alert-icon"><svg focusable="false" class="" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"></path></svg></span>
<div class="ant-alert-content">
@ -129,6 +214,7 @@ exports[`renders ./components/alert/demo/custom-icon.vue correctly 1`] = `
<div class="ant-alert-description">This is a warning notice about copywriting.</div>
</div>
<!---->
<!---->
</div>
<div role="alert" class="ant-alert ant-alert-error ant-alert-with-description" data-show="true"><span role="img" aria-label="smile" class="anticon anticon-smile ant-alert-icon"><svg focusable="false" class="" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"></path></svg></span>
<div class="ant-alert-content">
@ -136,6 +222,7 @@ exports[`renders ./components/alert/demo/custom-icon.vue correctly 1`] = `
<div class="ant-alert-description">This is an error message about copywriting.</div>
</div>
<!---->
<!---->
</div>
`;
@ -149,6 +236,7 @@ exports[`renders ./components/alert/demo/description.vue correctly 1`] = `
</div>
</div>
<!---->
<!---->
</div>
<div role="alert" class="ant-alert ant-alert-info ant-alert-with-description ant-alert-no-icon" data-show="true">
<!---->
@ -157,6 +245,7 @@ exports[`renders ./components/alert/demo/description.vue correctly 1`] = `
<div class="ant-alert-description">Info Description Info Description Info Description Info Description</div>
</div>
<!---->
<!---->
</div>
<div role="alert" class="ant-alert ant-alert-warning ant-alert-with-description ant-alert-no-icon" data-show="true">
<!---->
@ -165,6 +254,7 @@ exports[`renders ./components/alert/demo/description.vue correctly 1`] = `
<div class="ant-alert-description">Warning Description Warning Description Warning Description Warning Description</div>
</div>
<!---->
<!---->
</div>
<div role="alert" class="ant-alert ant-alert-error ant-alert-with-description ant-alert-no-icon" data-show="true">
<!---->
@ -173,6 +263,7 @@ exports[`renders ./components/alert/demo/description.vue correctly 1`] = `
<div class="ant-alert-description">Error Description Error Description Error Description Error Description</div>
</div>
<!---->
<!---->
</div>
`;
@ -183,6 +274,7 @@ exports[`renders ./components/alert/demo/icon.vue correctly 1`] = `
<!---->
</div>
<!---->
<!---->
</div>
<div role="alert" class="ant-alert ant-alert-info" data-show="true"><span role="img" aria-label="info-circle" class="anticon anticon-info-circle ant-alert-icon"><svg focusable="false" class="" data-icon="info-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm32 664c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V456c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272zm-32-344a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"></path></svg></span>
<div class="ant-alert-content">
@ -190,6 +282,7 @@ exports[`renders ./components/alert/demo/icon.vue correctly 1`] = `
<!---->
</div>
<!---->
<!---->
</div>
<div role="alert" class="ant-alert ant-alert-warning" data-show="true"><span role="img" aria-label="exclamation-circle" class="anticon anticon-exclamation-circle ant-alert-icon"><svg focusable="false" class="" data-icon="exclamation-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"></path></svg></span>
<div class="ant-alert-content">
@ -197,6 +290,7 @@ exports[`renders ./components/alert/demo/icon.vue correctly 1`] = `
<!---->
</div>
<!---->
<!---->
</div>
<div role="alert" class="ant-alert ant-alert-error" data-show="true"><span role="img" aria-label="close-circle" class="anticon anticon-close-circle ant-alert-icon"><svg focusable="false" class="" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></span>
<div class="ant-alert-content">
@ -204,6 +298,7 @@ exports[`renders ./components/alert/demo/icon.vue correctly 1`] = `
<!---->
</div>
<!---->
<!---->
</div>
<div role="alert" class="ant-alert ant-alert-success ant-alert-with-description" data-show="true"><span role="img" aria-label="check-circle" class="anticon anticon-check-circle ant-alert-icon"><svg focusable="false" class="" data-icon="check-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M699 353h-46.9c-10.2 0-19.9 4.9-25.9 13.3L469 584.3l-71.2-98.8c-6-8.3-15.6-13.3-25.9-13.3H325c-6.5 0-10.3 7.4-6.5 12.7l124.6 172.8a31.8 31.8 0 0051.7 0l210.6-292c3.9-5.3.1-12.7-6.4-12.7z"></path><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path></svg></span>
<div class="ant-alert-content">
@ -211,6 +306,7 @@ exports[`renders ./components/alert/demo/icon.vue correctly 1`] = `
<div class="ant-alert-description">Detailed description and advices about successful copywriting.</div>
</div>
<!---->
<!---->
</div>
<div role="alert" class="ant-alert ant-alert-info ant-alert-with-description" data-show="true"><span role="img" aria-label="info-circle" class="anticon anticon-info-circle ant-alert-icon"><svg focusable="false" class="" data-icon="info-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"></path></svg></span>
<div class="ant-alert-content">
@ -218,6 +314,7 @@ exports[`renders ./components/alert/demo/icon.vue correctly 1`] = `
<div class="ant-alert-description">Additional description and informations about copywriting.</div>
</div>
<!---->
<!---->
</div>
<div role="alert" class="ant-alert ant-alert-warning ant-alert-with-description" data-show="true"><span role="img" aria-label="exclamation-circle" class="anticon anticon-exclamation-circle ant-alert-icon"><svg focusable="false" class="" data-icon="exclamation-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M464 688a48 48 0 1096 0 48 48 0 10-96 0zm24-112h48c4.4 0 8-3.6 8-8V296c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8z"></path></svg></span>
<div class="ant-alert-content">
@ -225,6 +322,7 @@ exports[`renders ./components/alert/demo/icon.vue correctly 1`] = `
<div class="ant-alert-description">This is a warning notice about copywriting.</div>
</div>
<!---->
<!---->
</div>
<div role="alert" class="ant-alert ant-alert-error ant-alert-with-description" data-show="true"><span role="img" aria-label="close-circle" class="anticon anticon-close-circle ant-alert-icon"><svg focusable="false" class="" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M685.4 354.8c0-4.4-3.6-8-8-8l-66 .3L512 465.6l-99.3-118.4-66.1-.3c-4.4 0-8 3.5-8 8 0 1.9.7 3.7 1.9 5.2l130.1 155L340.5 670a8.32 8.32 0 00-1.9 5.2c0 4.4 3.6 8 8 8l66.1-.3L512 564.4l99.3 118.4 66 .3c4.4 0 8-3.5 8-8 0-1.9-.7-3.7-1.9-5.2L553.5 515l130.1-155c1.2-1.4 1.8-3.3 1.8-5.2z"></path><path d="M512 65C264.6 65 64 265.6 64 513s200.6 448 448 448 448-200.6 448-448S759.4 65 512 65zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path></svg></span>
<div class="ant-alert-content">
@ -232,6 +330,7 @@ exports[`renders ./components/alert/demo/icon.vue correctly 1`] = `
<div class="ant-alert-description">This is an error message about copywriting.</div>
</div>
<!---->
<!---->
</div>
`;
@ -241,7 +340,8 @@ exports[`renders ./components/alert/demo/smooth-closed.vue correctly 1`] = `
<div class="ant-alert-content">
<div class="ant-alert-message">Alert Message Text</div>
<!---->
</div><button type="button" class="ant-alert-close-icon" tabindex="0"><span role="img" aria-label="close" class="anticon anticon-close"><svg focusable="false" class="" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></span></button>
</div>
<!----><button type="button" class="ant-alert-close-icon" tabindex="0"><span role="img" aria-label="close" class="anticon anticon-close"><svg focusable="false" class="" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></span></button>
</div>
`;
@ -253,6 +353,7 @@ exports[`renders ./components/alert/demo/style.vue correctly 1`] = `
<!---->
</div>
<!---->
<!---->
</div>
<div role="alert" class="ant-alert ant-alert-info ant-alert-no-icon" data-show="true">
<!---->
@ -261,6 +362,7 @@ exports[`renders ./components/alert/demo/style.vue correctly 1`] = `
<!---->
</div>
<!---->
<!---->
</div>
<div role="alert" class="ant-alert ant-alert-warning ant-alert-no-icon" data-show="true">
<!---->
@ -269,6 +371,7 @@ exports[`renders ./components/alert/demo/style.vue correctly 1`] = `
<!---->
</div>
<!---->
<!---->
</div>
<div role="alert" class="ant-alert ant-alert-error ant-alert-no-icon" data-show="true">
<!---->
@ -277,5 +380,6 @@ exports[`renders ./components/alert/demo/style.vue correctly 1`] = `
<!---->
</div>
<!---->
<!---->
</div>
`;

16
components/alert/demo/closable.vue
View File

@ -32,16 +32,8 @@ To show close button.
/>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
setup() {
const onClose = (e: MouseEvent) => {
console.log(e, 'I was closed.');
};
return {
onClose,
};
},
});
<script lang="ts" setup>
const onClose = (e: MouseEvent) => {
console.log(e, 'I was closed.');
};
</script>

8
components/alert/demo/custom-icon.vue
View File

@ -66,12 +66,6 @@ Custom Icon make information more clear and more friendly.
</a-alert>
</template>
<script lang="ts">
<script lang="ts" setup>
import { SmileOutlined } from '@ant-design/icons-vue';
import { defineComponent } from 'vue';
export default defineComponent({
components: {
SmileOutlined,
},
});
</script>

2
components/alert/demo/index.vue
View File

@ -46,7 +46,7 @@ export default defineComponent({
},
});
</script>
<style>
<style scoped>
[id^='components-alert-demo'] .ant-alert {
margin-bottom: 16px;
}

20
components/alert/demo/smooth-closed.vue
View File

@ -25,18 +25,10 @@ Smoothly and unaffectedly unmount Alert.
:after-close="handleClose"
/>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const visible = ref<boolean>(true);
const handleClose = () => {
visible.value = false;
};
return {
visible,
handleClose,
};
},
});
<script lang="ts" setup>
import { ref } from 'vue';
const visible = ref<boolean>(true);
const handleClose = () => {
visible.value = false;
};
</script>

42
components/anchor/__tests__/__snapshots__/demo.test.js.snap
View File

@ -3,10 +3,10 @@
exports[`renders ./components/anchor/demo/basic.vue correctly 1`] = `
<div>
<!---->
<div class="css-dev-only-do-not-override-1tii49m">
<div class="css-dev-only-do-not-override-1tii49m ant-anchor-wrapper" style="max-height: 100vh;">
<div class="">
<div class="ant-anchor-wrapper" style="max-height: 100vh;">
<div class="ant-anchor"><span class="ant-anchor-ink"></span>
<div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#part-1" title="Part 1">Part 1</a>
<div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#part-1" title=""><span style="color: red;">Part 1</span></a>
<!---->
</div>
<div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#part-2" title="Part 2">Part 2</a>
@ -22,7 +22,7 @@ exports[`renders ./components/anchor/demo/basic.vue correctly 1`] = `
`;
exports[`renders ./components/anchor/demo/customizeHighlight.vue correctly 1`] = `
<div class="css-dev-only-do-not-override-1tii49m ant-anchor-wrapper" style="max-height: 100vh;">
<div class="ant-anchor-wrapper" style="max-height: 100vh;">
<div class="ant-anchor ant-anchor-fixed"><span class="ant-anchor-ink"></span>
<div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#components-anchor-demo-basic" title="Basic demo">Basic demo</a>
<!---->
@ -31,10 +31,10 @@ exports[`renders ./components/anchor/demo/customizeHighlight.vue correctly 1`] =
<!---->
</div>
<div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#api" title="API">API</a>
<div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#Anchor-Props" title="Anchor Props">Anchor Props</a>
<div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#anchor-props" title="Anchor Props">Anchor Props</a>
<!---->
</div>
<div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#Link-Props" title="Link Props">Link Props</a>
<div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#link-props" title="Link Props">Link Props</a>
<!---->
</div>
</div>
@ -46,8 +46,8 @@ exports[`renders ./components/anchor/demo/horizontal.vue correctly 1`] = `
<div>
<div>
<!---->
<div class="css-dev-only-do-not-override-1tii49m">
<div class="css-dev-only-do-not-override-1tii49m ant-anchor-wrapper ant-anchor-wrapper-horizontal" style="max-height: 100vh;">
<div class="">
<div class="ant-anchor-wrapper ant-anchor-wrapper-horizontal" style="max-height: 100vh;">
<div class="ant-anchor"><span class="ant-anchor-ink"></span>
<div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#horizontally-part-1" title="Part 1">Part 1</a>
<!---->
@ -75,7 +75,7 @@ exports[`renders ./components/anchor/demo/horizontal.vue correctly 1`] = `
`;
exports[`renders ./components/anchor/demo/onChange.vue correctly 1`] = `
<div class="css-dev-only-do-not-override-1tii49m ant-anchor-wrapper" style="max-height: 100vh;">
<div class="ant-anchor-wrapper" style="max-height: 100vh;">
<div class="ant-anchor ant-anchor-fixed"><span class="ant-anchor-ink"></span>
<div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#components-anchor-demo-basic" title="Basic demo">Basic demo</a>
<!---->
@ -84,10 +84,10 @@ exports[`renders ./components/anchor/demo/onChange.vue correctly 1`] = `
<!---->
</div>
<div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#api" title="API">API</a>
<div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#Anchor-Props" title="Anchor Props">Anchor Props</a>
<div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#anchor-props" title="Anchor Props">Anchor Props</a>
<!---->
</div>
<div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#Link-Props" title="Link Props">Link Props</a>
<div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#link-props" title="Link Props">Link Props</a>
<!---->
</div>
</div>
@ -96,7 +96,7 @@ exports[`renders ./components/anchor/demo/onChange.vue correctly 1`] = `
`;
exports[`renders ./components/anchor/demo/onClick.vue correctly 1`] = `
<div class="css-dev-only-do-not-override-1tii49m ant-anchor-wrapper" style="max-height: 100vh;">
<div class="ant-anchor-wrapper" style="max-height: 100vh;">
<div class="ant-anchor ant-anchor-fixed"><span class="ant-anchor-ink"></span>
<div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#components-anchor-demo-basic" title="Basic demo">Basic demo</a>
<!---->
@ -105,10 +105,10 @@ exports[`renders ./components/anchor/demo/onClick.vue correctly 1`] = `
<!---->
</div>
<div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#api" title="API">API</a>
<div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#Anchor-Props" title="Anchor Props">Anchor Props</a>
<div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#anchor-props" title="Anchor Props">Anchor Props</a>
<!---->
</div>
<div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#Link-Props" title="Link Props">Link Props</a>
<div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#link-props" title="Link Props">Link Props</a>
<!---->
</div>
</div>
@ -117,7 +117,7 @@ exports[`renders ./components/anchor/demo/onClick.vue correctly 1`] = `
`;
exports[`renders ./components/anchor/demo/static.vue correctly 1`] = `
<div class="css-dev-only-do-not-override-1tii49m ant-anchor-wrapper" style="max-height: 100vh;">
<div class="ant-anchor-wrapper" style="max-height: 100vh;">
<div class="ant-anchor ant-anchor-fixed"><span class="ant-anchor-ink"></span>
<div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#components-anchor-demo-basic" title="Basic demo">Basic demo</a>
<!---->
@ -126,10 +126,10 @@ exports[`renders ./components/anchor/demo/static.vue correctly 1`] = `
<!---->
</div>
<div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#api" title="API">API</a>
<div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#Anchor-Props" title="Anchor Props">Anchor Props</a>
<div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#anchor-props" title="Anchor Props">Anchor Props</a>
<!---->
</div>
<div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#Link-Props" title="Link Props">Link Props</a>
<div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#link-props" title="Link Props">Link Props</a>
<!---->
</div>
</div>
@ -140,8 +140,8 @@ exports[`renders ./components/anchor/demo/static.vue correctly 1`] = `
exports[`renders ./components/anchor/demo/targetOffset.vue correctly 1`] = `
<div>
<!---->
<div class="css-dev-only-do-not-override-1tii49m">
<div class="css-dev-only-do-not-override-1tii49m ant-anchor-wrapper" style="max-height: 100vh;">
<div class="">
<div class="ant-anchor-wrapper" style="max-height: 100vh;">
<div class="ant-anchor"><span class="ant-anchor-ink"></span>
<div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#components-anchor-demo-basic" title="Basic demo">Basic demo</a>
<!---->
@ -150,10 +150,10 @@ exports[`renders ./components/anchor/demo/targetOffset.vue correctly 1`] = `
<!---->
</div>
<div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#api" title="API">API</a>
<div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#Anchor-Props" title="Anchor Props">Anchor Props</a>
<div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#anchor-props" title="Anchor Props">Anchor Props</a>
<!---->
</div>
<div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#Link-Props" title="Link Props">Link Props</a>
<div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#link-props" title="Link Props">Link Props</a>
<!---->
</div>
</div>

16
components/anchor/demo/basic.vue
View File

@ -37,18 +37,6 @@ The simplest usage.
/>
</template>
<script lang="ts">
import { defineComponent, h } from 'vue';
export default defineComponent({
setup() {
const onChange = (link: string) => {
console.log('Anchor:OnChange', link);
};
return {
onChange,
h,
};
},
});
<script lang="ts" setup>
import { h } from 'vue';
</script>

17
components/anchor/demo/customizeHighlight.vue
View File

@ -51,17 +51,8 @@ Customize the anchor highlight.
></a-anchor>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
setup() {
const getCurrentAnchor = () => {
return '#components-anchor-demo-static';
};
return {
getCurrentAnchor,
};
},
});
<script lang="ts" setup>
const getCurrentAnchor = () => {
return '#components-anchor-demo-static';
};
</script>

17
components/anchor/demo/onChange.vue
View File

@ -51,17 +51,8 @@ Listening for anchor link change.
></a-anchor>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
setup() {
const onChange = (link: string) => {
console.log('Anchor:OnChange', link);
};
return {
onChange,
};
},
});
<script lang="ts" setup>
const onChange = (link: string) => {
console.log('Anchor:OnChange', link);
};
</script>

19
components/anchor/demo/onClick.vue
View File

@ -51,19 +51,10 @@ Clicking on an anchor does not record history.
></a-anchor>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
<script lang="ts" setup>
import type { AnchorProps } from 'ant-design-vue';
export default defineComponent({
setup() {
const handleClick: AnchorProps['onClick'] = (e, link) => {
e.preventDefault();
console.log(link);
};
return {
handleClick,
};
},
});
const handleClick: AnchorProps['onClick'] = (e, link) => {
e.preventDefault();
console.log(link);
};
</script>

18
components/anchor/demo/targetOffset.vue
View File

@ -50,18 +50,10 @@ Anchor target scroll to screen center.
></a-anchor>
</template>
<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue';
export default defineComponent({
setup() {
const targetOffset = ref<number | undefined>(undefined);
onMounted(() => {
targetOffset.value = window.innerHeight / 2;
});
return {
targetOffset,
};
},
<script lang="ts" setup>
import { onMounted, ref } from 'vue';
const targetOffset = ref<number | undefined>(undefined);
onMounted(() => {
targetOffset.value = window.innerHeight / 2;
});
</script>

12
components/auto-complete/__tests__/__snapshots__/demo.test.js.snap
View File

@ -14,10 +14,10 @@ exports[`renders ./components/auto-complete/demo/basic.vue correctly 1`] = `
exports[`renders ./components/auto-complete/demo/certain-category.vue correctly 1`] = `
<div class="certain-category-search-wrapper" style="width: 250px;">
<div class="ant-select certain-category-search ant-select-show-search ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search" style="width: 250px;">
<div popupclassname="certain-category-search-dropdown" class="ant-select certain-category-search ant-select-show-search ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search" style="width: 250px;">
<!---->
<!---->
<div class="ant-select-selector"><span class="ant-select-selection-search"><span class="ant-input-group-wrapper ant-input-group-wrapper-lg ant-input-search ant-input-search-large ant-select-selection-search-input"><span class="ant-input-wrapper ant-input-group"><!----><input placeholder="input here" id="rc_select_TEST_OR_SSR" autocomplete="off" type="search" class="ant-input ant-input-lg" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" aria-activedescendant="rc_select_TEST_OR_SSR_list_0"><span class="ant-input-group-addon"><button class="ant-btn ant-btn-lg ant-input-search-button ant-btn-icon-only" type="button"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span></button></span></span></span></span>
<div class="ant-select-selector"><span class="ant-select-selection-search"><span class="ant-input-group-wrapper ant-input-search ant-input-search-large ant-select-selection-search-input ant-input-group-wrapper-lg"><span class="ant-input-wrapper ant-input-group"><!----><input placeholder="input here" autocomplete="off" id="rc_select_TEST_OR_SSR" type="search" class="ant-input ant-input-lg" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" aria-activedescendant="rc_select_TEST_OR_SSR_list_0"><span class="ant-input-group-addon"><button class="ant-btn ant-btn-default ant-btn-lg ant-input-search-button ant-btn-icon-only" type="button"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span></button></span></span></span></span>
<!----><span class="ant-select-selection-placeholder"><!----></span>
</div>
<!---->
@ -63,9 +63,9 @@ exports[`renders ./components/auto-complete/demo/options.vue correctly 1`] = `
`;
exports[`renders ./components/auto-complete/demo/status.vue correctly 1`] = `
<div class="ant-space ant-space-vertical" style="width: 100%;">
<div style="width: 100%;" class="ant-space ant-space-vertical">
<div class="ant-space-item" style="margin-bottom: 8px;">
<div style="width: 200px;" status="error" class="ant-select ant-select-show-search ant-select-auto-complete ant-select-single ant-select-show-search">
<div style="width: 200px;" class="ant-select ant-select-status-error ant-select-show-search ant-select-auto-complete ant-select-single ant-select-show-search">
<!---->
<!---->
<div class="ant-select-selector"><span class="ant-select-selection-search"><input type="search" id="rc_select_TEST_OR_SSR" autocomplete="off" class="ant-select-selection-search-input" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" aria-activedescendant="rc_select_TEST_OR_SSR_list_0"></span>
@ -77,7 +77,7 @@ exports[`renders ./components/auto-complete/demo/status.vue correctly 1`] = `
</div>
<!---->
<div class="ant-space-item">
<div style="width: 200px;" status="warning" class="ant-select ant-select-show-search ant-select-auto-complete ant-select-single ant-select-allow-clear ant-select-show-search">
<div style="width: 200px;" class="ant-select ant-select-status-warning ant-select-show-search ant-select-auto-complete ant-select-single ant-select-allow-clear ant-select-show-search">
<!---->
<!---->
<div class="ant-select-selector"><span class="ant-select-selection-search"><input type="search" id="rc_select_TEST_OR_SSR" autocomplete="off" class="ant-select-selection-search-input" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" aria-activedescendant="rc_select_TEST_OR_SSR_list_0"></span>
@ -96,7 +96,7 @@ exports[`renders ./components/auto-complete/demo/uncertain-category.vue correctl
<div style="width: 300px;" class="ant-select ant-select-show-search ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search">
<!---->
<!---->
<div class="ant-select-selector"><span class="ant-select-selection-search"><span class="ant-input-group-wrapper ant-input-group-wrapper-lg ant-input-search ant-input-search-large ant-input-search-with-button ant-select-selection-search-input"><span class="ant-input-wrapper ant-input-group"><!----><input placeholder="input here" id="rc_select_TEST_OR_SSR" autocomplete="off" type="search" class="ant-input ant-input-lg" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" aria-activedescendant="rc_select_TEST_OR_SSR_list_0"><span class="ant-input-group-addon"><button class="ant-btn ant-btn-primary ant-btn-lg ant-input-search-button" type="button"><!----><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span></button></span></span></span></span>
<div class="ant-select-selector"><span class="ant-select-selection-search"><span class="ant-input-group-wrapper ant-input-search ant-input-search-large ant-input-search-with-button ant-select-selection-search-input ant-input-group-wrapper-lg"><span class="ant-input-wrapper ant-input-group"><!----><input placeholder="input here" autocomplete="off" id="rc_select_TEST_OR_SSR" type="search" class="ant-input ant-input-lg" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" aria-activedescendant="rc_select_TEST_OR_SSR_list_0"><span class="ant-input-group-addon"><button class="ant-btn ant-btn-primary ant-btn-lg ant-input-search-button" type="button"><!----><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span></button></span></span></span></span>
<!----><span class="ant-select-selection-placeholder"><!----></span>
</div>
<!---->

40
components/auto-complete/demo/basic.vue
View File

@ -26,8 +26,8 @@ Basic Usage, set datasource of autocomplete with `options` property.
/>
</template>
<script lang="ts">
import { defineComponent, ref, watch } from 'vue';
<script lang="ts" setup>
import { ref, watch } from 'vue';
interface MockVal {
value: string;
@ -37,28 +37,18 @@ const mockVal = (str: string, repeat = 1): MockVal => {
value: str.repeat(repeat),
};
};
export default defineComponent({
setup() {
const value = ref('');
const options = ref<MockVal[]>([]);
const onSearch = (searchText: string) => {
console.log('searchText');
options.value = !searchText
? []
: [mockVal(searchText), mockVal(searchText, 2), mockVal(searchText, 3)];
};
const onSelect = (value: string) => {
console.log('onSelect', value);
};
watch(value, () => {
console.log('value', value.value);
});
return {
value,
options,
onSearch,
onSelect,
};
},
const value = ref('');
const options = ref<MockVal[]>([]);
const onSearch = (searchText: string) => {
console.log('searchText');
options.value = !searchText
? []
: [mockVal(searchText), mockVal(searchText, 2), mockVal(searchText, 3)];
};
const onSelect = (value: string) => {
console.log('onSelect', value);
};
watch(value, () => {
console.log('value', value.value);
});
</script>

18
components/auto-complete/demo/certain-category.vue
View File

@ -63,8 +63,8 @@ Lookup-Patterns - Certain Category.
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
<script lang="ts" setup>
import { ref } from 'vue';
import { UserOutlined } from '@ant-design/icons-vue';
const dataSource = [
{
@ -106,20 +106,10 @@ const dataSource = [
value: 'all',
},
];
export default defineComponent({
components: {
UserOutlined,
},
setup() {
return {
value: ref(''),
dataSource,
};
},
});
const value = ref('');
</script>
<style>
<style scoped>
.certain-category-search-dropdown .ant-select-dropdown-menu-item-group-title {
color: #666;
font-weight: bold;

41
components/auto-complete/demo/custom.vue
View File

@ -32,30 +32,19 @@ Customize Input Component.
</a-auto-complete>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const value = ref('');
const options = ref<{ value: string }[]>([]);
const onSelect = (value: string) => {
console.log('onSelect', value);
};
const handleSearch = (value: string) => {
options.value = !value
? []
: [{ value }, { value: value + value }, { value: value + value + value }];
};
const handleKeyPress = (ev: KeyboardEvent) => {
console.log('handleKeyPress', ev);
};
return {
value,
options,
onSelect,
handleSearch,
handleKeyPress,
};
},
});
<script lang="ts" setup>
import { ref } from 'vue';
const value = ref('');
const options = ref<{ value: string }[]>([]);
const onSelect = (value: string) => {
console.log('onSelect', value);
};
const handleSearch = (value: string) => {
options.value = !value
? []
: [{ value }, { value: value + value }, { value: value + value + value }];
};
const handleKeyPress = (ev: KeyboardEvent) => {
console.log('handleKeyPress', ev);
};
</script>

29
components/auto-complete/demo/non-case-sensitive.vue
View File

@ -25,25 +25,18 @@ A non-case-sensitive AutoComplete.
/>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
<script lang="ts" setup>
import { ref } from 'vue';
interface Option {
value: string;
}
export default defineComponent({
setup() {
const filterOption = (input: string, option: Option) => {
return option.value.toUpperCase().indexOf(input.toUpperCase()) >= 0;
};
return {
value: ref(''),
options: ref<Option[]>([
{ value: 'Burns Bay Road' },
{ value: 'Downing Street' },
{ value: 'Wall Street' },
]),
filterOption,
};
},
});
const filterOption = (input: string, option: Option) => {
return option.value.toUpperCase().indexOf(input.toUpperCase()) >= 0;
};
const value = ref('');
const options = ref<Option[]>([
{ value: 'Burns Bay Road' },
{ value: 'Downing Street' },
{ value: 'Wall Street' },
]);
</script>

37
components/auto-complete/demo/options.vue
View File

@ -30,28 +30,17 @@ For 3.0+, You could pass `v-slot:option` to custom option.
</a-auto-complete>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const value = ref('');
const options = ref<{ value: string }[]>([]);
const handleSearch = (val: string) => {
let res: { value: string }[];
if (!val || val.indexOf('@') >= 0) {
res = [];
} else {
res = ['gmail.com', '163.com', 'qq.com'].map(domain => ({ value: `${val}@${domain}` }));
}
options.value = res;
};
return {
value,
options,
handleSearch,
};
},
});
<script lang="ts" setup>
import { ref } from 'vue';
const value = ref('');
const options = ref<{ value: string }[]>([]);
const handleSearch = (val: string) => {
let res: { value: string }[];
if (!val || val.indexOf('@') >= 0) {
res = [];
} else {
res = ['gmail.com', '163.com', 'qq.com'].map(domain => ({ value: `${val}@${domain}` }));
}
options.value = res;
};
</script>

49
components/auto-complete/demo/status.vue
View File

@ -42,8 +42,8 @@ Add status to AutoComplete with `status`, which could be `error` or `warning`.
</a-space>
</template>
<script lang="ts">
import { defineComponent, ref, watch } from 'vue';
<script lang="ts" setup>
import { ref, watch } from 'vue';
interface MockVal {
value: string;
@ -53,33 +53,22 @@ const mockVal = (str: string, repeat = 1): MockVal => {
value: str.repeat(repeat),
};
};
export default defineComponent({
setup() {
const value = ref('');
const value1 = ref('');
const options = ref<MockVal[]>([]);
const onSearch = (searchText: string) => {
console.log('searchText');
options.value = !searchText
? []
: [mockVal(searchText), mockVal(searchText, 2), mockVal(searchText, 3)];
};
const onSelect = (value: string) => {
console.log('onSelect', value);
};
watch(value, () => {
console.log('value', value.value);
});
return {
value,
value1,
options,
onSearch,
onSelect,
onClear: () => {
console.log('onClear');
},
};
},
const value = ref('');
const value1 = ref('');
const options = ref<MockVal[]>([]);
const onSearch = (searchText: string) => {
console.log('searchText');
options.value = !searchText
? []
: [mockVal(searchText), mockVal(searchText, 2), mockVal(searchText, 3)];
};
const onSelect = (value: string) => {
console.log('onSelect', value);
};
const onClear = () => {
console.log('onClear');
};
watch(value, () => {
console.log('value', value.value);
});
</script>

58
components/auto-complete/demo/uncertain-category.vue
View File

@ -44,46 +44,36 @@ Lookup-Patterns - Uncertain Category.
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
<script lang="ts" setup>
import { ref } from 'vue';
interface Option {
query: string;
category: string;
value: string;
count: number;
}
export default defineComponent({
setup() {
const value = ref('');
const dataSource = ref<Option[]>([]);
const onSelect = (value: string) => {
console.log('onSelect', value);
};
const value = ref('');
const dataSource = ref<Option[]>([]);
const onSelect = (value: string) => {
console.log('onSelect', value);
};
const getRandomInt = (max: number, min = 0) => {
return Math.floor(Math.random() * (max - min + 1)) + min;
};
const getRandomInt = (max: number, min = 0) => {
return Math.floor(Math.random() * (max - min + 1)) + min;
};
const searchResult = (query: string): Option[] => {
return new Array(getRandomInt(5))
.join('.')
.split('.')
.map((_item, idx) => ({
query,
category: `${query}${idx}`,
value: `${query}${idx}`,
count: getRandomInt(200, 100),
}));
};
const handleSearch = (val: string) => {
dataSource.value = val ? searchResult(val) : [];
};
return {
value,
dataSource,
onSelect,
handleSearch,
};
},
});
const searchResult = (query: string): Option[] => {
return new Array(getRandomInt(5))
.join('.')
.split('.')
.map((_item, idx) => ({
query,
category: `${query}${idx}`,
value: `${query}${idx}`,
count: getRandomInt(200, 100),
}));
};
const handleSearch = (val: string) => {
dataSource.value = val ? searchResult(val) : [];
};
</script>

4
components/avatar/__tests__/__snapshots__/demo.test.js.snap
View File

@ -21,7 +21,7 @@ exports[`renders ./components/avatar/demo/basic.vue correctly 1`] = `
exports[`renders ./components/avatar/demo/dynamic.vue correctly 1`] = `
<span style="background-color: rgb(245, 106, 0); vertical-align: middle;" class="ant-avatar ant-avatar-lg ant-avatar-square"><span class="ant-avatar-string" style="opacity: 0;">U</span></span>
<button style="margin-left: 16px; vertical-align: middle;" class="ant-btn ant-btn-sm" type="button">
<button style="margin-left: 16px; vertical-align: middle;" class="ant-btn ant-btn-default ant-btn-sm" type="button">
<!----><span>改 变</span>
</button>
`;
@ -49,7 +49,7 @@ exports[`renders ./components/avatar/demo/responsive.vue correctly 1`] = `<span
exports[`renders ./components/avatar/demo/type.vue correctly 1`] = `
<span class="ant-avatar ant-avatar-circle ant-avatar-icon"><span role="img" aria-label="user" class="anticon anticon-user"><svg focusable="false" class="" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg></span></span>
<span class="ant-avatar ant-avatar-circle"><span class="ant-avatar-string" style="opacity: 0;">U</span></span>
<span class="ant-avatar ant-avatar-circle"><span class="ant-avatar-string" style="opacity: 0;">USER</span></span>
<span class="ant-avatar ant-avatar-circle" style="width: 40px; height: 40px; line-height: 40px; font-size: 18px;"><span class="ant-avatar-string" style="opacity: 0;">USER</span></span>
<span class="ant-avatar ant-avatar-circle ant-avatar-image"><img src="https://joeschmoe.io/api/v1/random"></span>
<span style="color: rgb(245, 106, 0); background-color: rgb(253, 227, 207);" class="ant-avatar ant-avatar-circle"><span class="ant-avatar-string" style="opacity: 0;">U</span></span>
<span style="background-color: rgb(135, 208, 104);" class="ant-avatar ant-avatar-circle ant-avatar-icon"><span role="img" aria-label="user" class="anticon anticon-user"><svg focusable="false" class="" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg></span></span>

10
components/avatar/demo/badge.vue
View File

@ -32,17 +32,11 @@ Usually used for reminders and notifications.
</span>
</template>
<script lang="ts">
<script lang="ts" setup>
import { UserOutlined } from '@ant-design/icons-vue';
import { defineComponent } from 'vue';
export default defineComponent({
components: {
UserOutlined,
},
});
</script>
<style>
<style scoped>
#components-avatar-demo-badge .ant-avatar {
margin-top: 0;
margin-right: 0;

8
components/avatar/demo/basic.vue
View File

@ -43,12 +43,6 @@ Three sizes and two shapes are available.
</a-avatar>
</template>
<script lang="ts">
<script lang="ts" setup>
import { UserOutlined } from '@ant-design/icons-vue';
import { defineComponent } from 'vue';
export default defineComponent({
components: {
UserOutlined,
},
});
</script>

27
components/avatar/demo/dynamic.vue
View File

@ -32,25 +32,16 @@ For letter type Avatar, when the letters are too long to display, the font size
</a-button>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
<script lang="ts" setup>
import { ref } from 'vue';
const UserList = ['U', 'Lucy', 'Tom', 'Edward'];
const colorList = ['#f56a00', '#7265e6', '#ffbf00', '#00a2ae'];
export default defineComponent({
setup() {
const avatarValue = ref(UserList[0]);
const color = ref(colorList[0]);
const changeValue = () => {
const index = UserList.indexOf(avatarValue.value);
avatarValue.value = index < UserList.length - 1 ? UserList[index + 1] : UserList[0];
color.value = index < colorList.length - 1 ? colorList[index + 1] : colorList[0];
};
return {
avatarValue,
color,
changeValue,
};
},
});
const avatarValue = ref(UserList[0]);
const color = ref(colorList[0]);
const changeValue = () => {
const index = UserList.indexOf(avatarValue.value);
avatarValue.value = index < UserList.length - 1 ? UserList[index + 1] : UserList[0];
color.value = index < colorList.length - 1 ? colorList[index + 1] : colorList[0];
};
</script>

8
components/avatar/demo/group.vue
View File

@ -63,12 +63,6 @@ Avatar group display.
</a-avatar-group>
</template>
<script lang="ts">
<script lang="ts" setup>
import { UserOutlined } from '@ant-design/icons-vue';
import { defineComponent } from 'vue';
export default defineComponent({
components: {
UserOutlined,
},
});
</script>

8
components/avatar/demo/responsive.vue
View File

@ -23,12 +23,6 @@ Avatar size can be automatically adjusted based on the screen size.
</a-avatar>
</template>
<script lang="ts">
<script lang="ts" setup>
import { AntDesignOutlined } from '@ant-design/icons-vue';
import { defineComponent } from 'vue';
export default defineComponent({
components: {
AntDesignOutlined,
},
});
</script>

8
components/avatar/demo/type.vue
View File

@ -32,12 +32,6 @@ Image, Icon and letter are supported, and the latter two kinds avatar can have c
</a-avatar>
</template>
<script lang="ts">
<script lang="ts" setup>
import { UserOutlined } from '@ant-design/icons-vue';
import { defineComponent } from 'vue';
export default defineComponent({
components: {
UserOutlined,
},
});
</script>

46
components/badge/__tests__/__snapshots__/demo.test.js.snap
View File

@ -12,9 +12,9 @@ exports[`renders ./components/badge/demo/basic.vue correctly 1`] = `
exports[`renders ./components/badge/demo/change.vue correctly 1`] = `
<div><span class="ant-badge"><span class="ant-avatar ant-avatar-lg ant-avatar-square"><span class="ant-avatar-string" style="opacity: 0;"><!----></span></span><sup data-show="true" class="ant-scroll-number ant-badge-count" title="5"><span class="ant-scroll-number-only" style="transition: none;"><p class="ant-scroll-number-only-unit current">5</p></span></sup>
<!----></span>
<div class="ant-btn-group"><button class="ant-btn" type="button">
<div class="ant-btn-group"><button class="ant-btn ant-btn-default" type="button">
<!----><span role="img" aria-label="minus" class="anticon anticon-minus"><svg focusable="false" class="" data-icon="minus" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M872 474H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h720c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z"></path></svg></span>
</button><button class="ant-btn" type="button">
</button><button class="ant-btn ant-btn-default" type="button">
<!----><span role="img" aria-label="plus" class="anticon anticon-plus"><svg focusable="false" class="" data-icon="plus" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><defs><style></style></defs><path d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"></path><path d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"></path></svg></span>
</button></div>
</div>
@ -26,7 +26,7 @@ exports[`renders ./components/badge/demo/change.vue correctly 1`] = `
<button type="button" role="switch" aria-checked="true" class="ant-switch-checked ant-switch">
<div class="ant-switch-handle">
<!---->
</div><span class="ant-switch-inner"><!----></span>
</div><span class="ant-switch-inner"><span class="ant-switch-inner-checked"><!----></span><span class="ant-switch-inner-unchecked"><!----></span></span>
</button>
`;
@ -48,13 +48,13 @@ exports[`renders ./components/badge/demo/colors.vue correctly 1`] = `
<div><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-lime"></span><span class="ant-badge-status-text">lime</span></span></div>
</div>
<div class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left" role="separator"><span class="ant-divider-inner-text">Custom</span></div>
<span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot" style="background: rgb(255, 85, 0);"></span><span class="ant-badge-status-text">#f50</span></span>
<span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot" style="background: rgb(255, 85, 0); color: rgb(255, 85, 0);"></span><span class="ant-badge-status-text">#f50</span></span>
<br>
<span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot" style="background: rgb(45, 183, 245);"></span><span class="ant-badge-status-text">#2db7f5</span></span>
<span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot" style="background: rgb(45, 183, 245); color: rgb(45, 183, 245);"></span><span class="ant-badge-status-text">#2db7f5</span></span>
<br>
<span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot" style="background: rgb(135, 208, 104);"></span><span class="ant-badge-status-text">#87d068</span></span>
<span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot" style="background: rgb(135, 208, 104); color: rgb(135, 208, 104);"></span><span class="ant-badge-status-text">#87d068</span></span>
<br>
<span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot" style="background: rgb(16, 142, 233);"></span><span class="ant-badge-status-text">#108ee9</span></span>
<span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot" style="background: rgb(16, 142, 233); color: rgb(16, 142, 233);"></span><span class="ant-badge-status-text">#108ee9</span></span>
`;
exports[`renders ./components/badge/demo/dot.vue correctly 1`] = `
@ -89,8 +89,8 @@ exports[`renders ./components/badge/demo/overflow.vue correctly 1`] = `
`;
exports[`renders ./components/badge/demo/ribbon.vue correctly 1`] = `
<div class="ant-ribbon-wrapper">
<div class="ant-card ant-card-bordered ant-card-small">
<div class="ant-ribbon-wrapper ">
<div class="ant-card ant-card-bordered ant-card-small">
<div class="ant-card-head">
<div class="ant-card-head-wrapper">
<div class="ant-card-head-title">Pushes open the window</div>
@ -106,8 +106,8 @@ exports[`renders ./components/badge/demo/ribbon.vue correctly 1`] = `
<div class="ant-ribbon-corner"></div>
</div>
</div>
<div class="ant-ribbon-wrapper">
<div class="ant-card ant-card-bordered ant-card-small">
<div class="ant-ribbon-wrapper ">
<div class="ant-card ant-card-bordered ant-card-small">
<div class="ant-card-head">
<div class="ant-card-head-wrapper">
<div class="ant-card-head-title">Pushes open the window</div>
@ -123,8 +123,8 @@ exports[`renders ./components/badge/demo/ribbon.vue correctly 1`] = `
<div class="ant-ribbon-corner"></div>
</div>
</div>
<div class="ant-ribbon-wrapper">
<div class="ant-card ant-card-bordered ant-card-small">
<div class="ant-ribbon-wrapper ">
<div class="ant-card ant-card-bordered ant-card-small">
<div class="ant-card-head">
<div class="ant-card-head-wrapper">
<div class="ant-card-head-title">Pushes open the window</div>
@ -140,8 +140,8 @@ exports[`renders ./components/badge/demo/ribbon.vue correctly 1`] = `
<div class="ant-ribbon-corner"></div>
</div>
</div>
<div class="ant-ribbon-wrapper">
<div class="ant-card ant-card-bordered ant-card-small">
<div class="ant-ribbon-wrapper ">
<div class="ant-card ant-card-bordered ant-card-small">
<div class="ant-card-head">
<div class="ant-card-head-wrapper">
<div class="ant-card-head-title">Pushes open the window</div>
@ -157,8 +157,8 @@ exports[`renders ./components/badge/demo/ribbon.vue correctly 1`] = `
<div class="ant-ribbon-corner"></div>
</div>
</div>
<div class="ant-ribbon-wrapper">
<div class="ant-card ant-card-bordered ant-card-small">
<div class="ant-ribbon-wrapper ">
<div class="ant-card ant-card-bordered ant-card-small">
<div class="ant-card-head">
<div class="ant-card-head-wrapper">
<div class="ant-card-head-title">Pushes open the window</div>
@ -174,8 +174,8 @@ exports[`renders ./components/badge/demo/ribbon.vue correctly 1`] = `
<div class="ant-ribbon-corner"></div>
</div>
</div>
<div class="ant-ribbon-wrapper">
<div class="ant-card ant-card-bordered ant-card-small">
<div class="ant-ribbon-wrapper ">
<div class="ant-card ant-card-bordered ant-card-small">
<div class="ant-card-head">
<div class="ant-card-head-wrapper">
<div class="ant-card-head-title">Pushes open the window</div>
@ -191,8 +191,8 @@ exports[`renders ./components/badge/demo/ribbon.vue correctly 1`] = `
<div class="ant-ribbon-corner"></div>
</div>
</div>
<div class="ant-ribbon-wrapper">
<div class="ant-card ant-card-bordered ant-card-small">
<div class="ant-ribbon-wrapper ">
<div class="ant-card ant-card-bordered ant-card-small">
<div class="ant-card-head">
<div class="ant-card-head-wrapper">
<div class="ant-card-head-title">Pushes open the window</div>
@ -208,8 +208,8 @@ exports[`renders ./components/badge/demo/ribbon.vue correctly 1`] = `
<div class="ant-ribbon-corner"></div>
</div>
</div>
<div class="ant-ribbon-wrapper">
<div class="ant-card ant-card-bordered ant-card-small">
<div class="ant-ribbon-wrapper ">
<div class="ant-card ant-card-bordered ant-card-small">
<div class="ant-card-head">
<div class="ant-card-head-wrapper">
<div class="ant-card-head-title">Pushes open the window</div>

8
components/badge/demo/basic.vue
View File

@ -30,12 +30,6 @@ Simplest Usage. Badge will be hidden when `count` is `0`, but we can use `showZe
</a-badge>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
<script lang="ts" setup>
import { ClockCircleOutlined } from '@ant-design/icons-vue';
export default defineComponent({
components: {
ClockCircleOutlined,
},
});
</script>

37
components/badge/demo/change.vue
View File

@ -35,31 +35,18 @@ The count will be animated as it changes.
</a-badge>
<a-switch v-model:checked="show" />
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
<script lang="ts" setup>
import { ref } from 'vue';
import { MinusOutlined, PlusOutlined } from '@ant-design/icons-vue';
export default defineComponent({
components: {
MinusOutlined,
PlusOutlined,
},
setup() {
const count = ref<number>(5);
const decline = () => {
if (count.value >= 1) {
count.value--;
}
};
const count = ref<number>(5);
const show = ref<boolean>(true);
const decline = () => {
if (count.value >= 1) {
count.value--;
}
};
const increase = () => {
count.value++;
};
return {
count,
show: ref<boolean>(true),
decline,
increase,
};
},
});
const increase = () => {
count.value++;
};
</script>

11
components/badge/demo/colors.vue
View File

@ -32,9 +32,7 @@ New feature after 3.16.0. We preset a series of colorful Badge styles for use in
<br />
<a-badge color="#108ee9" text="#108ee9" />
</template>
<script lang="ts">
import { defineComponent } from 'vue';
<script lang="ts" setup>
const colors = [
'pink',
'red',
@ -50,11 +48,4 @@ const colors = [
'gold',
'lime',
];
export default defineComponent({
setup() {
return {
colors,
};
},
});
</script>

8
components/badge/demo/dot.vue
View File

@ -24,12 +24,6 @@ If count equals 0, it won't display the dot.
<a href="#">Link something</a>
</a-badge>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
<script lang="ts" setup>
import { NotificationOutlined } from '@ant-design/icons-vue';
export default defineComponent({
components: {
NotificationOutlined,
},
});
</script>

2
components/breadcrumb/__tests__/Breadcrumb.test.js
View File

@ -25,7 +25,7 @@ describe('Breadcrumb', () => {
});
expect(errorSpy.mock.calls).toHaveLength(1);
expect(errorSpy.mock.calls[0][0]).toMatch(
"Warning: [antdv: Breadcrumb] Only accepts Breadcrumb.Item and Breadcrumb.Separator as it's children",
"Warning: [ant-design-vue: Breadcrumb] Only accepts Breadcrumb.Item and Breadcrumb.Separator as it's children",
);
});

2
components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.js.snap
View File

@ -40,7 +40,7 @@ exports[`Breadcrumb should support Breadcrumb.Item default separator 1`] = `
`;
exports[`Breadcrumb should support custom attribute 1`] = `
<nav class="ant-breadcrumb" data-custom="custom">
<nav data-custom="custom" class="ant-breadcrumb">
<ol>
<li><span class="ant-breadcrumb-link" data-custom="custom-item">xxx</span><span class="ant-breadcrumb-separator">/</span></li>
<li><span class="ant-breadcrumb-link">yyy</span><span class="ant-breadcrumb-separator">/</span></li>

69
components/breadcrumb/__tests__/__snapshots__/demo.test.js.snap
View File

@ -1,14 +1,65 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders ./components/breadcrumb/demo/basic.vue correctly 1`] = `<div class="ant-breadcrumb"><span><span class="ant-breadcrumb-link">Home</span><span class="ant-breadcrumb-separator">/</span></span><span><span class="ant-breadcrumb-link"><a href="">Application Center</a></span><span class="ant-breadcrumb-separator">/</span></span><span><span class="ant-breadcrumb-link"><a href="">Application List</a></span><span class="ant-breadcrumb-separator">/</span></span><span><span class="ant-breadcrumb-link">An Application</span><span class="ant-breadcrumb-separator">/</span></span></div>`;
exports[`renders ./components/breadcrumb/demo/overlay.vue correctly 1`] = `<div class="ant-breadcrumb"><span><span class="ant-breadcrumb-link">Ant Design Vue</span><span class="ant-breadcrumb-separator">/</span></span><span><span class="ant-breadcrumb-link"><a href="">Component</a></span><span class="ant-breadcrumb-separator">/</span></span><span><!----><span class="ant-breadcrumb-overlay-link ant-dropdown-trigger"><span class="ant-breadcrumb-link"><a href="">General</a></span><span role="img" aria-label="down" class="anticon anticon-down"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span><span class="ant-breadcrumb-separator">/</span></span><span><span class="ant-breadcrumb-link">Button</span><span class="ant-breadcrumb-separator">/</span></span></div>`;
exports[`renders ./components/breadcrumb/demo/separator.vue correctly 1`] = `
<div class="ant-breadcrumb"><span><span class="ant-breadcrumb-link">Home</span><span class="ant-breadcrumb-separator">&gt;</span></span><span><a class="ant-breadcrumb-link">Application Center</a><span class="ant-breadcrumb-separator">&gt;</span></span><span><a class="ant-breadcrumb-link">Application List</a><span class="ant-breadcrumb-separator">&gt;</span></span><span><span class="ant-breadcrumb-link">An Application</span><span class="ant-breadcrumb-separator">&gt;</span></span></div>
<div class="ant-breadcrumb"><span><span class="ant-breadcrumb-link">Home</span><span class="ant-breadcrumb-separator"><span style="color: red;">&gt;</span></span></span><span><a class="ant-breadcrumb-link">Application Center</a><span class="ant-breadcrumb-separator"><span style="color: red;">&gt;</span></span></span><span><a class="ant-breadcrumb-link">Application List</a><span class="ant-breadcrumb-separator"><span style="color: red;">&gt;</span></span></span><span><span class="ant-breadcrumb-link">An Application</span><span class="ant-breadcrumb-separator"><span style="color: red;">&gt;</span></span></span></div>
exports[`renders ./components/breadcrumb/demo/basic.vue correctly 1`] = `
<nav class="ant-breadcrumb">
<ol>
<li><span class="ant-breadcrumb-link">Home</span><span class="ant-breadcrumb-separator">/</span></li>
<li><span class="ant-breadcrumb-link"><a href="">Application Center</a></span><span class="ant-breadcrumb-separator">/</span></li>
<li><span class="ant-breadcrumb-link"><a href="">Application List</a></span><span class="ant-breadcrumb-separator">/</span></li>
<li><span class="ant-breadcrumb-link">An Application</span><span class="ant-breadcrumb-separator">/</span></li>
</ol>
</nav>
`;
exports[`renders ./components/breadcrumb/demo/separator-indepent.vue correctly 1`] = `<div class="ant-breadcrumb"><span><span class="ant-breadcrumb-link">Location</span></span><span class="ant-breadcrumb-separator">:</span><span><a class="ant-breadcrumb-link">Application Center</a></span><span class="ant-breadcrumb-separator">/</span><span><a class="ant-breadcrumb-link">Application List</a></span><span class="ant-breadcrumb-separator">/</span><span><span class="ant-breadcrumb-link">An Application</span></span></div>`;
exports[`renders ./components/breadcrumb/demo/overlay.vue correctly 1`] = `
<nav class="ant-breadcrumb">
<ol>
<li><span class="ant-breadcrumb-link">Ant Design Vue</span><span class="ant-breadcrumb-separator">/</span></li>
<li><span class="ant-breadcrumb-link"><a href="">Component</a></span><span class="ant-breadcrumb-separator">/</span></li>
<li>
<!----><span class="ant-breadcrumb-overlay-link ant-dropdown-trigger"><span class="ant-breadcrumb-link"><a href="">General</a></span><span role="img" aria-label="down" class="anticon anticon-down"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span><span class="ant-breadcrumb-separator">/</span>
</li>
<li><span class="ant-breadcrumb-link">Button</span><span class="ant-breadcrumb-separator">/</span></li>
</ol>
</nav>
`;
exports[`renders ./components/breadcrumb/demo/withIcon.vue correctly 1`] = `<div class="ant-breadcrumb"><span><a class="ant-breadcrumb-link"><span role="img" aria-label="home" class="anticon anticon-home"><svg focusable="false" class="" data-icon="home" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M946.5 505L560.1 118.8l-25.9-25.9a31.5 31.5 0 00-44.4 0L77.5 505a63.9 63.9 0 00-18.8 46c.4 35.2 29.7 63.3 64.9 63.3h42.5V940h691.8V614.3h43.4c17.1 0 33.2-6.7 45.3-18.8a63.6 63.6 0 0018.7-45.3c0-17-6.7-33.1-18.8-45.2zM568 868H456V664h112v204zm217.9-325.7V868H632V640c0-22.1-17.9-40-40-40H432c-22.1 0-40 17.9-40 40v228H238.1V542.3h-96l370-369.7 23.1 23.1L882 542.3h-96.1z"></path></svg></span></a><span class="ant-breadcrumb-separator">/</span></span><span><a class="ant-breadcrumb-link"><span role="img" aria-label="user" class="anticon anticon-user"><svg focusable="false" class="" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg></span><span>Application List</span></a><span class="ant-breadcrumb-separator">/</span></span><span><span class="ant-breadcrumb-link">Application</span><span class="ant-breadcrumb-separator">/</span></span></div>`;
exports[`renders ./components/breadcrumb/demo/separator.vue correctly 1`] = `
<nav class="ant-breadcrumb">
<ol>
<li><span class="ant-breadcrumb-link">Home</span><span class="ant-breadcrumb-separator">&gt;</span></li>
<li><a class="ant-breadcrumb-link">Application Center</a><span class="ant-breadcrumb-separator">&gt;</span></li>
<li><a class="ant-breadcrumb-link">Application List</a><span class="ant-breadcrumb-separator">&gt;</span></li>
<li><span class="ant-breadcrumb-link">An Application</span><span class="ant-breadcrumb-separator">&gt;</span></li>
</ol>
</nav>
<nav class="ant-breadcrumb">
<ol>
<li><span class="ant-breadcrumb-link">Home</span><span class="ant-breadcrumb-separator"><span style="color: red;">&gt;</span></span></li>
<li><a class="ant-breadcrumb-link">Application Center</a><span class="ant-breadcrumb-separator"><span style="color: red;">&gt;</span></span></li>
<li><a class="ant-breadcrumb-link">Application List</a><span class="ant-breadcrumb-separator"><span style="color: red;">&gt;</span></span></li>
<li><span class="ant-breadcrumb-link">An Application</span><span class="ant-breadcrumb-separator"><span style="color: red;">&gt;</span></span></li>
</ol>
</nav>
`;
exports[`renders ./components/breadcrumb/demo/separator-indepent.vue correctly 1`] = `
<nav class="ant-breadcrumb">
<ol>
<li><span class="ant-breadcrumb-link">Location</span></li><span class="ant-breadcrumb-separator">:</span>
<li><a class="ant-breadcrumb-link">Application Center</a></li><span class="ant-breadcrumb-separator">/</span>
<li><a class="ant-breadcrumb-link">Application List</a></li><span class="ant-breadcrumb-separator">/</span>
<li><span class="ant-breadcrumb-link">An Application</span></li>
</ol>
</nav>
`;
exports[`renders ./components/breadcrumb/demo/withIcon.vue correctly 1`] = `
<nav class="ant-breadcrumb">
<ol>
<li><a class="ant-breadcrumb-link"><span role="img" aria-label="home" class="anticon anticon-home"><svg focusable="false" class="" data-icon="home" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M946.5 505L560.1 118.8l-25.9-25.9a31.5 31.5 0 00-44.4 0L77.5 505a63.9 63.9 0 00-18.8 46c.4 35.2 29.7 63.3 64.9 63.3h42.5V940h691.8V614.3h43.4c17.1 0 33.2-6.7 45.3-18.8a63.6 63.6 0 0018.7-45.3c0-17-6.7-33.1-18.8-45.2zM568 868H456V664h112v204zm217.9-325.7V868H632V640c0-22.1-17.9-40-40-40H432c-22.1 0-40 17.9-40 40v228H238.1V542.3h-96l370-369.7 23.1 23.1L882 542.3h-96.1z"></path></svg></span></a><span class="ant-breadcrumb-separator">/</span></li>
<li><a class="ant-breadcrumb-link"><span role="img" aria-label="user" class="anticon anticon-user"><svg focusable="false" class="" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg></span><span>Application List</span></a><span class="ant-breadcrumb-separator">/</span></li>
<li><span class="ant-breadcrumb-link">Application</span><span class="ant-breadcrumb-separator">/</span></li>
</ol>
</nav>
`;

67
components/breadcrumb/demo/router.vue
View File

@ -32,8 +32,8 @@ Used together with `vue-router`
{{ $route.path }}
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
<script lang="ts" setup>
import { ref } from 'vue';
interface Route {
path: string;
breadcrumbName: string;
@ -42,40 +42,33 @@ interface Route {
breadcrumbName: string;
}>;
}
export default defineComponent({
setup() {
const routes = ref<Route[]>([
{
path: 'index',
breadcrumbName: 'home',
},
{
path: 'first',
breadcrumbName: 'first',
children: [
{
path: '/general',
breadcrumbName: 'General',
},
{
path: '/layout',
breadcrumbName: 'Layout',
},
{
path: '/navigation',
breadcrumbName: 'Navigation',
},
],
},
{
path: 'second',
breadcrumbName: 'second',
},
]);
return {
basePath: '/components/breadcrumb',
routes,
};
const basePath = '/components/breadcrumb';
const routes = ref<Route[]>([
{
path: 'index',
breadcrumbName: 'home',
},
});
{
path: 'first',
breadcrumbName: 'first',
children: [
{
path: '/general',
breadcrumbName: 'General',
},
{
path: '/layout',
breadcrumbName: 'Layout',
},
{
path: '/navigation',
breadcrumbName: 'Navigation',
},
],
},
{
path: 'second',
breadcrumbName: 'second',
},
]);
</script>

9
components/breadcrumb/demo/withIcon.vue
View File

@ -28,13 +28,6 @@ The icon should be placed in front of the text.
<a-breadcrumb-item>Application</a-breadcrumb-item>
</a-breadcrumb>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
<script lang="ts" setup>
import { HomeOutlined, UserOutlined } from '@ant-design/icons-vue';
export default defineComponent({
components: {
HomeOutlined,
UserOutlined,
},
});
</script>

90
components/button/__tests__/__snapshots__/demo.test.js.snap
View File

@ -4,7 +4,7 @@ exports[`renders ./components/button/demo/basic.vue correctly 1`] = `
<button class="ant-btn ant-btn-primary" type="button">
<!----><span>Primary Button</span>
</button>
<button class="ant-btn" type="button">
<button class="ant-btn ant-btn-default" type="button">
<!----><span>Default Button</span>
</button>
<button class="ant-btn ant-btn-dashed" type="button">
@ -22,13 +22,13 @@ exports[`renders ./components/button/demo/block.vue correctly 1`] = `
<button class="ant-btn ant-btn-primary ant-btn-block" type="button">
<!----><span>Primary</span>
</button>
<button class="ant-btn ant-btn-block" type="button">
<button class="ant-btn ant-btn-default ant-btn-block" type="button">
<!----><span>Default</span>
</button>
<button class="ant-btn ant-btn-dashed ant-btn-block" type="button">
<!----><span>Dashed</span>
</button>
<button class="ant-btn ant-btn-block ant-btn-dangerous" type="button">
<button class="ant-btn ant-btn-default ant-btn-block ant-btn-dangerous" type="button">
<!----><span>Danger</span>
</button>
<button class="ant-btn ant-btn-link ant-btn-block" type="button">
@ -39,23 +39,23 @@ exports[`renders ./components/button/demo/block.vue correctly 1`] = `
exports[`renders ./components/button/demo/button-group.vue correctly 1`] = `
<div id="components-button-demo-button-group">
<h4>Basic</h4>
<div class="ant-btn-group"><button class="ant-btn" type="button">
<div class="ant-btn-group"><button class="ant-btn ant-btn-default" type="button">
<!----><span>Cancel</span>
</button><button class="ant-btn ant-btn-primary" type="button">
<!----><span>OK</span>
</button></div>
<div class="ant-btn-group"><button disabled="" class="ant-btn" type="button">
<div class="ant-btn-group"><button disabled="" class="ant-btn ant-btn-default" type="button">
<!----><span>L</span>
</button><button disabled="" class="ant-btn" type="button">
</button><button disabled="" class="ant-btn ant-btn-default" type="button">
<!----><span>M</span>
</button><button disabled="" class="ant-btn" type="button">
</button><button disabled="" class="ant-btn ant-btn-default" type="button">
<!----><span>R</span>
</button></div>
<div class="ant-btn-group"><button class="ant-btn ant-btn-primary" type="button">
<!----><span>L</span>
</button><button class="ant-btn" type="button">
</button><button class="ant-btn ant-btn-default" type="button">
<!----><span>M</span>
</button><button class="ant-btn" type="button">
</button><button class="ant-btn ant-btn-default" type="button">
<!----><span>M</span>
</button><button class="ant-btn ant-btn-dashed" type="button">
<!----><span>R</span>
@ -73,7 +73,7 @@ exports[`renders ./components/button/demo/button-group.vue correctly 1`] = `
exports[`renders ./components/button/demo/danger.vue correctly 1`] = `
<div><button class="ant-btn ant-btn-primary ant-btn-dangerous" type="button">
<!----><span>Primary</span>
</button><button class="ant-btn ant-btn-dangerous" type="button">
</button><button class="ant-btn ant-btn-default ant-btn-dangerous" type="button">
<!----><span>Default</span>
</button><button class="ant-btn ant-btn-dashed ant-btn-dangerous" type="button">
<!----><span>Dashed</span>
@ -92,10 +92,10 @@ exports[`renders ./components/button/demo/disabled.vue correctly 1`] = `
<!----><span>Primary(disabled)</span>
</button>
<br>
<button class="ant-btn" type="button">
<button class="ant-btn ant-btn-default" type="button">
<!----><span>Default</span>
</button>
<button disabled="" class="ant-btn" type="button">
<button disabled="" class="ant-btn ant-btn-default" type="button">
<!----><span>Default(disabled)</span>
</button>
<br>
@ -120,10 +120,10 @@ exports[`renders ./components/button/demo/disabled.vue correctly 1`] = `
<!----><span>Link(disabled)</span>
</button>
<br>
<button class="ant-btn ant-btn-dangerous" type="button">
<button class="ant-btn ant-btn-default ant-btn-dangerous" type="button">
<!----><span>Danger Default</span>
</button>
<button disabled="" class="ant-btn ant-btn-dangerous" type="button">
<button disabled="" class="ant-btn ant-btn-default ant-btn-dangerous" type="button">
<!----><span>Danger Default(disabled)</span>
</button>
<br>
@ -141,9 +141,9 @@ exports[`renders ./components/button/demo/disabled.vue correctly 1`] = `
<!----><span>Danger Link(disabled)</span>
</button>
<br>
<div style="padding: 8px 8px 0px 8px; background: rgb(190, 200, 200);"><button class="ant-btn ant-btn-background-ghost" type="button">
<div style="padding: 8px 8px 0px 8px; background: rgb(190, 200, 200);"><button class="ant-btn ant-btn-default ant-btn-background-ghost" type="button">
<!----><span>Ghost</span>
</button><button disabled="" class="ant-btn ant-btn-background-ghost" type="button">
</button><button disabled="" class="ant-btn ant-btn-default ant-btn-background-ghost" type="button">
<!----><span>Ghost(disabled)</span>
</button></div>
`;
@ -151,7 +151,7 @@ exports[`renders ./components/button/demo/disabled.vue correctly 1`] = `
exports[`renders ./components/button/demo/ghost.vue correctly 1`] = `
<div style="background: rgb(190, 200, 200); padding: 26px 16px 16px;"><button class="ant-btn ant-btn-primary ant-btn-background-ghost" type="button">
<!----><span>Primary</span>
</button><button class="ant-btn ant-btn-background-ghost" type="button">
</button><button class="ant-btn ant-btn-default ant-btn-background-ghost" type="button">
<!----><span>Default</span>
</button><button class="ant-btn ant-btn-dashed ant-btn-background-ghost" type="button">
<!----><span>Dashed</span>
@ -161,43 +161,43 @@ exports[`renders ./components/button/demo/ghost.vue correctly 1`] = `
`;
exports[`renders ./components/button/demo/icon.vue correctly 1`] = `
<button class="ant-btn ant-btn-primary ant-btn-circle ant-btn-icon-only" type="button"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span></button>
<button class="ant-btn ant-btn-primary ant-btn-circle" type="button">
<button class="ant-btn ant-btn-circle ant-btn-primary ant-btn-icon-only" type="button"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span></button>
<button class="ant-btn ant-btn-circle ant-btn-primary" type="button">
<!----><span>A</span>
</button>
<button class="ant-btn ant-btn-primary" type="button"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span><span>Search</span></button>
<button class="ant-btn ant-btn-default ant-btn-circle ant-btn-icon-only" type="button"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span></button>
<button class="ant-btn" type="button"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span><span>Search</span></button>
<button class="ant-btn ant-btn-default ant-btn-circle ant-btn-icon-only" type="button"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span></button>
<button class="ant-btn" type="button"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span><span>Search</span></button>
<button class="ant-btn ant-btn-dashed ant-btn-circle ant-btn-icon-only" type="button"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span></button>
<button class="ant-btn ant-btn-circle ant-btn-default ant-btn-icon-only" type="button"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span></button>
<button class="ant-btn ant-btn-default" type="button"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span><span>Search</span></button>
<button class="ant-btn ant-btn-circle ant-btn-default ant-btn-icon-only" type="button"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span></button>
<button class="ant-btn ant-btn-default" type="button"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span><span>Search</span></button>
<button class="ant-btn ant-btn-circle ant-btn-dashed ant-btn-icon-only" type="button"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span></button>
<button class="ant-btn ant-btn-dashed" type="button"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span><span>Search</span></button>
<a class="ant-btn ant-btn-icon-only" href="https://www.google.com"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span></a>
<a class="ant-btn ant-btn-default ant-btn-icon-only" href="https://www.google.com"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span></a>
<br>
<br>
<button class="ant-btn ant-btn-primary ant-btn-circle ant-btn-lg ant-btn-icon-only" type="button"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span></button>
<button class="ant-btn ant-btn-primary ant-btn-circle ant-btn-lg" type="button">
<button class="ant-btn ant-btn-circle ant-btn-primary ant-btn-lg ant-btn-icon-only" type="button"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span></button>
<button class="ant-btn ant-btn-circle ant-btn-primary ant-btn-lg" type="button">
<!----><span>A</span>
</button>
<button class="ant-btn ant-btn-primary ant-btn-lg" type="button"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span><span>Search</span></button>
<button class="ant-btn ant-btn-default ant-btn-circle ant-btn-lg ant-btn-icon-only" type="button"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span></button>
<button class="ant-btn ant-btn-lg" type="button"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span><span>Search</span></button>
<button class="ant-btn ant-btn-circle ant-btn-default ant-btn-lg ant-btn-icon-only" type="button"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span></button>
<button class="ant-btn ant-btn-default ant-btn-lg" type="button"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span><span>Search</span></button>
<br>
<button class="ant-btn ant-btn-default ant-btn-circle ant-btn-lg ant-btn-icon-only" type="button"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span></button>
<button class="ant-btn ant-btn-lg" type="button"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span><span>Search</span></button>
<button class="ant-btn ant-btn-dashed ant-btn-circle ant-btn-lg ant-btn-icon-only" type="button"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span></button>
<button class="ant-btn ant-btn-circle ant-btn-default ant-btn-lg ant-btn-icon-only" type="button"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span></button>
<button class="ant-btn ant-btn-default ant-btn-lg" type="button"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span><span>Search</span></button>
<button class="ant-btn ant-btn-circle ant-btn-dashed ant-btn-lg ant-btn-icon-only" type="button"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span></button>
<button class="ant-btn ant-btn-dashed ant-btn-lg" type="button"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span><span>Search</span></button>
<a class="ant-btn ant-btn-lg ant-btn-icon-only" href="https://www.google.com"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span></a>
<a class="ant-btn ant-btn-default ant-btn-lg ant-btn-icon-only" href="https://www.google.com"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span></a>
`;
exports[`renders ./components/button/demo/loading.vue correctly 1`] = `
<div class="ant-space ant-space-horizontal ant-space-align-center" style="width: 100%;">
<div style="width: 100%;" class="ant-space ant-space-horizontal ant-space-align-center">
<div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-primary ant-btn-loading" type="button"><span class="ant-btn-loading-icon"><span role="img" aria-label="loading" class="anticon anticon-loading"><svg focusable="false" class="anticon-spin" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path></svg></span></span><span>Loading</span></button></div>
<!---->
<div class="ant-space-item"><button class="ant-btn ant-btn-primary ant-btn-sm ant-btn-loading" type="button"><span class="ant-btn-loading-icon"><span role="img" aria-label="loading" class="anticon anticon-loading"><svg focusable="false" class="anticon-spin" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path></svg></span></span><span>Loading</span></button></div>
<!---->
</div>
<div class="ant-space ant-space-horizontal ant-space-align-center" style="width: 100%;">
<div style="width: 100%;" class="ant-space ant-space-horizontal ant-space-align-center">
<div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-primary" type="button">
<!----><span>mouseenter me!</span>
</button></div>
@ -205,12 +205,12 @@ exports[`renders ./components/button/demo/loading.vue correctly 1`] = `
<div class="ant-space-item"><button class="ant-btn ant-btn-primary" type="button"><span role="img" aria-label="poweroff" class="anticon anticon-poweroff"><svg focusable="false" class="" data-icon="poweroff" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M705.6 124.9a8 8 0 00-11.6 7.2v64.2c0 5.5 2.9 10.6 7.5 13.6a352.2 352.2 0 0162.2 49.8c32.7 32.8 58.4 70.9 76.3 113.3a355 355 0 0127.9 138.7c0 48.1-9.4 94.8-27.9 138.7a355.92 355.92 0 01-76.3 113.3 353.06 353.06 0 01-113.2 76.4c-43.8 18.6-90.5 28-138.5 28s-94.7-9.4-138.5-28a353.06 353.06 0 01-113.2-76.4A355.92 355.92 0 01184 650.4a355 355 0 01-27.9-138.7c0-48.1 9.4-94.8 27.9-138.7 17.9-42.4 43.6-80.5 76.3-113.3 19-19 39.8-35.6 62.2-49.8 4.7-2.9 7.5-8.1 7.5-13.6V132c0-6-6.3-9.8-11.6-7.2C178.5 195.2 82 339.3 80 506.3 77.2 745.1 272.5 943.5 511.2 944c239 .5 432.8-193.3 432.8-432.4 0-169.2-97-315.7-238.4-386.7zM480 560h64c4.4 0 8-3.6 8-8V88c0-4.4-3.6-8-8-8h-64c-4.4 0-8 3.6-8 8v464c0 4.4 3.6 8 8 8z"></path></svg></span><span>延迟1s</span></button></div>
<!---->
</div>
<div class="ant-space ant-space-horizontal ant-space-align-center" style="width: 100%;">
<div style="width: 100%;" class="ant-space ant-space-horizontal ant-space-align-center">
<div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-primary ant-btn-loading ant-btn-icon-only" type="button"><span class="ant-btn-loading-icon"><span role="img" aria-label="loading" class="anticon anticon-loading"><svg focusable="false" class="anticon-spin" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path></svg></span></span></button></div>
<!---->
<div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-primary ant-btn-circle ant-btn-loading ant-btn-icon-only" type="button"><span class="ant-btn-loading-icon"><span role="img" aria-label="loading" class="anticon anticon-loading"><svg focusable="false" class="anticon-spin" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path></svg></span></span></button></div>
<div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-circle ant-btn-primary ant-btn-loading ant-btn-icon-only" type="button"><span class="ant-btn-loading-icon"><span role="img" aria-label="loading" class="anticon anticon-loading"><svg focusable="false" class="anticon-spin" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path></svg></span></span></button></div>
<!---->
<div class="ant-space-item"><button class="ant-btn ant-btn-default ant-btn-round ant-btn-loading ant-btn-dangerous ant-btn-icon-only" type="button"><span class="ant-btn-loading-icon"><span role="img" aria-label="loading" class="anticon anticon-loading"><svg focusable="false" class="anticon-spin" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path></svg></span></span></button></div>
<div class="ant-space-item"><button class="ant-btn ant-btn-round ant-btn-default ant-btn-loading ant-btn-dangerous ant-btn-icon-only" type="button"><span class="ant-btn-loading-icon"><span role="img" aria-label="loading" class="anticon anticon-loading"><svg focusable="false" class="anticon-spin" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path></svg></span></span></button></div>
<!---->
</div>
`;
@ -219,10 +219,10 @@ exports[`renders ./components/button/demo/multiple.vue correctly 1`] = `
<button class="ant-btn ant-btn-primary" type="button">
<!----><span>Primary</span>
</button>
<button class="ant-btn" type="button">
<button class="ant-btn ant-btn-default" type="button">
<!----><span>secondary</span>
</button>
<button class="ant-btn ant-dropdown-trigger" type="button">
<button class="ant-btn ant-btn-default ant-dropdown-trigger" type="button">
<!----><span>Actions</span><span role="img" aria-label="down" class="anticon anticon-down"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span>
</button>
`;
@ -234,13 +234,13 @@ exports[`renders ./components/button/demo/size.vue correctly 1`] = `
<button class="ant-btn ant-btn-primary ant-btn-lg" type="button">
<!----><span>Primary</span>
</button>
<button class="ant-btn ant-btn-lg" type="button">
<button class="ant-btn ant-btn-default ant-btn-lg" type="button">
<!----><span>Normal</span>
</button>
<button class="ant-btn ant-btn-dashed ant-btn-lg" type="button">
<!----><span>Dashed</span>
</button>
<button class="ant-btn ant-btn-lg ant-btn-dangerous" type="button">
<button class="ant-btn ant-btn-default ant-btn-lg ant-btn-dangerous" type="button">
<!----><span>Danger</span>
</button>
<button class="ant-btn ant-btn-link ant-btn-lg" type="button">
@ -248,9 +248,9 @@ exports[`renders ./components/button/demo/size.vue correctly 1`] = `
</button>
<br>
<button class="ant-btn ant-btn-primary ant-btn-lg ant-btn-icon-only" type="button"><span role="img" aria-label="download" class="anticon anticon-download"><svg focusable="false" class="" data-icon="download" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M505.7 661a8 8 0 0012.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"></path></svg></span></button>
<button class="ant-btn ant-btn-primary ant-btn-circle ant-btn-lg ant-btn-icon-only" type="button"><span role="img" aria-label="download" class="anticon anticon-download"><svg focusable="false" class="" data-icon="download" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M505.7 661a8 8 0 0012.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"></path></svg></span></button>
<button class="ant-btn ant-btn-primary ant-btn-round ant-btn-lg" type="button"><span role="img" aria-label="download" class="anticon anticon-download"><svg focusable="false" class="" data-icon="download" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M505.7 661a8 8 0 0012.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"></path></svg></span><span>Download</span></button>
<button class="ant-btn ant-btn-primary ant-btn-round ant-btn-lg ant-btn-icon-only" type="button"><span role="img" aria-label="download" class="anticon anticon-download"><svg focusable="false" class="" data-icon="download" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M505.7 661a8 8 0 0012.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"></path></svg></span></button>
<button class="ant-btn ant-btn-circle ant-btn-primary ant-btn-lg ant-btn-icon-only" type="button"><span role="img" aria-label="download" class="anticon anticon-download"><svg focusable="false" class="" data-icon="download" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M505.7 661a8 8 0 0012.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"></path></svg></span></button>
<button class="ant-btn ant-btn-round ant-btn-primary ant-btn-lg" type="button"><span role="img" aria-label="download" class="anticon anticon-download"><svg focusable="false" class="" data-icon="download" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M505.7 661a8 8 0 0012.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"></path></svg></span><span>Download</span></button>
<button class="ant-btn ant-btn-round ant-btn-primary ant-btn-lg ant-btn-icon-only" type="button"><span role="img" aria-label="download" class="anticon anticon-download"><svg focusable="false" class="" data-icon="download" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M505.7 661a8 8 0 0012.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"></path></svg></span></button>
<button class="ant-btn ant-btn-primary ant-btn-lg" type="button"><span role="img" aria-label="download" class="anticon anticon-download"><svg focusable="false" class="" data-icon="download" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M505.7 661a8 8 0 0012.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"></path></svg></span><span>Download</span></button>
<br>
`;

22
components/button/__tests__/__snapshots__/index.test.js.snap
View File

@ -1,53 +1,53 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Button fixbug renders {0} , 0 and {false} 1`] = `
<button class="ant-btn" type="button">
<button class="ant-btn ant-btn-default" type="button">
<!----><span>0</span>
</button>
`;
exports[`Button fixbug renders {0} , 0 and {false} 2`] = `
<button class="ant-btn" type="button">
<button class="ant-btn ant-btn-default" type="button">
<!----><span>0</span>
</button>
`;
exports[`Button fixbug renders {0} , 0 and {false} 3`] = `
<button class="ant-btn" type="button">
<button class="ant-btn ant-btn-default" type="button">
<!---->
</button>
`;
exports[`Button renders Chinese characters correctly 1`] = `
<button class="ant-btn" type="button">
<button class="ant-btn ant-btn-default" type="button">
<!----><span>按 钮</span>
</button>
`;
exports[`Button renders Chinese characters correctly 2`] = `
<button class="ant-btn" type="button">
<button class="ant-btn ant-btn-default" type="button">
<!----><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span><span>按钮</span>
</button>
`;
exports[`Button renders Chinese characters correctly 3`] = `
<button class="ant-btn" type="button">
<button class="ant-btn ant-btn-default" type="button">
<!----><span>按 钮</span>
</button>
`;
exports[`Button renders Chinese characters correctly 4`] = `<button class="ant-btn ant-btn-loading" type="button"><span class="ant-btn-loading-icon"><span role="img" aria-label="loading" class="anticon anticon-loading"><svg focusable="false" class="anticon-spin" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path></svg></span></span><span>按 钮</span></button>`;
exports[`Button renders Chinese characters correctly 4`] = `<button class="ant-btn ant-btn-default ant-btn-loading" type="button"><span class="ant-btn-loading-icon"><span role="img" aria-label="loading" class="anticon anticon-loading"><svg focusable="false" class="anticon-spin" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path></svg></span></span><span>按 钮</span></button>`;
exports[`Button renders Chinese characters correctly 5`] = `<button class="ant-btn ant-btn-loading" type="button"><span class="ant-btn-loading-icon"><span role="img" aria-label="loading" class="anticon anticon-loading"><svg focusable="false" class="anticon-spin" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path></svg></span></span><span>按 钮</span></button>`;
exports[`Button renders Chinese characters correctly 5`] = `<button class="ant-btn ant-btn-default ant-btn-loading" type="button"><span class="ant-btn-loading-icon"><span role="img" aria-label="loading" class="anticon anticon-loading"><svg focusable="false" class="anticon-spin" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path></svg></span></span><span>按 钮</span></button>`;
exports[`Button renders Chinese characters correctly 6`] = `
<button class="ant-btn ant-btn-two-chinese-chars" type="button">
<button class="ant-btn ant-btn-default ant-btn-two-chinese-chars" type="button">
<!----><span>按钮</span>
</button>
`;
exports[`Button renders correctly 1`] = `
<button class="ant-btn" type="button">
<button class="ant-btn ant-btn-default" type="button">
<!----><span>Follow</span>
</button>
`;
@ -59,7 +59,7 @@ exports[`Button should not render as link button when href is undefined 1`] = `
`;
exports[`Button should support link button 1`] = `
<a class="ant-btn" href="http://ant.design" target="_blank">
<a class="ant-btn ant-btn-default" href="http://ant.design" target="_blank">
<!----><span>link button</span>
</a>
`;

51
components/button/__tests__/wave.test.js
View File

@ -13,54 +13,6 @@ describe('click wave effect', () => {
await sleep(20);
}
it('should have click wave effect for primary button', async () => {
const wrapper = mount({
render() {
return <Button type="primary">button</Button>;
},
});
await clickButton(wrapper);
expect(wrapper.find('.ant-btn').attributes('ant-click-animating-without-extra-node')).toBe(
'true',
);
});
it('should have click wave effect for default button', async () => {
const wrapper = mount({
render() {
return <Button>button</Button>;
},
});
await clickButton(wrapper);
expect(wrapper.find('.ant-btn').attributes('ant-click-animating-without-extra-node')).toBe(
'true',
);
});
it('should not have click wave effect for link type button', async () => {
const wrapper = mount({
render() {
return <Button type="link">button</Button>;
},
});
await clickButton(wrapper);
expect(wrapper.find('.ant-btn').attributes('ant-click-animating-without-extra-node')).toBe(
undefined,
);
});
it('should not have click wave effect for text type button', async () => {
const wrapper = mount({
render() {
return <Button type="text">button</Button>;
},
});
await clickButton(wrapper);
expect(wrapper.find('.ant-btn').attributes('ant-click-animating-without-extra-node')).toBe(
undefined,
);
});
it('should handle transitionstart', async () => {
const wrapper = mount({
render() {
@ -70,9 +22,6 @@ describe('click wave effect', () => {
await clickButton(wrapper);
const buttonNode = wrapper.find('.ant-btn').element;
buttonNode.dispatchEvent(new Event('transitionstart'));
expect(wrapper.find('.ant-btn').attributes('ant-click-animating-without-extra-node')).toBe(
'true',
);
wrapper.unmount();
buttonNode.dispatchEvent(new Event('transitionstart'));
});

14
components/button/demo/button-group.vue
View File

@ -56,23 +56,17 @@ Debug usage
</a-button-group>
</div>
</template>
<script lang="ts">
<script lang="ts" setup>
import {
LeftOutlined,
RightOutlined,
CloudDownloadOutlined,
CloudOutlined,
} from '@ant-design/icons-vue';
export default {
components: {
LeftOutlined,
RightOutlined,
CloudDownloadOutlined,
CloudOutlined,
},
};
</script>
<style>
<style scoped>
#components-button-demo-button-group > h4 {
margin: 16px 0;
font-size: 14px;

7
components/button/demo/icon.vue
View File

@ -96,11 +96,6 @@ If you want specific control over the positioning and placement of the `Icon`, t
<template #icon><SearchOutlined /></template>
</a-button>
</template>
<script>
<script lang="ts" setup>
import { SearchOutlined } from '@ant-design/icons-vue';
export default {
components: {
SearchOutlined,
},
};
</script>

2
components/button/demo/index.vue
View File

@ -44,7 +44,7 @@ export default defineComponent({
},
});
</script>
<style>
<style scoped>
[id^='components-button-demo-'] .ant-btn {
margin-right: 8px;
margin-bottom: 12px;

29
components/button/demo/loading.vue
View File

@ -35,29 +35,20 @@ A loading indicator can be added to a button by setting the `loading` property o
<a-button danger shape="round" loading />
</a-space>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
<script lang="ts" setup>
import { ref } from 'vue';
import { PoweroffOutlined } from '@ant-design/icons-vue';
interface DelayLoading {
delay: number;
}
export default defineComponent({
components: { PoweroffOutlined },
setup() {
const iconLoading = ref<boolean | DelayLoading>(false);
const enterIconLoading = () => {
iconLoading.value = { delay: 1000 };
const loading = ref<boolean>(false);
const iconLoading = ref<boolean | DelayLoading>(false);
const enterIconLoading = () => {
iconLoading.value = { delay: 1000 };
setTimeout(() => {
iconLoading.value = false;
}, 6000);
};
return {
loading: ref(false),
iconLoading,
enterIconLoading,
};
},
});
setTimeout(() => {
iconLoading.value = false;
}, 6000);
};
</script>

20
components/button/demo/multiple.vue
View File

@ -32,21 +32,11 @@ If you need several buttons, we recommend that you use 1 primary button + n seco
</a-button>
</a-dropdown>
</template>
<script lang="ts">
<script lang="ts" setup>
import { DownOutlined } from '@ant-design/icons-vue';
import type { MenuProps } from 'ant-design-vue';
import { defineComponent } from 'vue';
export default defineComponent({
components: {
DownOutlined,
},
setup() {
const handleMenuClick: MenuProps['onClick'] = e => {
console.log('click', e);
};
return {
handleMenuClick,
};
},
});
const handleMenuClick: MenuProps['onClick'] = e => {
console.log('click', e);
};
</script>

15
components/button/demo/size.vue
View File

@ -62,18 +62,9 @@ If a large or small button is desired, set the `size` property to either `large`
</a-button>
<br />
</template>
<script lang="ts">
<script lang="ts" setup>
import { DownloadOutlined } from '@ant-design/icons-vue';
import type { SizeType } from 'ant-design-vue/es/config-provider';
import { defineComponent, ref } from 'vue';
export default defineComponent({
components: {
DownloadOutlined,
},
setup() {
return {
size: ref<SizeType>('large'),
};
},
});
import { ref } from 'vue';
const size = ref<SizeType>('large');
</script>

33
components/calendar/__tests__/__snapshots__/demo.test.js.snap
View File

@ -8,7 +8,8 @@ exports[`renders ./components/calendar/demo/basic.vue correctly 1`] = `
<!---->
<div class="ant-select-selector"><span class="ant-select-selection-search"><input type="search" id="rc_select_TEST_OR_SSR" autocomplete="off" class="ant-select-selection-search-input" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" aria-activedescendant="rc_select_TEST_OR_SSR_list_0" readonly="" unselectable="on" style="opacity: 0;"></span><span class="ant-select-selection-item" title="2016">2016</span>
<!---->
</div><span class="ant-select-arrow" style="user-select: none;" unselectable="on" aria-hidden="true"><span role="img" aria-label="down" class="anticon anticon-down ant-select-suffix"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span>
</div><span class="ant-select-arrow" style="user-select: none;" unselectable="on" aria-hidden="true"><span role="img" aria-label="down" class="anticon anticon-down ant-select-suffix"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span>
<!----></span>
<!---->
</div>
<div class="ant-select ant-picker-calendar-month-select ant-select-single ant-select-show-arrow">
@ -16,7 +17,8 @@ exports[`renders ./components/calendar/demo/basic.vue correctly 1`] = `
<!---->
<div class="ant-select-selector"><span class="ant-select-selection-search"><input type="search" id="rc_select_TEST_OR_SSR" autocomplete="off" class="ant-select-selection-search-input" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" aria-activedescendant="rc_select_TEST_OR_SSR_list_0" readonly="" unselectable="on" style="opacity: 0;"></span><span class="ant-select-selection-item" title="Nov">Nov</span>
<!---->
</div><span class="ant-select-arrow" style="user-select: none;" unselectable="on" aria-hidden="true"><span role="img" aria-label="down" class="anticon anticon-down ant-select-suffix"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span>
</div><span class="ant-select-arrow" style="user-select: none;" unselectable="on" aria-hidden="true"><span role="img" aria-label="down" class="anticon anticon-down ant-select-suffix"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span>
<!----></span>
<!---->
</div>
<div class="ant-radio-group ant-radio-group-outline ant-picker-calendar-mode-switch"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="month"><span class="ant-radio-button-inner"></span></span><span>Month</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="year"><span class="ant-radio-button-inner"></span></span><span>Year</span></label></div>
@ -404,7 +406,8 @@ exports[`renders ./components/calendar/demo/card.vue correctly 1`] = `
<!---->
<div class="ant-select-selector"><span class="ant-select-selection-search"><input type="search" id="rc_select_TEST_OR_SSR" autocomplete="off" class="ant-select-selection-search-input" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" aria-activedescendant="rc_select_TEST_OR_SSR_list_0" readonly="" unselectable="on" style="opacity: 0;"></span><span class="ant-select-selection-item" title="2016">2016</span>
<!---->
</div><span class="ant-select-arrow" style="user-select: none;" unselectable="on" aria-hidden="true"><span role="img" aria-label="down" class="anticon anticon-down ant-select-suffix"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span>
</div><span class="ant-select-arrow" style="user-select: none;" unselectable="on" aria-hidden="true"><span role="img" aria-label="down" class="anticon anticon-down ant-select-suffix"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span>
<!----></span>
<!---->
</div>
<div class="ant-select ant-select-sm ant-picker-calendar-month-select ant-select-single ant-select-show-arrow">
@ -412,7 +415,8 @@ exports[`renders ./components/calendar/demo/card.vue correctly 1`] = `
<!---->
<div class="ant-select-selector"><span class="ant-select-selection-search"><input type="search" id="rc_select_TEST_OR_SSR" autocomplete="off" class="ant-select-selection-search-input" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" aria-activedescendant="rc_select_TEST_OR_SSR_list_0" readonly="" unselectable="on" style="opacity: 0;"></span><span class="ant-select-selection-item" title="Nov">Nov</span>
<!---->
</div><span class="ant-select-arrow" style="user-select: none;" unselectable="on" aria-hidden="true"><span role="img" aria-label="down" class="anticon anticon-down ant-select-suffix"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span>
</div><span class="ant-select-arrow" style="user-select: none;" unselectable="on" aria-hidden="true"><span role="img" aria-label="down" class="anticon anticon-down ant-select-suffix"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span>
<!----></span>
<!---->
</div>
<div class="ant-radio-group ant-radio-group-outline ant-radio-group-small ant-picker-calendar-mode-switch"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="month"><span class="ant-radio-button-inner"></span></span><span>Month</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="year"><span class="ant-radio-button-inner"></span></span><span>Year</span></label></div>
@ -797,7 +801,7 @@ exports[`renders ./components/calendar/demo/customize-header.vue correctly 1`] =
<div class="ant-picker-calendar ant-picker-calendar-mini">
<div style="padding: 10px;">
<div style="margin-bottom: 10px;">Custom header</div>
<div class="ant-row ant-row-space-between" type="flex">
<div type="flex" class="ant-row ant-row-space-between">
<div class="ant-col">
<div class="ant-radio-group ant-radio-group-outline ant-radio-group-small"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="month"><span class="ant-radio-button-inner"></span></span><span>Month</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="year"><span class="ant-radio-button-inner"></span></span><span>Year</span></label></div>
</div>
@ -807,7 +811,8 @@ exports[`renders ./components/calendar/demo/customize-header.vue correctly 1`] =
<!---->
<div class="ant-select-selector"><span class="ant-select-selection-search"><input type="search" id="rc_select_TEST_OR_SSR" autocomplete="off" class="ant-select-selection-search-input" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" aria-activedescendant="rc_select_TEST_OR_SSR_list_0" readonly="" unselectable="on" style="opacity: 0;"></span><span class="ant-select-selection-item">2016</span>
<!---->
</div><span class="ant-select-arrow" style="user-select: none;" unselectable="on" aria-hidden="true"><span role="img" aria-label="down" class="anticon anticon-down ant-select-suffix"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span>
</div><span class="ant-select-arrow" style="user-select: none;" unselectable="on" aria-hidden="true"><span role="img" aria-label="down" class="anticon anticon-down ant-select-suffix"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span>
<!----></span>
<!---->
</div>
</div>
@ -817,7 +822,8 @@ exports[`renders ./components/calendar/demo/customize-header.vue correctly 1`] =
<!---->
<div class="ant-select-selector"><span class="ant-select-selection-search"><input type="search" id="rc_select_TEST_OR_SSR" autocomplete="off" class="ant-select-selection-search-input" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" aria-activedescendant="rc_select_TEST_OR_SSR_list_0" readonly="" unselectable="on" style="opacity: 0;"></span><span class="ant-select-selection-item">Nov</span>
<!---->
</div><span class="ant-select-arrow" style="user-select: none;" unselectable="on" aria-hidden="true"><span role="img" aria-label="down" class="anticon anticon-down ant-select-suffix"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span>
</div><span class="ant-select-arrow" style="user-select: none;" unselectable="on" aria-hidden="true"><span role="img" aria-label="down" class="anticon anticon-down ant-select-suffix"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span>
<!----></span>
<!---->
</div>
</div>
@ -1206,7 +1212,8 @@ exports[`renders ./components/calendar/demo/notice-calendar.vue correctly 1`] =
<!---->
<div class="ant-select-selector"><span class="ant-select-selection-search"><input type="search" id="rc_select_TEST_OR_SSR" autocomplete="off" class="ant-select-selection-search-input" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" aria-activedescendant="rc_select_TEST_OR_SSR_list_0" readonly="" unselectable="on" style="opacity: 0;"></span><span class="ant-select-selection-item" title="2016">2016</span>
<!---->
</div><span class="ant-select-arrow" style="user-select: none;" unselectable="on" aria-hidden="true"><span role="img" aria-label="down" class="anticon anticon-down ant-select-suffix"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span>
</div><span class="ant-select-arrow" style="user-select: none;" unselectable="on" aria-hidden="true"><span role="img" aria-label="down" class="anticon anticon-down ant-select-suffix"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span>
<!----></span>
<!---->
</div>
<div class="ant-select ant-picker-calendar-month-select ant-select-single ant-select-show-arrow">
@ -1214,7 +1221,8 @@ exports[`renders ./components/calendar/demo/notice-calendar.vue correctly 1`] =
<!---->
<div class="ant-select-selector"><span class="ant-select-selection-search"><input type="search" id="rc_select_TEST_OR_SSR" autocomplete="off" class="ant-select-selection-search-input" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" aria-activedescendant="rc_select_TEST_OR_SSR_list_0" readonly="" unselectable="on" style="opacity: 0;"></span><span class="ant-select-selection-item" title="Nov">Nov</span>
<!---->
</div><span class="ant-select-arrow" style="user-select: none;" unselectable="on" aria-hidden="true"><span role="img" aria-label="down" class="anticon anticon-down ant-select-suffix"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span>
</div><span class="ant-select-arrow" style="user-select: none;" unselectable="on" aria-hidden="true"><span role="img" aria-label="down" class="anticon anticon-down ant-select-suffix"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span>
<!----></span>
<!---->
</div>
<div class="ant-radio-group ant-radio-group-outline ant-picker-calendar-mode-switch"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="month"><span class="ant-radio-button-inner"></span></span><span>Month</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="year"><span class="ant-radio-button-inner"></span></span><span>Year</span></label></div>
@ -1622,6 +1630,7 @@ exports[`renders ./components/calendar/demo/select.vue correctly 1`] = `
<!---->
</div>
<!---->
<!---->
</div>
<div class="ant-picker-calendar ant-picker-calendar-full">
<div class="ant-picker-calendar-header">
@ -1630,7 +1639,8 @@ exports[`renders ./components/calendar/demo/select.vue correctly 1`] = `
<!---->
<div class="ant-select-selector"><span class="ant-select-selection-search"><input type="search" id="rc_select_TEST_OR_SSR" autocomplete="off" class="ant-select-selection-search-input" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" aria-activedescendant="rc_select_TEST_OR_SSR_list_0" readonly="" unselectable="on" style="opacity: 0;"></span><span class="ant-select-selection-item" title="2017">2017</span>
<!---->
</div><span class="ant-select-arrow" style="user-select: none;" unselectable="on" aria-hidden="true"><span role="img" aria-label="down" class="anticon anticon-down ant-select-suffix"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span>
</div><span class="ant-select-arrow" style="user-select: none;" unselectable="on" aria-hidden="true"><span role="img" aria-label="down" class="anticon anticon-down ant-select-suffix"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span>
<!----></span>
<!---->
</div>
<div class="ant-select ant-picker-calendar-month-select ant-select-single ant-select-show-arrow">
@ -1638,7 +1648,8 @@ exports[`renders ./components/calendar/demo/select.vue correctly 1`] = `
<!---->
<div class="ant-select-selector"><span class="ant-select-selection-search"><input type="search" id="rc_select_TEST_OR_SSR" autocomplete="off" class="ant-select-selection-search-input" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" aria-activedescendant="rc_select_TEST_OR_SSR_list_0" readonly="" unselectable="on" style="opacity: 0;"></span><span class="ant-select-selection-item" title="Jan">Jan</span>
<!---->
</div><span class="ant-select-arrow" style="user-select: none;" unselectable="on" aria-hidden="true"><span role="img" aria-label="down" class="anticon anticon-down ant-select-suffix"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span>
</div><span class="ant-select-arrow" style="user-select: none;" unselectable="on" aria-hidden="true"><span role="img" aria-label="down" class="anticon anticon-down ant-select-suffix"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span>
<!----></span>
<!---->
</div>
<div class="ant-radio-group ant-radio-group-outline ant-picker-calendar-mode-switch"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="month"><span class="ant-radio-button-inner"></span></span><span>Month</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="year"><span class="ant-radio-button-inner"></span></span><span>Year</span></label></div>

22
components/calendar/demo/basic.vue
View File

@ -18,21 +18,11 @@ A basic calendar component with Year/Month switch.
<template>
<a-calendar v-model:value="value" @panelChange="onPanelChange" />
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
<script lang="ts" setup>
import { ref } from 'vue';
import { Dayjs } from 'dayjs';
export default defineComponent({
setup() {
const value = ref<Dayjs>();
const onPanelChange = (value: Dayjs, mode: string) => {
console.log(value, mode);
};
return {
value,
onPanelChange,
};
},
});
const value = ref<Dayjs>();
const onPanelChange = (value: Dayjs, mode: string) => {
console.log(value, mode);
};
</script>

21
components/calendar/demo/card.vue
View File

@ -20,21 +20,12 @@ Nested inside a container element for rendering in limited space.
<a-calendar v-model:value="value" :fullscreen="false" @panelChange="onPanelChange" />
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
<script lang="ts" setup>
import { ref } from 'vue';
import { Dayjs } from 'dayjs';
export default defineComponent({
setup() {
const value = ref<Dayjs>();
const onPanelChange = (value: Dayjs, mode: string) => {
console.log(value, mode);
};
return {
value,
onPanelChange,
};
},
});
const value = ref<Dayjs>();
const onPanelChange = (value: Dayjs, mode: string) => {
console.log(value, mode);
};
</script>

56
components/calendar/demo/customize-header.vue
View File

@ -76,42 +76,30 @@ Customize Calendar header content.
</a-calendar>
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
<script lang="ts" setup>
import { ref } from 'vue';
import { Dayjs } from 'dayjs';
const value = ref<Dayjs>();
export default defineComponent({
setup() {
const value = ref<Dayjs>();
const onPanelChange = (value: Dayjs, mode: string) => {
console.log(value, mode);
};
const onPanelChange = (value: Dayjs, mode: string) => {
console.log(value, mode);
};
const getMonths = (value: Dayjs) => {
const localeData = value.localeData();
const months = [];
for (let i = 0; i < 12; i++) {
months.push(localeData.monthsShort(value.month(i)));
}
return months;
};
const getMonths = (value: Dayjs) => {
const localeData = value.localeData();
const months = [];
for (let i = 0; i < 12; i++) {
months.push(localeData.monthsShort(value.month(i)));
}
return months;
};
const getYears = (value: Dayjs) => {
const year = value.year();
const years = [];
for (let i = year - 10; i < year + 10; i += 1) {
years.push(i);
}
return years;
};
return {
value,
onPanelChange,
getMonths,
getYears,
};
},
});
const getYears = (value: Dayjs) => {
const year = value.year();
const years = [];
for (let i = year - 10; i < year + 10; i += 1) {
years.push(i);
}
return years;
};
</script>

87
components/calendar/demo/notice-calendar.vue
View File

@ -33,58 +33,47 @@ This component can be rendered by using `dateCellRender` and `monthCellRender` w
</template>
</a-calendar>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
<script lang="ts" setup>
import { ref } from 'vue';
import { Dayjs } from 'dayjs';
const value = ref<Dayjs>();
export default defineComponent({
setup() {
const value = ref<Dayjs>();
const getListData = (value: Dayjs) => {
let listData;
switch (value.date()) {
case 8:
listData = [
{ type: 'warning', content: 'This is warning event.' },
{ type: 'success', content: 'This is usual event.' },
];
break;
case 10:
listData = [
{ type: 'warning', content: 'This is warning event.' },
{ type: 'success', content: 'This is usual event.' },
{ type: 'error', content: 'This is error event.' },
];
break;
case 15:
listData = [
{ type: 'warning', content: 'This is warning event' },
{ type: 'success', content: 'This is very long usual event。。....' },
{ type: 'error', content: 'This is error event 1.' },
{ type: 'error', content: 'This is error event 2.' },
{ type: 'error', content: 'This is error event 3.' },
{ type: 'error', content: 'This is error event 4.' },
];
break;
default:
}
return listData || [];
};
const getListData = (value: Dayjs) => {
let listData;
switch (value.date()) {
case 8:
listData = [
{ type: 'warning', content: 'This is warning event.' },
{ type: 'success', content: 'This is usual event.' },
];
break;
case 10:
listData = [
{ type: 'warning', content: 'This is warning event.' },
{ type: 'success', content: 'This is usual event.' },
{ type: 'error', content: 'This is error event.' },
];
break;
case 15:
listData = [
{ type: 'warning', content: 'This is warning event' },
{ type: 'success', content: 'This is very long usual event。。....' },
{ type: 'error', content: 'This is error event 1.' },
{ type: 'error', content: 'This is error event 2.' },
{ type: 'error', content: 'This is error event 3.' },
{ type: 'error', content: 'This is error event 4.' },
];
break;
default:
}
return listData || [];
};
const getMonthData = (value: Dayjs) => {
if (value.month() === 8) {
return 1394;
}
};
return {
value,
getListData,
getMonthData,
};
},
});
const getMonthData = (value: Dayjs) => {
if (value.month() === 8) {
return 1394;
}
};
</script>
<style scoped>
.events {

33
components/calendar/demo/select.vue
View File

@ -20,28 +20,17 @@ A basic calendar component with Year/Month switch.
<a-alert :message="`You selected date: ${selectedValue && selectedValue.format('YYYY-MM-DD')}`" />
<a-calendar :value="date" @select="onSelect" @panelChange="onPanelChange" />
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
<script lang="ts" setup>
import { ref } from 'vue';
import dayjs, { Dayjs } from 'dayjs';
const date = ref(dayjs('2017-01-25'));
const selectedValue = ref(dayjs('2017-01-25'));
export default defineComponent({
setup() {
const date = ref(dayjs('2017-01-25'));
const selectedValue = ref(dayjs('2017-01-25'));
const onSelect = (value: Dayjs) => {
date.value = value;
selectedValue.value = value;
};
const onPanelChange = (value: Dayjs) => {
date.value = value;
};
return {
date,
selectedValue,
onSelect,
onPanelChange,
};
},
});
const onSelect = (value: Dayjs) => {
date.value = value;
selectedValue.value = value;
};
const onPanelChange = (value: Dayjs) => {
date.value = value;
};
</script>

82
components/card/__tests__/__snapshots__/demo.test.js.snap
View File

@ -1,7 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders ./components/card/demo/basic.vue correctly 1`] = `
<div class="ant-card ant-card-bordered" style="width: 300px;">
<div style="width: 300px;" class="ant-card ant-card-bordered">
<div class="ant-card-head">
<div class="ant-card-head-wrapper">
<div class="ant-card-head-title">Default size card</div>
@ -18,7 +18,7 @@ exports[`renders ./components/card/demo/basic.vue correctly 1`] = `
<!---->
</div>
<br>
<div class="ant-card ant-card-bordered ant-card-small" style="width: 300px;">
<div style="width: 300px;" class="ant-card ant-card-bordered ant-card-small">
<div class="ant-card-head">
<div class="ant-card-head-wrapper">
<div class="ant-card-head-title">Small size card</div>
@ -38,7 +38,7 @@ exports[`renders ./components/card/demo/basic.vue correctly 1`] = `
exports[`renders ./components/card/demo/border-less.vue correctly 1`] = `
<div style="background: rgb(236, 236, 236); padding: 30px;">
<div class="ant-card" style="width: 300px;">
<div style="width: 300px;" class="ant-card">
<div class="ant-card-head">
<div class="ant-card-head-wrapper">
<div class="ant-card-head-title">Card title</div>
@ -58,7 +58,7 @@ exports[`renders ./components/card/demo/border-less.vue correctly 1`] = `
`;
exports[`renders ./components/card/demo/flexible-content.vue correctly 1`] = `
<div class="ant-card ant-card-bordered ant-card-hoverable" style="width: 240px;">
<div style="width: 240px;" class="ant-card ant-card-bordered ant-card-hoverable">
<!---->
<div class="ant-card-cover"><img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png"></div>
<div class="ant-card-body">
@ -75,7 +75,7 @@ exports[`renders ./components/card/demo/flexible-content.vue correctly 1`] = `
`;
exports[`renders ./components/card/demo/grid-card.vue correctly 1`] = `
<div class="ant-card ant-card-bordered ant-card-contain-grid">
<div class="ant-card ant-card-bordered ant-card-contain-grid">
<div class="ant-card-head">
<div class="ant-card-head-wrapper">
<div class="ant-card-head-title">Card Title</div>
@ -154,7 +154,7 @@ exports[`renders ./components/card/demo/in-column.vue correctly 1`] = `
`;
exports[`renders ./components/card/demo/inner.vue correctly 1`] = `
<div class="ant-card ant-card-bordered">
<div class="ant-card ant-card-bordered">
<div class="ant-card-head">
<div class="ant-card-head-wrapper">
<div class="ant-card-head-title">Card title</div>
@ -165,7 +165,7 @@ exports[`renders ./components/card/demo/inner.vue correctly 1`] = `
<!---->
<div class="ant-card-body">
<p style="font-size: 14px; color: rgba(0, 0, 0, 0.85); margin-bottom: 16px; font-weight: 500;"> Group title </p>
<div class="ant-card ant-card-bordered">
<div class="ant-card ant-card-bordered">
<div class="ant-card-head">
<div class="ant-card-head-wrapper">
<div class="ant-card-head-title">Inner card title</div>
@ -177,7 +177,7 @@ exports[`renders ./components/card/demo/inner.vue correctly 1`] = `
<div class="ant-card-body"> Inner Card content </div>
<!---->
</div>
<div class="ant-card ant-card-bordered" style="margin-top: 16px;">
<div style="margin-top: 16px;" class="ant-card ant-card-bordered">
<div class="ant-card-head">
<div class="ant-card-head-wrapper">
<div class="ant-card-head-title">Inner card title</div>
@ -195,7 +195,7 @@ exports[`renders ./components/card/demo/inner.vue correctly 1`] = `
`;
exports[`renders ./components/card/demo/loading.vue correctly 1`] = `
<div class="ant-card ant-card-loading ant-card-bordered">
<div class="ant-card ant-card-loading ant-card-bordered">
<div class="ant-card-head">
<div class="ant-card-head-wrapper">
<div class="ant-card-head-title">Card title</div>
@ -205,58 +205,28 @@ exports[`renders ./components/card/demo/loading.vue correctly 1`] = `
</div>
<!---->
<div class="ant-card-body">
<div class="ant-card-loading-content">
<div class="ant-row" style="margin-left: -4px; margin-right: -4px;">
<div class="ant-col ant-col-22" style="padding-left: 4px; padding-right: 4px;">
<div class="ant-card-loading-block"></div>
</div>
</div>
<div class="ant-row" style="margin-left: -4px; margin-right: -4px;">
<div class="ant-col ant-col-8" style="padding-left: 4px; padding-right: 4px;">
<div class="ant-card-loading-block"></div>
</div>
<div class="ant-col ant-col-15" style="padding-left: 4px; padding-right: 4px;">
<div class="ant-card-loading-block"></div>
</div>
</div>
<div class="ant-row" style="margin-left: -4px; margin-right: -4px;">
<div class="ant-col ant-col-6" style="padding-left: 4px; padding-right: 4px;">
<div class="ant-card-loading-block"></div>
</div>
<div class="ant-col ant-col-18" style="padding-left: 4px; padding-right: 4px;">
<div class="ant-card-loading-block"></div>
</div>
</div>
<div class="ant-row" style="margin-left: -4px; margin-right: -4px;">
<div class="ant-col ant-col-13" style="padding-left: 4px; padding-right: 4px;">
<div class="ant-card-loading-block"></div>
</div>
<div class="ant-col ant-col-9" style="padding-left: 4px; padding-right: 4px;">
<div class="ant-card-loading-block"></div>
</div>
</div>
<div class="ant-row" style="margin-left: -4px; margin-right: -4px;">
<div class="ant-col ant-col-4" style="padding-left: 4px; padding-right: 4px;">
<div class="ant-card-loading-block"></div>
</div>
<div class="ant-col ant-col-3" style="padding-left: 4px; padding-right: 4px;">
<div class="ant-card-loading-block"></div>
</div>
<div class="ant-col ant-col-16" style="padding-left: 4px; padding-right: 4px;">
<div class="ant-card-loading-block"></div>
</div>
<div class="ant-skeleton ant-skeleton-active ">
<!---->
<div class="ant-skeleton-content">
<!---->
<ul class="ant-skeleton-paragraph">
<li></li>
<li></li>
<li></li>
<li style="width: 61%;"></li>
</ul>
</div>
</div>
</div>
<!---->
</div>
<button style="margin-top: 16px;" class="ant-btn" type="button">
<button style="margin-top: 16px;" class="ant-btn ant-btn-default" type="button">
<!----><span>Toggle loading</span>
</button>
`;
exports[`renders ./components/card/demo/meta.vue correctly 1`] = `
<div class="ant-card ant-card-bordered ant-card-hoverable" style="width: 300px;">
<div style="width: 300px;" class="ant-card ant-card-bordered ant-card-hoverable">
<!---->
<div class="ant-card-cover"><img alt="example" src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"></div>
<div class="ant-card-body">
@ -277,7 +247,7 @@ exports[`renders ./components/card/demo/meta.vue correctly 1`] = `
`;
exports[`renders ./components/card/demo/simple.vue correctly 1`] = `
<div class="ant-card ant-card-bordered" style="width: 300px;">
<div style="width: 300px;" class="ant-card ant-card-bordered">
<!---->
<!---->
<div class="ant-card-body">
@ -290,13 +260,13 @@ exports[`renders ./components/card/demo/simple.vue correctly 1`] = `
`;
exports[`renders ./components/card/demo/tabs.vue correctly 1`] = `
<div class="ant-card ant-card-bordered ant-card-contain-tabs" style="width: 100%;">
<div style="width: 100%;" class="ant-card ant-card-bordered ant-card-contain-tabs">
<div class="ant-card-head">
<div class="ant-card-head-wrapper">
<div class="ant-card-head-title">Card title</div>
<div class="ant-card-extra"><a href="#">More</a></div>
</div>
<div class="ant-tabs ant-tabs-top ant-tabs-large ant-card-head-tabs">
<div class="ant-tabs ant-tabs-top ant-tabs-large ant-card-head-tabs">
<div role="tablist" class="ant-tabs-nav">
<!---->
<div class="ant-tabs-nav-wrap">
@ -338,13 +308,13 @@ exports[`renders ./components/card/demo/tabs.vue correctly 1`] = `
</div>
<br>
<br>
<div class="ant-card ant-card-bordered ant-card-contain-tabs" style="width: 100%;">
<div style="width: 100%;" class="ant-card ant-card-bordered ant-card-contain-tabs">
<div class="ant-card-head">
<div class="ant-card-head-wrapper">
<!---->
<!---->
</div>
<div class="ant-tabs ant-tabs-top ant-tabs-large ant-card-head-tabs">
<div class="ant-tabs ant-tabs-top ant-tabs-large ant-card-head-tabs">
<div role="tablist" class="ant-tabs-nav">
<!---->
<div class="ant-tabs-nav-wrap">

56
components/card/__tests__/__snapshots__/index.test.js.snap
View File

@ -1,50 +1,20 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Card should still have padding when card which set padding to 0 is loading 1`] = `
<div class="ant-card ant-card-loading ant-card-bordered">
<div class="ant-card ant-card-loading ant-card-bordered">
<!---->
<!---->
<div class="ant-card-body" style="padding: 0px;">
<div class="ant-card-loading-content" style="padding: 24px;">
<div class="ant-row" style="margin-left: -4px; margin-right: -4px;">
<div class="ant-col ant-col-22" style="padding-left: 4px; padding-right: 4px;">
<div class="ant-card-loading-block"></div>
</div>
</div>
<div class="ant-row" style="margin-left: -4px; margin-right: -4px;">
<div class="ant-col ant-col-8" style="padding-left: 4px; padding-right: 4px;">
<div class="ant-card-loading-block"></div>
</div>
<div class="ant-col ant-col-15" style="padding-left: 4px; padding-right: 4px;">
<div class="ant-card-loading-block"></div>
</div>
</div>
<div class="ant-row" style="margin-left: -4px; margin-right: -4px;">
<div class="ant-col ant-col-6" style="padding-left: 4px; padding-right: 4px;">
<div class="ant-card-loading-block"></div>
</div>
<div class="ant-col ant-col-18" style="padding-left: 4px; padding-right: 4px;">
<div class="ant-card-loading-block"></div>
</div>
</div>
<div class="ant-row" style="margin-left: -4px; margin-right: -4px;">
<div class="ant-col ant-col-13" style="padding-left: 4px; padding-right: 4px;">
<div class="ant-card-loading-block"></div>
</div>
<div class="ant-col ant-col-9" style="padding-left: 4px; padding-right: 4px;">
<div class="ant-card-loading-block"></div>
</div>
</div>
<div class="ant-row" style="margin-left: -4px; margin-right: -4px;">
<div class="ant-col ant-col-4" style="padding-left: 4px; padding-right: 4px;">
<div class="ant-card-loading-block"></div>
</div>
<div class="ant-col ant-col-3" style="padding-left: 4px; padding-right: 4px;">
<div class="ant-card-loading-block"></div>
</div>
<div class="ant-col ant-col-16" style="padding-left: 4px; padding-right: 4px;">
<div class="ant-card-loading-block"></div>
</div>
<div class="ant-skeleton ant-skeleton-active ">
<!---->
<div class="ant-skeleton-content">
<!---->
<ul class="ant-skeleton-paragraph">
<li></li>
<li></li>
<li></li>
<li style="width: 61%;"></li>
</ul>
</div>
</div>
</div>
@ -53,11 +23,11 @@ exports[`Card should still have padding when card which set padding to 0 is load
`;
exports[`Card title should be vertically aligned 1`] = `
<div class="ant-card ant-card-bordered" style="width: 300px;">
<div style="width: 300px;" class="ant-card ant-card-bordered">
<div class="ant-card-head">
<div class="ant-card-head-wrapper">
<div class="ant-card-head-title">Card title</div>
<div class="ant-card-extra"><button class="ant-btn" type="button">
<div class="ant-card-extra"><button class="ant-btn ant-btn-default" type="button">
<!----><span>Button</span>
</button></div>
</div>

22
components/card/demo/loading.vue
View File

@ -20,21 +20,11 @@ Shows a loading indirector while the contents of the card is being featched
<a-card :loading="loading" title="Card title">whatever content</a-card>
<a-button style="margin-top: 16px" @click="handleClick">Toggle loading</a-button>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
<script lang="ts" setup>
import { ref } from 'vue';
const loading = ref(true);
export default defineComponent({
setup() {
const loading = ref(true);
const handleClick = () => {
loading.value = !loading.value;
};
return {
loading,
handleClick,
};
},
});
const handleClick = () => {
loading.value = !loading.value;
};
</script>

10
components/card/demo/meta.vue
View File

@ -37,14 +37,6 @@ A Card that supports `cover`, `avatar`, `title` and `description`.
</a-card>
</template>
<script lang="ts">
<script lang="ts" setup>
import { SettingOutlined, EditOutlined, EllipsisOutlined } from '@ant-design/icons-vue';
import { defineComponent } from 'vue';
export default defineComponent({
components: {
SettingOutlined,
EditOutlined,
EllipsisOutlined,
},
});
</script>

94
components/card/demo/tabs.vue
View File

@ -52,62 +52,46 @@ More content can be hosted
</a-card>
</template>
<script lang="ts">
<script lang="ts" setup>
import { HomeOutlined } from '@ant-design/icons-vue';
import { defineComponent, ref } from 'vue';
export default defineComponent({
components: {
HomeOutlined,
import { ref } from 'vue';
const tabList = [
{
key: 'tab1',
tab: 'tab1',
},
setup() {
const tabList = [
{
key: 'tab1',
tab: 'tab1',
},
{
key: 'tab2',
tab: 'tab2',
},
];
const contentList = {
tab1: 'content1',
tab2: 'content2',
};
const tabListNoTitle = [
{
key: 'article',
tab: 'article',
},
{
key: 'app',
tab: 'app',
},
{
key: 'project',
tab: 'project',
},
];
const key = ref('tab1');
const noTitleKey = ref('app');
const onTabChange = (value: string, type: string) => {
console.log(value, type);
if (type === 'key') {
key.value = value;
} else if (type === 'noTitleKey') {
noTitleKey.value = value;
}
};
return {
tabList,
contentList,
tabListNoTitle,
key,
noTitleKey,
onTabChange,
};
{
key: 'tab2',
tab: 'tab2',
},
});
];
const contentList = {
tab1: 'content1',
tab2: 'content2',
};
const tabListNoTitle = [
{
key: 'article',
tab: 'article',
},
{
key: 'app',
tab: 'app',
},
{
key: 'project',
tab: 'project',
},
];
const key = ref('tab1');
const noTitleKey = ref('app');
const onTabChange = (value: string, type: string) => {
console.log(value, type);
if (type === 'key') {
key.value = value;
} else if (type === 'noTitleKey') {
noTitleKey.value = value;
}
};
</script>

2
components/carousel/__tests__/__snapshots__/demo.test.js.snap
View File

@ -356,7 +356,7 @@ exports[`renders ./components/carousel/demo/fade.vue correctly 1`] = `
`;
exports[`renders ./components/carousel/demo/position.vue correctly 1`] = `
<div class="ant-radio-group ant-radio-group-outline" style="margin-bottom: 8px;"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="top"><span class="ant-radio-button-inner"></span></span><span>Top</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="bottom"><span class="ant-radio-button-inner"></span></span><span>Bottom</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="left"><span class="ant-radio-button-inner"></span></span><span>Left</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="right"><span class="ant-radio-button-inner"></span></span><span>Right</span></label></div>
<div style="margin-bottom: 8px;" class="ant-radio-group ant-radio-group-outline"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="top"><span class="ant-radio-button-inner"></span></span><span>Top</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="bottom"><span class="ant-radio-button-inner"></span></span><span>Bottom</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="left"><span class="ant-radio-button-inner"></span></span><span>Left</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="right"><span class="ant-radio-button-inner"></span></span><span>Right</span></label></div>
<div class="ant-carousel">
<div class="slick-slider slick-initialized" dir="ltr">
<!---->

2
components/carousel/__tests__/index.test.js
View File

@ -135,7 +135,7 @@ describe('Carousel', () => {
},
});
expect(warnSpy).toHaveBeenCalledWith(
'Warning: [antdv: Carousel] `vertical` is deprecated, please use `dotPosition` instead.',
'Warning: [ant-design-vue: Carousel] `vertical` is deprecated, please use `dotPosition` instead.',
);
warnSpy.mockRestore();
});

1
components/carousel/demo/autoplay.vue
View File

@ -24,6 +24,7 @@ Timing of scrolling to the next card/picture.
<div><h3>4</h3></div>
</a-carousel>
</template>
<style scoped>
/* For demo */
:deep(.slick-slide) {

18
components/carousel/demo/basic.vue
View File

@ -24,21 +24,13 @@ Basic usage.
<div><h3>4</h3></div>
</a-carousel>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
setup() {
const onChange = (current: number) => {
console.log(current);
};
return {
onChange,
};
},
});
<script lang="ts" setup>
const onChange = (current: number) => {
console.log(current);
};
</script>
<style scoped>
/* For demo */
:deep(.slick-slide) {

11
components/carousel/demo/customArrows.vue
View File

@ -34,16 +34,11 @@ Custom arrows display
<div><h3>4</h3></div>
</a-carousel>
</template>
<script lang="ts">
<script lang="ts" setup>
import { LeftCircleOutlined, RightCircleOutlined } from '@ant-design/icons-vue';
import { defineComponent } from 'vue';
export default defineComponent({
components: {
LeftCircleOutlined,
RightCircleOutlined,
},
});
</script>
<style scoped>
/* For demo */
:deep(.slick-slide) {

1
components/carousel/demo/fade.vue
View File

@ -24,6 +24,7 @@ Slides use fade for transition.
<div><h3>4</h3></div>
</a-carousel>
</template>
<style scoped>
/* For demo */
:deep(.slick-slide) {

15
components/carousel/demo/position.vue
View File

@ -29,18 +29,13 @@ There are 4 position options available.
<div><h3>4</h3></div>
</a-carousel>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
import type { CarouselProps } from 'ant-design-vue';
export default defineComponent({
setup() {
return {
dotPosition: ref<CarouselProps['dotPosition']>('top'),
};
},
});
<script lang="ts" setup>
import { ref } from 'vue';
import type { CarouselProps } from 'ant-design-vue';
const dotPosition = ref<CarouselProps['dotPosition']>('top');
</script>
<style scoped>
/* For demo */
:deep(.slick-slide) {

40
components/cascader/__tests__/__snapshots__/demo.test.js.snap
View File

@ -6,7 +6,8 @@ exports[`renders ./components/cascader/demo/basic.vue correctly 1`] = `
<!---->
<div class="ant-select-selector"><span class="ant-select-selection-search"><input type="search" id="rc_select_TEST_OR_SSR" autocomplete="off" class="ant-select-selection-search-input" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" readonly="" unselectable="on" style="opacity: 0;"></span>
<!----><span class="ant-select-selection-placeholder">Please select</span>
</div><span class="ant-select-arrow" style="user-select: none;" unselectable="on" aria-hidden="true"><span role="img" aria-label="down" class="anticon anticon-down ant-select-suffix"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span>
</div><span class="ant-select-arrow" style="user-select: none;" unselectable="on" aria-hidden="true"><span role="img" aria-label="down" class="anticon anticon-down ant-select-suffix"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span>
<!----></span>
<!---->
</div>
`;
@ -17,7 +18,8 @@ exports[`renders ./components/cascader/demo/change-on-select.vue correctly 1`] =
<!---->
<div class="ant-select-selector"><span class="ant-select-selection-search"><input type="search" id="rc_select_TEST_OR_SSR" autocomplete="off" class="ant-select-selection-search-input" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" readonly="" unselectable="on" style="opacity: 0;"></span>
<!----><span class="ant-select-selection-placeholder">Please select</span>
</div><span class="ant-select-arrow" style="user-select: none;" unselectable="on" aria-hidden="true"><span role="img" aria-label="down" class="anticon anticon-down ant-select-suffix"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span>
</div><span class="ant-select-arrow" style="user-select: none;" unselectable="on" aria-hidden="true"><span role="img" aria-label="down" class="anticon anticon-down ant-select-suffix"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span>
<!----></span>
<!---->
</div>
`;
@ -28,7 +30,8 @@ exports[`renders ./components/cascader/demo/custom-render.vue correctly 1`] = `
<!---->
<div class="ant-select-selector"><span class="ant-select-selection-search"><input type="search" id="rc_select_TEST_OR_SSR" autocomplete="off" class="ant-select-selection-search-input" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" readonly="" unselectable="on" style="opacity: 0;"></span><span class="ant-select-selection-item"><span><span>Zhejiang /</span></span><span><span>Hangzhou /</span></span><span><span>West Lake ( <a>752100</a> ) </span></span></span>
<!---->
</div><span class="ant-select-arrow" style="user-select: none;" unselectable="on" aria-hidden="true"><span role="img" aria-label="down" class="anticon anticon-down ant-select-suffix"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span><span class="ant-select-clear" style="user-select: none;" unselectable="on" aria-hidden="true"><span role="img" aria-label="close-circle" class="anticon anticon-close-circle"><svg focusable="false" class="" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></span></span>
</div><span class="ant-select-arrow" style="user-select: none;" unselectable="on" aria-hidden="true"><span role="img" aria-label="down" class="anticon anticon-down ant-select-suffix"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span>
<!----></span><span class="ant-select-clear" style="user-select: none;" unselectable="on" aria-hidden="true"><span role="img" aria-label="close-circle" class="anticon anticon-close-circle"><svg focusable="false" class="" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></span></span>
</div>
`;
@ -40,7 +43,8 @@ exports[`renders ./components/cascader/demo/disabled-option.vue correctly 1`] =
<!---->
<div class="ant-select-selector"><span class="ant-select-selection-search"><input type="search" id="rc_select_TEST_OR_SSR" autocomplete="off" class="ant-select-selection-search-input" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" readonly="" unselectable="on" style="opacity: 0;"></span>
<!----><span class="ant-select-selection-placeholder">Please select</span>
</div><span class="ant-select-arrow" style="user-select: none;" unselectable="on" aria-hidden="true"><span role="img" aria-label="down" class="anticon anticon-down ant-select-suffix"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span>
</div><span class="ant-select-arrow" style="user-select: none;" unselectable="on" aria-hidden="true"><span role="img" aria-label="down" class="anticon anticon-down ant-select-suffix"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span>
<!----></span>
<!---->
</div>
`;
@ -51,7 +55,8 @@ exports[`renders ./components/cascader/demo/fields-name.vue correctly 1`] = `
<!---->
<div class="ant-select-selector"><span class="ant-select-selection-search"><input type="search" id="rc_select_TEST_OR_SSR" autocomplete="off" class="ant-select-selection-search-input" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" readonly="" unselectable="on" style="opacity: 0;"></span>
<!----><span class="ant-select-selection-placeholder">Please select</span>
</div><span class="ant-select-arrow" style="user-select: none;" unselectable="on" aria-hidden="true"><span role="img" aria-label="down" class="anticon anticon-down ant-select-suffix"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span>
</div><span class="ant-select-arrow" style="user-select: none;" unselectable="on" aria-hidden="true"><span role="img" aria-label="down" class="anticon anticon-down ant-select-suffix"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span>
<!----></span>
<!---->
</div>
`;
@ -62,7 +67,8 @@ exports[`renders ./components/cascader/demo/hover.vue correctly 1`] = `
<!---->
<div class="ant-select-selector"><span class="ant-select-selection-search"><input type="search" id="rc_select_TEST_OR_SSR" autocomplete="off" class="ant-select-selection-search-input" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" readonly="" unselectable="on" style="opacity: 0;"></span>
<!----><span class="ant-select-selection-placeholder">Please select</span>
</div><span class="ant-select-arrow" style="user-select: none;" unselectable="on" aria-hidden="true"><span role="img" aria-label="down" class="anticon anticon-down ant-select-suffix"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span>
</div><span class="ant-select-arrow" style="user-select: none;" unselectable="on" aria-hidden="true"><span role="img" aria-label="down" class="anticon anticon-down ant-select-suffix"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span>
<!----></span>
<!---->
</div>
`;
@ -73,13 +79,14 @@ exports[`renders ./components/cascader/demo/lazy.vue correctly 1`] = `
<!---->
<div class="ant-select-selector"><span class="ant-select-selection-search"><input type="search" id="rc_select_TEST_OR_SSR" autocomplete="off" class="ant-select-selection-search-input" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" readonly="" unselectable="on" style="opacity: 0;"></span>
<!----><span class="ant-select-selection-placeholder">Please select</span>
</div><span class="ant-select-arrow" style="user-select: none;" unselectable="on" aria-hidden="true"><span role="img" aria-label="down" class="anticon anticon-down ant-select-suffix"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span>
</div><span class="ant-select-arrow" style="user-select: none;" unselectable="on" aria-hidden="true"><span role="img" aria-label="down" class="anticon anticon-down ant-select-suffix"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span>
<!----></span>
<!---->
</div>
`;
exports[`renders ./components/cascader/demo/multiple.vue correctly 1`] = `
<div class="ant-space ant-space-vertical" style="width: 100%;">
<div style="width: 100%;" class="ant-space ant-space-vertical">
<div class="ant-space-item" style="margin-bottom: 8px;">
<h4>Cascader.SHOW_PARENT</h4>
</div>
@ -133,7 +140,8 @@ exports[`renders ./components/cascader/demo/search.vue correctly 1`] = `
<!---->
<div class="ant-select-selector"><span class="ant-select-selection-search"><input type="search" id="rc_select_TEST_OR_SSR" autocomplete="off" class="ant-select-selection-search-input" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list"></span>
<!----><span class="ant-select-selection-placeholder">Please select</span>
</div><span class="ant-select-arrow" style="user-select: none;" unselectable="on" aria-hidden="true"><span role="img" aria-label="down" class="anticon anticon-down ant-select-suffix"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span>
</div><span class="ant-select-arrow" style="user-select: none;" unselectable="on" aria-hidden="true"><span role="img" aria-label="down" class="anticon anticon-down ant-select-suffix"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span>
<!----></span>
<!---->
</div>
`;
@ -144,7 +152,8 @@ exports[`renders ./components/cascader/demo/size.vue correctly 1`] = `
<!---->
<div class="ant-select-selector"><span class="ant-select-selection-search"><input type="search" id="rc_select_TEST_OR_SSR" autocomplete="off" class="ant-select-selection-search-input" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" readonly="" unselectable="on" style="opacity: 0;"></span>
<!----><span class="ant-select-selection-placeholder">Please select</span>
</div><span class="ant-select-arrow" style="user-select: none;" unselectable="on" aria-hidden="true"><span role="img" aria-label="down" class="anticon anticon-down ant-select-suffix"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span>
</div><span class="ant-select-arrow" style="user-select: none;" unselectable="on" aria-hidden="true"><span role="img" aria-label="down" class="anticon anticon-down ant-select-suffix"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span>
<!----></span>
<!---->
</div>
<br>
@ -154,7 +163,8 @@ exports[`renders ./components/cascader/demo/size.vue correctly 1`] = `
<!---->
<div class="ant-select-selector"><span class="ant-select-selection-search"><input type="search" id="rc_select_TEST_OR_SSR" autocomplete="off" class="ant-select-selection-search-input" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" readonly="" unselectable="on" style="opacity: 0;"></span>
<!----><span class="ant-select-selection-placeholder">Please select</span>
</div><span class="ant-select-arrow" style="user-select: none;" unselectable="on" aria-hidden="true"><span role="img" aria-label="down" class="anticon anticon-down ant-select-suffix"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span>
</div><span class="ant-select-arrow" style="user-select: none;" unselectable="on" aria-hidden="true"><span role="img" aria-label="down" class="anticon anticon-down ant-select-suffix"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span>
<!----></span>
<!---->
</div>
<br>
@ -164,7 +174,8 @@ exports[`renders ./components/cascader/demo/size.vue correctly 1`] = `
<!---->
<div class="ant-select-selector"><span class="ant-select-selection-search"><input type="search" id="rc_select_TEST_OR_SSR" autocomplete="off" class="ant-select-selection-search-input" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" readonly="" unselectable="on" style="opacity: 0;"></span>
<!----><span class="ant-select-selection-placeholder">Please select</span>
</div><span class="ant-select-arrow" style="user-select: none;" unselectable="on" aria-hidden="true"><span role="img" aria-label="down" class="anticon anticon-down ant-select-suffix"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span>
</div><span class="ant-select-arrow" style="user-select: none;" unselectable="on" aria-hidden="true"><span role="img" aria-label="down" class="anticon anticon-down ant-select-suffix"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span>
<!----></span>
<!---->
</div>
<br>
@ -179,7 +190,8 @@ exports[`renders ./components/cascader/demo/suffix.vue correctly 1`] = `
<!---->
<div class="ant-select-selector"><span class="ant-select-selection-search"><input type="search" id="rc_select_TEST_OR_SSR" autocomplete="off" class="ant-select-selection-search-input" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" readonly="" unselectable="on" style="opacity: 0;"></span>
<!----><span class="ant-select-selection-placeholder">Please select</span>
</div><span class="ant-select-arrow" style="user-select: none;" unselectable="on" aria-hidden="true"><span role="img" aria-label="smile" class="anticon anticon-smile test"><svg focusable="false" class="" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"></path></svg></span></span>
</div><span class="ant-select-arrow" style="user-select: none;" unselectable="on" aria-hidden="true"><span role="img" aria-label="smile" class="anticon anticon-smile test"><svg focusable="false" class="" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"></path></svg></span>
<!----></span>
<!---->
</div>
</div>
@ -190,7 +202,7 @@ exports[`renders ./components/cascader/demo/suffix.vue correctly 1`] = `
<!---->
<div class="ant-select-selector"><span class="ant-select-selection-search"><input type="search" id="rc_select_TEST_OR_SSR" autocomplete="off" class="ant-select-selection-search-input" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" readonly="" unselectable="on" style="opacity: 0;"></span>
<!----><span class="ant-select-selection-placeholder">Please select</span>
</div><span class="ant-select-arrow" style="user-select: none;" unselectable="on" aria-hidden="true">ab</span>
</div><span class="ant-select-arrow" style="user-select: none;" unselectable="on" aria-hidden="true">ab<!----></span>
<!---->
</div>
</div>

13
components/cascader/demo/basic.vue
View File

@ -18,8 +18,8 @@ Cascade selection box for selecting province/city/district.
<template>
<a-cascader v-model:value="value" :options="options" placeholder="Please select" />
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
<script lang="ts" setup>
import { ref } from 'vue';
import type { CascaderProps } from 'ant-design-vue';
const options: CascaderProps['options'] = [
{
@ -55,12 +55,5 @@ const options: CascaderProps['options'] = [
],
},
];
export default defineComponent({
setup() {
return {
value: ref<string[]>([]),
options,
};
},
});
const value = ref<string[]>([]);
</script>

14
components/cascader/demo/change-on-select.vue
View File

@ -23,8 +23,9 @@ Allow only select parent options.
change-on-select
/>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
<script lang="ts" setup>
import { ref } from 'vue';
import type { CascaderProps } from 'ant-design-vue';
const options: CascaderProps['options'] = [
{
@ -60,12 +61,5 @@ const options: CascaderProps['options'] = [
],
},
];
export default defineComponent({
setup() {
return {
value: ref<string[]>([]),
options,
};
},
});
const value = ref<string[]>([]);
</script>

24
components/cascader/demo/custom-render.vue
View File

@ -36,8 +36,9 @@ For instance, add an external link after the selected value.
</template>
</a-cascader>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
<script lang="ts" setup>
import { ref } from 'vue';
import type { CascaderProps } from 'ant-design-vue';
const options: CascaderProps['options'] = [
{
@ -75,18 +76,11 @@ const options: CascaderProps['options'] = [
],
},
];
export default defineComponent({
setup() {
const handleAreaClick = (e: Event, label: string, option: CascaderProps['options'][number]) => {
e.stopPropagation();
console.log('clicked', label, option);
};
return {
value: ref<string[]>(['zhejiang', 'hangzhou', 'xihu']),
options,
handleAreaClick,
};
},
});
const handleAreaClick = (e: Event, label: string, option: CascaderProps['options'][number]) => {
e.stopPropagation();
console.log('clicked', label, option);
};
const value = ref<string[]>(['zhejiang', 'hangzhou', 'xihu']);
</script>

26
components/cascader/demo/custom-trigger.vue
View File

@ -28,8 +28,8 @@ Separate trigger button and result.
</a-cascader>
</span>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
<script lang="ts" setup>
import { ref } from 'vue';
import type { CascaderProps } from 'ant-design-vue';
const options: CascaderProps['options'] = [
{
@ -65,22 +65,10 @@ const options: CascaderProps['options'] = [
],
},
];
const value = ref<string[]>([]);
const text = ref<string>('Unselect');
export default defineComponent({
setup() {
const value = ref<string[]>([]);
const text = ref<string>('Unselect');
const onChange: CascaderProps['onChange'] = (_value, selectedOptions) => {
text.value = selectedOptions.map(o => o.label).join(', ');
};
return {
value,
text,
options,
onChange,
};
},
});
const onChange: CascaderProps['onChange'] = (_value, selectedOptions) => {
text.value = selectedOptions.map(o => o.label).join(', ');
};
</script>

13
components/cascader/demo/disabled-option.vue
View File

@ -18,8 +18,8 @@ Disable option by specifying the `disabled` property in `options`.
<template>
<a-cascader v-model:value="value" placeholder="Please select" :options="options" />
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
<script lang="ts" setup>
import { ref } from 'vue';
import type { CascaderProps } from 'ant-design-vue';
const options: CascaderProps['options'] = [
{
@ -56,12 +56,5 @@ const options: CascaderProps['options'] = [
],
},
];
export default defineComponent({
setup() {
return {
value: ref<string[]>([]),
options,
};
},
});
const value = ref<string[]>([]);
</script>

13
components/cascader/demo/fields-name.vue
View File

@ -23,8 +23,8 @@ Custom Field Names
placeholder="Please select"
/>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
<script lang="ts" setup>
import { ref } from 'vue';
import type { CascaderProps } from 'ant-design-vue';
const options: CascaderProps['options'] = [
{
@ -60,12 +60,5 @@ const options: CascaderProps['options'] = [
],
},
];
export default defineComponent({
setup() {
return {
value: ref<string[]>([]),
options,
};
},
});
const value = ref<string[]>([]);
</script>

14
components/cascader/demo/hover.vue
View File

@ -23,8 +23,8 @@ Hover to expand sub menu, click to select option.
placeholder="Please select"
/>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
<script lang="ts" setup>
import { ref } from 'vue';
import type { CascaderProps } from 'ant-design-vue';
const options: CascaderProps['options'] = [
{
@ -60,12 +60,6 @@ const options: CascaderProps['options'] = [
],
},
];
export default defineComponent({
setup() {
return {
value: ref<string[]>([]),
options,
};
},
});
const value = ref<string[]>([]);
</script>

80
components/cascader/demo/lazy.vue
View File

@ -26,51 +26,43 @@ Load options lazily with `loadData`.
change-on-select
/>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
<script lang="ts" setup>
import { ref } from 'vue';
import type { CascaderProps } from 'ant-design-vue';
export default defineComponent({
setup() {
const options = ref<CascaderProps['options']>([
{
value: 'zhejiang',
label: 'Zhejiang',
isLeaf: false,
},
{
value: 'jiangsu',
label: 'Jiangsu',
isLeaf: false,
},
]);
const loadData: CascaderProps['loadData'] = selectedOptions => {
const targetOption = selectedOptions[selectedOptions.length - 1];
targetOption.loading = true;
// load options lazily
setTimeout(() => {
targetOption.loading = false;
targetOption.children = [
{
label: `${targetOption.label} Dynamic 1`,
value: 'dynamic1',
},
{
label: `${targetOption.label} Dynamic 2`,
value: 'dynamic2',
},
];
options.value = [...options.value];
}, 1000);
};
return {
value: ref<string[]>([]),
options,
loadData,
};
const options = ref<CascaderProps['options']>([
{
value: 'zhejiang',
label: 'Zhejiang',
isLeaf: false,
},
});
{
value: 'jiangsu',
label: 'Jiangsu',
isLeaf: false,
},
]);
const loadData: CascaderProps['loadData'] = selectedOptions => {
const targetOption = selectedOptions[selectedOptions.length - 1];
targetOption.loading = true;
// load options lazily
setTimeout(() => {
targetOption.loading = false;
targetOption.children = [
{
label: `${targetOption.label} Dynamic 1`,
value: 'dynamic1',
},
{
label: `${targetOption.label} Dynamic 2`,
value: 'dynamic2',
},
];
options.value = [...options.value];
}, 1000);
};
const value = ref<string[]>([]);
</script>

15
components/cascader/demo/multiple.vue
View File

@ -38,8 +38,8 @@ Select multiple options
></a-cascader>
</a-space>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
<script lang="ts" setup>
import { ref } from 'vue';
import type { CascaderProps } from 'ant-design-vue';
import { Cascader } from 'ant-design-vue';
const options: CascaderProps['options'] = [
@ -75,13 +75,6 @@ const options: CascaderProps['options'] = [
],
},
];
export default defineComponent({
setup() {
return {
value: ref<string[]>([]),
options,
Cascader,
};
},
});
const value = ref<string[]>([]);
</script>

20
components/cascader/demo/search.vue
View File

@ -25,8 +25,8 @@ Search and select options directly.
placeholder="Please select"
/>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
<script lang="ts" setup>
import { ref } from 'vue';
import type { CascaderProps } from 'ant-design-vue';
import type { ShowSearchType } from 'ant-design-vue/es/cascader';
const options: CascaderProps['options'] = [
@ -68,17 +68,9 @@ const options: CascaderProps['options'] = [
],
},
];
export default defineComponent({
setup() {
const filter: ShowSearchType['filter'] = (inputValue, path) => {
return path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
};
const filter: ShowSearchType['filter'] = (inputValue, path) => {
return path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
};
return {
value: ref<string[]>([]),
options,
filter,
};
},
});
const value = ref<string[]>([]);
</script>

13
components/cascader/demo/size.vue
View File

@ -26,8 +26,8 @@ Cascade selection box of different sizes.
<br />
<br />
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
<script lang="ts" setup>
import { ref } from 'vue';
import type { CascaderProps } from 'ant-design-vue';
const options: CascaderProps['options'] = [
{
@ -63,12 +63,5 @@ const options: CascaderProps['options'] = [
],
},
];
export default defineComponent({
setup() {
return {
value: ref<string[]>([]),
options,
};
},
});
const value = ref<string[]>([]);
</script>

18
components/cascader/demo/suffix.vue
View File

@ -34,9 +34,9 @@ Custom suffix icon
/>
</a-space>
</template>
<script lang="ts">
<script lang="ts" setup>
import { SmileOutlined } from '@ant-design/icons-vue';
import { defineComponent, ref } from 'vue';
import { ref } from 'vue';
import type { CascaderProps } from 'ant-design-vue';
const options: CascaderProps['options'] = [
{
@ -72,16 +72,6 @@ const options: CascaderProps['options'] = [
],
},
];
export default defineComponent({
components: {
SmileOutlined,
},
setup() {
return {
value1: ref<string[]>([]),
value2: ref<string[]>([]),
options,
};
},
});
const value1 = ref<string[]>([]);
const value2 = ref<string[]>([]);
</script>

13
components/cascader/demo/tagRender.vue
View File

@ -21,8 +21,8 @@ title:
</template>
</a-cascader>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
<script lang="ts" setup>
import { ref } from 'vue';
import type { CascaderProps } from 'ant-design-vue';
const options: CascaderProps['options'] = [
{
@ -80,12 +80,5 @@ const options: CascaderProps['options'] = [
],
},
];
export default defineComponent({
setup() {
return {
value: ref<string[]>([]),
options,
};
},
});
const value = ref<string[]>([]);
</script>

4
components/checkbox/__tests__/__snapshots__/demo.test.js.snap
View File

@ -3,7 +3,7 @@
exports[`renders ./components/checkbox/demo/basic.vue correctly 1`] = `<label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span><span>Checkbox</span></label>`;
exports[`renders ./components/checkbox/demo/check-all.vue correctly 1`] = `
<div><label class="ant-checkbox-wrapper"><span class="ant-checkbox ant-checkbox-indeterminate"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span><span> Check all </span></label></div>
<div><label class="ant-checkbox-wrapper"><span class="ant-checkbox ant-checkbox-indeterminate"><input type="checkbox" class="ant-checkbox-input" aria-checked="mixed"><span class="ant-checkbox-inner"></span></span><span> Check all </span></label></div>
<div class="ant-divider ant-divider-horizontal" role="separator">
<!---->
</div>
@ -43,7 +43,7 @@ exports[`renders ./components/checkbox/demo/group.vue correctly 1`] = `
`;
exports[`renders ./components/checkbox/demo/layout.vue correctly 1`] = `
<div class="ant-checkbox-group" style="width: 100%;">
<div style="width: 100%;" class="ant-checkbox-group">
<div class="ant-row">
<div class="ant-col ant-col-8"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value="A"><span class="ant-checkbox-inner"></span></span><span>A</span></label></div>
<div class="ant-col ant-col-8"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value="B"><span class="ant-checkbox-inner"></span></span><span>B</span></label></div>

2
components/checkbox/__tests__/checkbox.test.js
View File

@ -34,7 +34,7 @@ describe('Checkbox', () => {
},
});
expect(errorSpy).toHaveBeenCalledWith(
'Warning: [antdv: Checkbox] `value` is not validate prop, do you mean `checked`?',
'Warning: [ant-design-vue: Checkbox] `value` is not validate prop, do you mean `checked`?',
);
errorSpy.mockRestore();
});

12
components/checkbox/demo/basic.vue
View File

@ -19,13 +19,7 @@ Basic usage of checkbox
<template>
<a-checkbox v-model:checked="checked">Checkbox</a-checkbox>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
return {
checked: ref(false),
};
},
});
<script lang="ts" setup>
import { ref } from 'vue';
const checked = ref(false);
</script>

56
components/checkbox/demo/check-all.vue
View File

@ -19,46 +19,36 @@ The `indeterminate` property can help you to achieve a 'check all' effect.
<template>
<div>
<a-checkbox
v-model:checked="checkAll"
:indeterminate="indeterminate"
v-model:checked="state.checkAll"
:indeterminate="state.indeterminate"
@change="onCheckAllChange"
>
Check all
</a-checkbox>
</div>
<a-divider />
<a-checkbox-group v-model:value="checkedList" :options="plainOptions" />
<a-checkbox-group v-model:value="state.checkedList" :options="plainOptions" />
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, watch } from 'vue';
<script lang="ts" setup>
import { reactive, watch } from 'vue';
const plainOptions = ['Apple', 'Pear', 'Orange'];
export default defineComponent({
setup() {
const state = reactive({
indeterminate: true,
checkAll: false,
checkedList: ['Apple', 'Orange'],
});
const onCheckAllChange = (e: any) => {
Object.assign(state, {
checkedList: e.target.checked ? plainOptions : [],
indeterminate: false,
});
};
watch(
() => state.checkedList,
val => {
state.indeterminate = !!val.length && val.length < plainOptions.length;
state.checkAll = val.length === plainOptions.length;
},
);
return {
...toRefs(state),
plainOptions,
onCheckAllChange,
};
},
const state = reactive({
indeterminate: true,
checkAll: false,
checkedList: ['Apple', 'Orange'],
});
const onCheckAllChange = (e: any) => {
Object.assign(state, {
checkedList: e.target.checked ? plainOptions : [],
indeterminate: false,
});
};
watch(
() => state.checkedList,
val => {
state.indeterminate = !!val.length && val.length < plainOptions.length;
state.checkAll = val.length === plainOptions.length;
},
);
</script>

37
components/checkbox/demo/controller.vue
View File

@ -31,34 +31,21 @@ Communicated with other components
</a-button>
</p>
</template>
<script lang="ts">
import { computed, defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const checked = ref(false);
const disabled = ref(false);
<script lang="ts" setup>
import { computed, ref } from 'vue';
const toggleChecked = () => {
checked.value = !checked.value;
};
const checked = ref(false);
const disabled = ref(false);
const toggleDisable = () => {
disabled.value = !disabled.value;
};
const toggleChecked = () => {
checked.value = !checked.value;
};
const label = computed(() => {
return `${checked.value ? 'Checked' : 'Unchecked'}-${
disabled.value ? 'Disabled' : 'Enabled'
}`;
});
const toggleDisable = () => {
disabled.value = !disabled.value;
};
return {
label,
checked,
disabled,
toggleChecked,
toggleDisable,
};
},
const label = computed(() => {
return `${checked.value ? 'Checked' : 'Unchecked'}-${disabled.value ? 'Disabled' : 'Enabled'}`;
});
</script>

18
components/checkbox/demo/disabled.vue
View File

@ -17,18 +17,14 @@ Disabled checkbox
</docs>
<template>
<a-checkbox v-model:checked="checked1" disabled />
<a-checkbox v-model:checked="state.checked1" disabled />
<br />
<a-checkbox v-model:checked="checked2" disabled />
<a-checkbox v-model:checked="state.checked2" disabled />
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
return {
checked1: ref(false),
checked2: ref(true),
};
},
<script lang="ts" setup>
import { reactive } from 'vue';
const state = reactive({
checked1: false,
checked2: true,
});
</script>

32
components/checkbox/demo/group.vue
View File

@ -17,23 +17,23 @@ Generate a group of checkboxes from an array
</docs>
<template>
<a-checkbox-group v-model:value="value1" name="checkboxgroup" :options="plainOptions" />
<a-checkbox-group v-model:value="state.value1" name="checkboxgroup" :options="plainOptions" />
<br />
<br />
<a-checkbox-group v-model:value="value2" :options="plainOptions" />
<a-checkbox-group v-model:value="state.value2" :options="plainOptions" />
<br />
<br />
<a-checkbox-group v-model:value="value3" :options="options" />
<a-checkbox-group v-model:value="state.value3" :options="options" />
<br />
<br />
<a-checkbox-group v-model:value="value4" :options="optionsWithDisabled" disabled>
<a-checkbox-group v-model:value="state.value4" :options="optionsWithDisabled" disabled>
<template #label="{ value }">
<span style="color: red">{{ value }}</span>
</template>
</a-checkbox-group>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue';
<script lang="ts" setup>
import { reactive } from 'vue';
const plainOptions = ['Apple', 'Pear', 'Orange'];
const options = [
@ -46,20 +46,10 @@ const optionsWithDisabled = [
{ label: 'Pear', value: 'Pear' },
{ label: 'Orange', value: 'Orange', disabled: false },
];
export default defineComponent({
setup() {
const state = reactive({
value1: [],
value2: ['Apple'],
value3: ['Pear'],
value4: ['Apple'],
});
return {
plainOptions,
options,
optionsWithDisabled,
...toRefs(state),
};
},
const state = reactive({
value1: [],
value2: ['Apple'],
value3: ['Pear'],
value4: ['Apple'],
});
</script>

2
components/checkbox/demo/index.vue
View File

@ -35,7 +35,7 @@ export default defineComponent({
},
});
</script>
<style>
<style scoped>
[id^='components-button-demo-'] .ant-btn {
margin-right: 8px;
margin-bottom: 12px;

13
components/checkbox/demo/layout.vue
View File

@ -37,14 +37,7 @@ We can use Checkbox and Grid Checkbox.group, to implement complex layout
</a-row>
</a-checkbox-group>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const value = ref([]);
return {
value,
};
},
});
<script lang="ts" setup>
import { ref } from 'vue';
const value = ref([]);
</script>

119
components/collapse/__tests__/__snapshots__/demo.test.js.snap
View File

@ -1,24 +1,24 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders ./components/collapse/demo/accordion.vue correctly 1`] = `
<div class="ant-collapse ant-collapse-icon-position-left" role="tablist">
<div class="ant-collapse ant-collapse-icon-position-start" role="tablist">
<div class="ant-collapse-item">
<div class="ant-collapse-header" role="tab" tabindex="0" aria-expanded="false">
<div><span role="img" aria-label="right" class="anticon anticon-right ant-collapse-arrow"><svg focusable="false" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></div>This is panel header 1
<div class="ant-collapse-expand-icon"><span role="img" aria-label="right" class="anticon anticon-right ant-collapse-arrow"><svg focusable="false" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></div><span class="ant-collapse-header-text">This is panel header 1</span>
<!---->
</div>
<!---->
</div>
<div class="ant-collapse-item">
<div class="ant-collapse-header" role="tab" tabindex="0" aria-expanded="false">
<div><span role="img" aria-label="right" class="anticon anticon-right ant-collapse-arrow"><svg focusable="false" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></div>This is panel header 2
<div class="ant-collapse-expand-icon"><span role="img" aria-label="right" class="anticon anticon-right ant-collapse-arrow"><svg focusable="false" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></div><span class="ant-collapse-header-text">This is panel header 2</span>
<!---->
</div>
<!---->
</div>
<div class="ant-collapse-item">
<div class="ant-collapse-header" role="tab" tabindex="0" aria-expanded="false">
<div><span role="img" aria-label="right" class="anticon anticon-right ant-collapse-arrow"><svg focusable="false" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></div>This is panel header 3
<div class="ant-collapse-expand-icon"><span role="img" aria-label="right" class="anticon anticon-right ant-collapse-arrow"><svg focusable="false" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></div><span class="ant-collapse-header-text">This is panel header 3</span>
<!---->
</div>
<!---->
@ -27,10 +27,10 @@ exports[`renders ./components/collapse/demo/accordion.vue correctly 1`] = `
`;
exports[`renders ./components/collapse/demo/basic.vue correctly 1`] = `
<div class="ant-collapse ant-collapse-icon-position-left">
<div class="ant-collapse ant-collapse-icon-position-start">
<div class="ant-collapse-item ant-collapse-item-active">
<div class="ant-collapse-header" role="button" tabindex="0" aria-expanded="true">
<div><span role="img" aria-label="right" class="anticon anticon-right ant-collapse-arrow"><svg focusable="false" class="" style="transform: rotate(90deg);" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></div>This is panel header 1
<div class="ant-collapse-expand-icon"><span role="img" aria-label="right" class="anticon anticon-right ant-collapse-arrow"><svg focusable="false" class="" style="transform: rotate(90deg);" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></div><span class="ant-collapse-header-text">This is panel header 1</span>
<!---->
</div>
<div class="ant-collapse-content ant-collapse-content-active">
@ -41,14 +41,14 @@ exports[`renders ./components/collapse/demo/basic.vue correctly 1`] = `
</div>
<div class="ant-collapse-item">
<div class="ant-collapse-header" role="button" tabindex="0" aria-expanded="false">
<div><span role="img" aria-label="right" class="anticon anticon-right ant-collapse-arrow"><svg focusable="false" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></div>This is panel header 2
<div class="ant-collapse-expand-icon"><span role="img" aria-label="right" class="anticon anticon-right ant-collapse-arrow"><svg focusable="false" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></div><span class="ant-collapse-header-text">This is panel header 2</span>
<!---->
</div>
<!---->
</div>
<div class="ant-collapse-item ant-collapse-item-disabled">
<div class="ant-collapse-header" role="button" tabindex="-1" aria-expanded="false">
<div><span role="img" aria-label="right" class="anticon anticon-right ant-collapse-arrow"><svg focusable="false" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></div>This is panel header 3
<div class="ant-collapse-expand-icon"><span role="img" aria-label="right" class="anticon anticon-right ant-collapse-arrow"><svg focusable="false" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></div><span class="ant-collapse-header-text">This is panel header 3</span>
<!---->
</div>
<!---->
@ -57,10 +57,10 @@ exports[`renders ./components/collapse/demo/basic.vue correctly 1`] = `
`;
exports[`renders ./components/collapse/demo/borderless.vue correctly 1`] = `
<div class="ant-collapse ant-collapse-borderless ant-collapse-icon-position-left">
<div class="ant-collapse ant-collapse-borderless ant-collapse-icon-position-start">
<div class="ant-collapse-item ant-collapse-item-active">
<div class="ant-collapse-header" role="button" tabindex="0" aria-expanded="true">
<div><span role="img" aria-label="right" class="anticon anticon-right ant-collapse-arrow"><svg focusable="false" class="" style="transform: rotate(90deg);" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></div>This is panel header 1
<div class="ant-collapse-expand-icon"><span role="img" aria-label="right" class="anticon anticon-right ant-collapse-arrow"><svg focusable="false" class="" style="transform: rotate(90deg);" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></div><span class="ant-collapse-header-text">This is panel header 1</span>
<!---->
</div>
<div class="ant-collapse-content ant-collapse-content-active">
@ -71,14 +71,14 @@ exports[`renders ./components/collapse/demo/borderless.vue correctly 1`] = `
</div>
<div class="ant-collapse-item">
<div class="ant-collapse-header" role="button" tabindex="0" aria-expanded="false">
<div><span role="img" aria-label="right" class="anticon anticon-right ant-collapse-arrow"><svg focusable="false" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></div>This is panel header 2
<div class="ant-collapse-expand-icon"><span role="img" aria-label="right" class="anticon anticon-right ant-collapse-arrow"><svg focusable="false" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></div><span class="ant-collapse-header-text">This is panel header 2</span>
<!---->
</div>
<!---->
</div>
<div class="ant-collapse-item">
<div class="ant-collapse-header" role="button" tabindex="0" aria-expanded="false">
<div><span role="img" aria-label="right" class="anticon anticon-right ant-collapse-arrow"><svg focusable="false" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></div>This is panel header 3
<div class="ant-collapse-expand-icon"><span role="img" aria-label="right" class="anticon anticon-right ant-collapse-arrow"><svg focusable="false" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></div><span class="ant-collapse-header-text">This is panel header 3</span>
<!---->
</div>
<!---->
@ -86,11 +86,60 @@ exports[`renders ./components/collapse/demo/borderless.vue correctly 1`] = `
</div>
`;
exports[`renders ./components/collapse/demo/collapsible.vue correctly 1`] = `
<div class="ant-space ant-space-vertical">
<div class="ant-space-item" style="margin-bottom: 8px;">
<div class="ant-collapse ant-collapse-icon-position-start">
<div class="ant-collapse-item ant-collapse-item-active">
<div class="ant-collapse-header ant-collapse-header-collapsible-only" role="button" tabindex="0" aria-expanded="true">
<div class="ant-collapse-expand-icon"><span role="img" aria-label="right" class="anticon anticon-right ant-collapse-arrow"><svg focusable="false" class="" style="transform: rotate(90deg);" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></div><span class="ant-collapse-header-text">This panel can only be collapsed by clicking text</span>
<!---->
</div>
<div class="ant-collapse-content ant-collapse-content-active">
<div class="ant-collapse-content-box">
<p>A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.</p>
</div>
</div>
</div>
</div>
</div>
<!---->
<div class="ant-space-item" style="margin-bottom: 8px;">
<div class="ant-collapse ant-collapse-icon-position-start">
<div class="ant-collapse-item ant-collapse-item-active">
<div class="ant-collapse-header ant-collapse-icon-collapsible-only" role="button" tabindex="0" aria-expanded="true">
<div class="ant-collapse-expand-icon"><span role="img" aria-label="right" class="anticon anticon-right ant-collapse-arrow"><svg focusable="false" class="" style="transform: rotate(90deg);" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></div><span class="ant-collapse-header-text">This panel can only be collapsed by clicking icon</span>
<!---->
</div>
<div class="ant-collapse-content ant-collapse-content-active">
<div class="ant-collapse-content-box">
<p>A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.</p>
</div>
</div>
</div>
</div>
</div>
<!---->
<div class="ant-space-item">
<div class="ant-collapse ant-collapse-icon-position-start">
<div class="ant-collapse-item ant-collapse-item-disabled">
<div class="ant-collapse-header" role="button" tabindex="-1" aria-expanded="false">
<div class="ant-collapse-expand-icon"><span role="img" aria-label="right" class="anticon anticon-right ant-collapse-arrow"><svg focusable="false" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></div><span class="ant-collapse-header-text">This panel can't be collapsed</span>
<!---->
</div>
<!---->
</div>
</div>
</div>
<!---->
</div>
`;
exports[`renders ./components/collapse/demo/custom.vue correctly 1`] = `
<div class="ant-collapse ant-collapse-borderless ant-collapse-icon-position-left">
<div class="ant-collapse ant-collapse-borderless ant-collapse-icon-position-start" style="background: rgb(255, 255, 255);">
<div style="background: rgb(247, 247, 247); border-radius: 4px; margin-bottom: 24px; border: 0px; overflow: hidden;" class="ant-collapse-item ant-collapse-item-active">
<div class="ant-collapse-header" role="button" tabindex="0" aria-expanded="true">
<div><span role="img" aria-label="caret-right" class="anticon anticon-caret-right ant-collapse-arrow"><svg focusable="false" class="" style="transform: rotate(90deg);" data-icon="caret-right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M715.8 493.5L335 165.1c-14.2-12.2-35-1.2-35 18.5v656.8c0 19.7 20.8 30.7 35 18.5l380.8-328.4c10.9-9.4 10.9-27.6 0-37z"></path></svg></span></div>This is panel header 1
<div class="ant-collapse-expand-icon"><span role="img" aria-label="caret-right" class="anticon anticon-caret-right ant-collapse-arrow"><svg focusable="false" class="" style="transform: rotate(90deg);" data-icon="caret-right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M715.8 493.5L335 165.1c-14.2-12.2-35-1.2-35 18.5v656.8c0 19.7 20.8 30.7 35 18.5l380.8-328.4c10.9-9.4 10.9-27.6 0-37z"></path></svg></span></div><span class="ant-collapse-header-text">This is panel header 1</span>
<!---->
</div>
<div class="ant-collapse-content ant-collapse-content-active">
@ -101,14 +150,14 @@ exports[`renders ./components/collapse/demo/custom.vue correctly 1`] = `
</div>
<div style="background: rgb(247, 247, 247); border-radius: 4px; margin-bottom: 24px; border: 0px; overflow: hidden;" class="ant-collapse-item">
<div class="ant-collapse-header" role="button" tabindex="0" aria-expanded="false">
<div><span role="img" aria-label="caret-right" class="anticon anticon-caret-right ant-collapse-arrow"><svg focusable="false" class="" data-icon="caret-right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M715.8 493.5L335 165.1c-14.2-12.2-35-1.2-35 18.5v656.8c0 19.7 20.8 30.7 35 18.5l380.8-328.4c10.9-9.4 10.9-27.6 0-37z"></path></svg></span></div>This is panel header 2
<div class="ant-collapse-expand-icon"><span role="img" aria-label="caret-right" class="anticon anticon-caret-right ant-collapse-arrow"><svg focusable="false" class="" data-icon="caret-right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M715.8 493.5L335 165.1c-14.2-12.2-35-1.2-35 18.5v656.8c0 19.7 20.8 30.7 35 18.5l380.8-328.4c10.9-9.4 10.9-27.6 0-37z"></path></svg></span></div><span class="ant-collapse-header-text">This is panel header 2</span>
<!---->
</div>
<!---->
</div>
<div style="background: rgb(247, 247, 247); border-radius: 4px; margin-bottom: 24px; border: 0px; overflow: hidden;" class="ant-collapse-item">
<div class="ant-collapse-header" role="button" tabindex="0" aria-expanded="false">
<div><span role="img" aria-label="caret-right" class="anticon anticon-caret-right ant-collapse-arrow"><svg focusable="false" class="" data-icon="caret-right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M715.8 493.5L335 165.1c-14.2-12.2-35-1.2-35 18.5v656.8c0 19.7 20.8 30.7 35 18.5l380.8-328.4c10.9-9.4 10.9-27.6 0-37z"></path></svg></span></div>This is panel header 3
<div class="ant-collapse-expand-icon"><span role="img" aria-label="caret-right" class="anticon anticon-caret-right ant-collapse-arrow"><svg focusable="false" class="" data-icon="caret-right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M715.8 493.5L335 165.1c-14.2-12.2-35-1.2-35 18.5v656.8c0 19.7 20.8 30.7 35 18.5l380.8-328.4c10.9-9.4 10.9-27.6 0-37z"></path></svg></span></div><span class="ant-collapse-header-text">This is panel header 3</span>
<!---->
</div>
<!---->
@ -117,10 +166,11 @@ exports[`renders ./components/collapse/demo/custom.vue correctly 1`] = `
`;
exports[`renders ./components/collapse/demo/extra.vue correctly 1`] = `
<div class="ant-collapse ant-collapse-icon-position-left">
<div class="ant-collapse ant-collapse-icon-position-start">
<div class="ant-collapse-item ant-collapse-item-active">
<div class="ant-collapse-header" role="button" tabindex="0" aria-expanded="true">
<div><span role="img" aria-label="right" class="anticon anticon-right ant-collapse-arrow"><svg focusable="false" class="" style="transform: rotate(90deg);" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></div>This is panel header 1<div class="ant-collapse-extra"><span role="img" aria-label="setting" tabindex="-1" class="anticon anticon-setting"><svg focusable="false" class="" data-icon="setting" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 009.3-35.2l-.9-2.6a443.74 443.74 0 00-79.7-137.9l-1.8-2.1a32.12 32.12 0 00-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 00-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 00-25.8 25.7l-15.8 85.4a351.86 351.86 0 00-99 57.4l-81.9-29.1a32 32 0 00-35.1 9.5l-1.8 2.1a446.02 446.02 0 00-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 00-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0035.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0025.8 25.7l2.7.5a449.4 449.4 0 00159 0l2.7-.5a32.05 32.05 0 0025.8-25.7l15.7-85a350 350 0 0099.7-57.6l81.3 28.9a32 32 0 0035.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 01-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 01-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 01512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 01400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 01624 502c0 29.9-11.7 58-32.8 79.2z"></path></svg></span></div>
<div class="ant-collapse-expand-icon"><span role="img" aria-label="right" class="anticon anticon-right ant-collapse-arrow"><svg focusable="false" class="" style="transform: rotate(90deg);" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></div><span class="ant-collapse-header-text">This is panel header 1</span>
<div class="ant-collapse-extra"><span role="img" aria-label="setting" tabindex="-1" class="anticon anticon-setting"><svg focusable="false" class="" data-icon="setting" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 009.3-35.2l-.9-2.6a443.74 443.74 0 00-79.7-137.9l-1.8-2.1a32.12 32.12 0 00-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 00-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 00-25.8 25.7l-15.8 85.4a351.86 351.86 0 00-99 57.4l-81.9-29.1a32 32 0 00-35.1 9.5l-1.8 2.1a446.02 446.02 0 00-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 00-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0035.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0025.8 25.7l2.7.5a449.4 449.4 0 00159 0l2.7-.5a32.05 32.05 0 0025.8-25.7l15.7-85a350 350 0 0099.7-57.6l81.3 28.9a32 32 0 0035.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 01-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 01-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 01512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 01400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 01624 502c0 29.9-11.7 58-32.8 79.2z"></path></svg></span></div>
</div>
<div class="ant-collapse-content ant-collapse-content-active">
<div class="ant-collapse-content-box">
@ -130,13 +180,15 @@ exports[`renders ./components/collapse/demo/extra.vue correctly 1`] = `
</div>
<div class="ant-collapse-item">
<div class="ant-collapse-header" role="button" tabindex="0" aria-expanded="false">
<div><span role="img" aria-label="right" class="anticon anticon-right ant-collapse-arrow"><svg focusable="false" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></div>This is panel header 2<div class="ant-collapse-extra"><span role="img" aria-label="setting" tabindex="-1" class="anticon anticon-setting"><svg focusable="false" class="" data-icon="setting" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 009.3-35.2l-.9-2.6a443.74 443.74 0 00-79.7-137.9l-1.8-2.1a32.12 32.12 0 00-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 00-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 00-25.8 25.7l-15.8 85.4a351.86 351.86 0 00-99 57.4l-81.9-29.1a32 32 0 00-35.1 9.5l-1.8 2.1a446.02 446.02 0 00-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 00-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0035.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0025.8 25.7l2.7.5a449.4 449.4 0 00159 0l2.7-.5a32.05 32.05 0 0025.8-25.7l15.7-85a350 350 0 0099.7-57.6l81.3 28.9a32 32 0 0035.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 01-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 01-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 01512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 01400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 01624 502c0 29.9-11.7 58-32.8 79.2z"></path></svg></span></div>
<div class="ant-collapse-expand-icon"><span role="img" aria-label="right" class="anticon anticon-right ant-collapse-arrow"><svg focusable="false" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></div><span class="ant-collapse-header-text">This is panel header 2</span>
<div class="ant-collapse-extra"><span role="img" aria-label="setting" tabindex="-1" class="anticon anticon-setting"><svg focusable="false" class="" data-icon="setting" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 009.3-35.2l-.9-2.6a443.74 443.74 0 00-79.7-137.9l-1.8-2.1a32.12 32.12 0 00-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 00-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 00-25.8 25.7l-15.8 85.4a351.86 351.86 0 00-99 57.4l-81.9-29.1a32 32 0 00-35.1 9.5l-1.8 2.1a446.02 446.02 0 00-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 00-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0035.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0025.8 25.7l2.7.5a449.4 449.4 0 00159 0l2.7-.5a32.05 32.05 0 0025.8-25.7l15.7-85a350 350 0 0099.7-57.6l81.3 28.9a32 32 0 0035.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 01-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 01-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 01512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 01400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 01624 502c0 29.9-11.7 58-32.8 79.2z"></path></svg></span></div>
</div>
<!---->
</div>
<div class="ant-collapse-item ant-collapse-item-disabled">
<div class="ant-collapse-header" role="button" tabindex="-1" aria-expanded="false">
<div><span role="img" aria-label="right" class="anticon anticon-right ant-collapse-arrow"><svg focusable="false" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></div>This is panel header 3<div class="ant-collapse-extra"><span role="img" aria-label="setting" tabindex="-1" class="anticon anticon-setting"><svg focusable="false" class="" data-icon="setting" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 009.3-35.2l-.9-2.6a443.74 443.74 0 00-79.7-137.9l-1.8-2.1a32.12 32.12 0 00-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 00-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 00-25.8 25.7l-15.8 85.4a351.86 351.86 0 00-99 57.4l-81.9-29.1a32 32 0 00-35.1 9.5l-1.8 2.1a446.02 446.02 0 00-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 00-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0035.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0025.8 25.7l2.7.5a449.4 449.4 0 00159 0l2.7-.5a32.05 32.05 0 0025.8-25.7l15.7-85a350 350 0 0099.7-57.6l81.3 28.9a32 32 0 0035.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 01-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 01-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 01512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 01400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 01624 502c0 29.9-11.7 58-32.8 79.2z"></path></svg></span></div>
<div class="ant-collapse-expand-icon"><span role="img" aria-label="right" class="anticon anticon-right ant-collapse-arrow"><svg focusable="false" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></div><span class="ant-collapse-header-text">This is panel header 3</span>
<div class="ant-collapse-extra"><span role="img" aria-label="setting" tabindex="-1" class="anticon anticon-setting"><svg focusable="false" class="" data-icon="setting" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 009.3-35.2l-.9-2.6a443.74 443.74 0 00-79.7-137.9l-1.8-2.1a32.12 32.12 0 00-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 00-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 00-25.8 25.7l-15.8 85.4a351.86 351.86 0 00-99 57.4l-81.9-29.1a32 32 0 00-35.1 9.5l-1.8 2.1a446.02 446.02 0 00-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 00-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0035.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0025.8 25.7l2.7.5a449.4 449.4 0 00159 0l2.7-.5a32.05 32.05 0 0025.8-25.7l15.7-85a350 350 0 0099.7-57.6l81.3 28.9a32 32 0 0035.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 01-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 01-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 01512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 01400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 01624 502c0 29.9-11.7 58-32.8 79.2z"></path></svg></span></div>
</div>
<!---->
</div>
@ -146,18 +198,19 @@ exports[`renders ./components/collapse/demo/extra.vue correctly 1`] = `
<div class="ant-select ant-select-single ant-select-show-arrow">
<!---->
<!---->
<div class="ant-select-selector"><span class="ant-select-selection-search"><input type="search" id="rc_select_TEST_OR_SSR" autocomplete="off" class="ant-select-selection-search-input" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" aria-activedescendant="rc_select_TEST_OR_SSR_list_0" readonly="" unselectable="on" style="opacity: 0;"></span><span class="ant-select-selection-item">left</span>
<div class="ant-select-selector"><span class="ant-select-selection-search"><input type="search" id="rc_select_TEST_OR_SSR" autocomplete="off" class="ant-select-selection-search-input" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" aria-activedescendant="rc_select_TEST_OR_SSR_list_0" readonly="" unselectable="on" style="opacity: 0;"></span><span class="ant-select-selection-item">start</span>
<!---->
</div><span class="ant-select-arrow" style="user-select: none;" unselectable="on" aria-hidden="true"><span role="img" aria-label="down" class="anticon anticon-down ant-select-suffix"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span>
</div><span class="ant-select-arrow" style="user-select: none;" unselectable="on" aria-hidden="true"><span role="img" aria-label="down" class="anticon anticon-down ant-select-suffix"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span>
<!----></span>
<!---->
</div>
`;
exports[`renders ./components/collapse/demo/ghost.vue correctly 1`] = `
<div class="ant-collapse ant-collapse-icon-position-left ant-collapse-ghost">
<div class="ant-collapse ant-collapse-icon-position-start ant-collapse-ghost">
<div class="ant-collapse-item ant-collapse-item-active">
<div class="ant-collapse-header" role="button" tabindex="0" aria-expanded="true">
<div><span role="img" aria-label="right" class="anticon anticon-right ant-collapse-arrow"><svg focusable="false" class="" style="transform: rotate(90deg);" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></div>This is panel header 1
<div class="ant-collapse-expand-icon"><span role="img" aria-label="right" class="anticon anticon-right ant-collapse-arrow"><svg focusable="false" class="" style="transform: rotate(90deg);" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></div><span class="ant-collapse-header-text">This is panel header 1</span>
<!---->
</div>
<div class="ant-collapse-content ant-collapse-content-active">
@ -168,14 +221,14 @@ exports[`renders ./components/collapse/demo/ghost.vue correctly 1`] = `
</div>
<div class="ant-collapse-item">
<div class="ant-collapse-header" role="button" tabindex="0" aria-expanded="false">
<div><span role="img" aria-label="right" class="anticon anticon-right ant-collapse-arrow"><svg focusable="false" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></div>This is panel header 2
<div class="ant-collapse-expand-icon"><span role="img" aria-label="right" class="anticon anticon-right ant-collapse-arrow"><svg focusable="false" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></div><span class="ant-collapse-header-text">This is panel header 2</span>
<!---->
</div>
<!---->
</div>
<div class="ant-collapse-item ant-collapse-item-disabled">
<div class="ant-collapse-header" role="button" tabindex="-1" aria-expanded="false">
<div><span role="img" aria-label="right" class="anticon anticon-right ant-collapse-arrow"><svg focusable="false" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></div>This is panel header 3
<div class="ant-collapse-expand-icon"><span role="img" aria-label="right" class="anticon anticon-right ant-collapse-arrow"><svg focusable="false" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></div><span class="ant-collapse-header-text">This is panel header 3</span>
<!---->
</div>
<!---->
@ -184,24 +237,24 @@ exports[`renders ./components/collapse/demo/ghost.vue correctly 1`] = `
`;
exports[`renders ./components/collapse/demo/mix.vue correctly 1`] = `
<div class="ant-collapse ant-collapse-icon-position-left">
<div class="ant-collapse ant-collapse-icon-position-start">
<div class="ant-collapse-item">
<div class="ant-collapse-header" role="button" tabindex="0" aria-expanded="false">
<div><span role="img" aria-label="right" class="anticon anticon-right ant-collapse-arrow"><svg focusable="false" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></div>This is panel header 1
<div class="ant-collapse-expand-icon"><span role="img" aria-label="right" class="anticon anticon-right ant-collapse-arrow"><svg focusable="false" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></div><span class="ant-collapse-header-text">This is panel header 1</span>
<!---->
</div>
<!---->
</div>
<div class="ant-collapse-item">
<div class="ant-collapse-header" role="button" tabindex="0" aria-expanded="false">
<div><span role="img" aria-label="right" class="anticon anticon-right ant-collapse-arrow"><svg focusable="false" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></div>This is panel header 2
<div class="ant-collapse-expand-icon"><span role="img" aria-label="right" class="anticon anticon-right ant-collapse-arrow"><svg focusable="false" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></div><span class="ant-collapse-header-text">This is panel header 2</span>
<!---->
</div>
<!---->
</div>
<div class="ant-collapse-item">
<div class="ant-collapse-header" role="button" tabindex="0" aria-expanded="false">
<div><span role="img" aria-label="right" class="anticon anticon-right ant-collapse-arrow"><svg focusable="false" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></div>This is panel header 3
<div class="ant-collapse-expand-icon"><span role="img" aria-label="right" class="anticon anticon-right ant-collapse-arrow"><svg focusable="false" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></div><span class="ant-collapse-header-text">This is panel header 3</span>
<!---->
</div>
<!---->
@ -210,10 +263,10 @@ exports[`renders ./components/collapse/demo/mix.vue correctly 1`] = `
`;
exports[`renders ./components/collapse/demo/noarrow.vue correctly 1`] = `
<div class="ant-collapse ant-collapse-icon-position-left">
<div class="ant-collapse ant-collapse-icon-position-start">
<div class="ant-collapse-item ant-collapse-item-active">
<div class="ant-collapse-header" role="button" tabindex="0" aria-expanded="true">
<div><span role="img" aria-label="right" class="anticon anticon-right ant-collapse-arrow"><svg focusable="false" class="" style="transform: rotate(90deg);" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></div>This is panel header with arrow icon
<div class="ant-collapse-expand-icon"><span role="img" aria-label="right" class="anticon anticon-right ant-collapse-arrow"><svg focusable="false" class="" style="transform: rotate(90deg);" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></div><span class="ant-collapse-header-text">This is panel header with arrow icon</span>
<!---->
</div>
<div class="ant-collapse-content ant-collapse-content-active">
@ -224,7 +277,7 @@ exports[`renders ./components/collapse/demo/noarrow.vue correctly 1`] = `
</div>
<div class="ant-collapse-item ant-collapse-no-arrow">
<div class="ant-collapse-header" role="button" tabindex="0" aria-expanded="false">
<!---->This is panel header with no arrow icon
<!----><span class="ant-collapse-header-text">This is panel header with no arrow icon</span>
<!---->
</div>
<!---->

6
components/collapse/__tests__/__snapshots__/index.test.js.snap
View File

@ -1,12 +1,12 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Collapse should support remove expandIcon 1`] = `
<div class="ant-collapse ant-collapse-icon-position-left">
<div class="ant-collapse ant-collapse-icon-position-start">
<div class="ant-collapse-item">
<div class="ant-collapse-header" role="button" tabindex="0" aria-expanded="false">
<div>
<div class="ant-collapse-expand-icon">
<!---->
</div>header
</div><span class="ant-collapse-header-text">header</span>
<!---->
</div>
<!---->

18
components/collapse/demo/accordion.vue
View File

@ -29,18 +29,8 @@ In accordion mode, only one panel can be expanded at a time.
</a-collapse-panel>
</a-collapse>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const activeKey = ref([]);
const text = `A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.`;
return {
activeKey,
text,
};
},
});
<script lang="ts" setup>
import { ref } from 'vue';
const activeKey = ref([]);
const text = `A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.`;
</script>

21
components/collapse/demo/basic.vue
View File

@ -29,22 +29,13 @@ By default, any number of panels can be expanded at a time. The first panel is e
</a-collapse-panel>
</a-collapse>
</template>
<script lang="ts">
import { defineComponent, ref, watch } from 'vue';
<script lang="ts" setup>
import { ref, watch } from 'vue';
export default defineComponent({
setup() {
const text = `A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.`;
const activeKey = ref(['1']);
const text = `A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.`;
const activeKey = ref(['1']);
watch(activeKey, val => {
console.log(val);
});
return {
text,
activeKey,
};
},
watch(activeKey, val => {
console.log(val);
});
</script>

16
components/collapse/demo/borderless.vue
View File

@ -29,16 +29,8 @@ A borderless style of Collapse.
</a-collapse-panel>
</a-collapse>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const activeKey = ref(['1']);
const text = `A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.`;
return {
activeKey,
text,
};
},
});
<script lang="ts" setup>
import { ref } from 'vue';
const activeKey = ref(['1']);
const text = `A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.`;
</script>

38
components/collapse/demo/collapsible.vue
View File

@ -5,50 +5,42 @@ title:
zh-CN: 可折叠触发区域
en-US: Collapsible
---
## zh-CN
通过 `collapsible` 属性，可以设置面板的可折叠触发区域。
## en-US
Specify the trigger area of collapsible by `collapsible`.
</docs>
<template>
<a-space direction="vertical">
<a-collapse collapsible="header" v-model:activeKey="activeKey">
<a-collapse-panel header="This panel can only be collapsed by clicking text" key="1">
<a-collapse v-model:activeKey="activeKey" collapsible="header">
<a-collapse-panel key="1" header="This panel can only be collapsed by clicking text">
<p>{{ text }}</p>
</a-collapse-panel>
</a-collapse>
<a-collapse collapsible="icon" v-model:activeKey="activeKey">
<a-collapse-panel header="This panel can only be collapsed by clicking icon" key="1">
<a-collapse v-model:activeKey="activeKey" collapsible="icon">
<a-collapse-panel key="1" header="This panel can only be collapsed by clicking icon">
<p>{{ text }}</p>
</a-collapse-panel>
</a-collapse>
<a-collapse collapsible="disabled">
<a-collapse-panel header="This panel can't be collapsed" key="1">
<a-collapse-panel key="1" header="This panel can't be collapsed">
<p>{{ text }}</p>
</a-collapse-panel>
</a-collapse>
</a-space>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const activeKey = ref(['1']);
const text = `A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.`;
return {
activeKey,
text,
};
},
});
<script lang="ts" setup>
import { ref } from 'vue';
const activeKey = ref(['1']);
const text = `A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.`;
</script>
<style>
<style scoped>
.ant-space {
width: 100%;
}

24
components/collapse/demo/custom.vue
View File

@ -36,24 +36,12 @@ Customize the background, border and margin styles and icon for each panel.
</a-collapse-panel>
</a-collapse>
</template>
<script lang="ts">
<script lang="ts" setup>
import { CaretRightOutlined } from '@ant-design/icons-vue';
import { defineComponent, ref } from 'vue';
import { ref } from 'vue';
export default defineComponent({
components: {
CaretRightOutlined,
},
setup() {
const activeKey = ref(['1']);
const text = `A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.`;
const customStyle =
'background: #f7f7f7;border-radius: 4px;margin-bottom: 24px;border: 0;overflow: hidden';
return {
activeKey,
text,
customStyle,
};
},
});
const activeKey = ref(['1']);
const text = `A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.`;
const customStyle =
'background: #f7f7f7;border-radius: 4px;margin-bottom: 24px;border: 0;overflow: hidden';
</script>

36
components/collapse/demo/extra.vue
View File

@ -38,34 +38,20 @@ More than one panel can be expanded at a time, the first panel is initialized to
<a-select-option value="end">end</a-select-option>
</a-select>
</template>
<script lang="ts">
<script lang="ts" setup>
import { SettingOutlined } from '@ant-design/icons-vue';
import { defineComponent, ref, watch } from 'vue';
import { ref, watch } from 'vue';
import type { CollapseProps } from 'ant-design-vue';
export default defineComponent({
components: {
SettingOutlined,
},
setup() {
const text = `A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.`;
const activeKey = ref(['1']);
const expandIconPosition = ref<CollapseProps['expandIconPosition']>('start');
const text = `A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.`;
const activeKey = ref(['1']);
const expandIconPosition = ref<CollapseProps['expandIconPosition']>('start');
const handleClick = (event: MouseEvent) => {
// If you don't want click extra trigger collapse, you can prevent this:
event.stopPropagation();
};
watch(activeKey, val => {
console.log(val);
});
return {
text,
activeKey,
expandIconPosition,
handleClick,
};
},
const handleClick = (event: MouseEvent) => {
// If you don't want click extra trigger collapse, you can prevent this:
event.stopPropagation();
};
watch(activeKey, val => {
console.log(val);
});
</script>

22
components/collapse/demo/ghost.vue
View File

@ -29,22 +29,12 @@ Making collapse's background to transparent.
</a-collapse-panel>
</a-collapse>
</template>
<script lang="ts">
import { defineComponent, ref, watch } from 'vue';
<script lang="ts" setup>
import { ref, watch } from 'vue';
const text = `A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.`;
const activeKey = ref(['1']);
export default defineComponent({
setup() {
const text = `A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.`;
const activeKey = ref(['1']);
watch(activeKey, val => {
console.log(val);
});
return {
text,
activeKey,
};
},
watch(activeKey, val => {
console.log(val);
});
</script>

Some files were not shown because too many files have changed in this diff Show More