Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: add segmented (vueComponent#5568) #6173

Closed
wants to merge 2 commits into from
Closed

feat: add segmented (vueComponent#5568) #6173

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
386b4a8
feat: add segmented (vueComponent#5568)
selicens Dec 26, 2022
2c2f478
fix: segemented通过options下disabled来控制是否禁用报错
selicens Feb 11, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions components/components.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -244,3 +244,6 @@ export type { UploadProps, UploadListProps, UploadChangeParam, UploadFile } from
export { default as Upload, UploadDragger } from './upload';

export { default as LocaleProvider } from './locale-provider';

export type { SegmentedProps } from './segmented';
export { default as Segmented } from './segmented';
204 changes: 204 additions & 0 deletions components/segmented/__tests__/__snapshots__/demo.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,204 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`renders ./components/segmented/demo/basic.vue correctly 1`] = `
<div class="ant-segmented">
<div class="ant-segmented-group">
<div class="ant-segmented-thumb ant-segmented-thumb-motion-appear-active"></div><label class="ant-segmented-item ant-segmented-item-selected">
<!---->
<div class="ant-segmented-item-label">Daily</div>
</label><label class="ant-segmented-item">
<!---->
<div class="ant-segmented-item-label">Weekly</div>
</label><label class="ant-segmented-item">
<!---->
<div class="ant-segmented-item-label">Monthly</div>
</label><label class="ant-segmented-item">
<!---->
<div class="ant-segmented-item-label">Quarterly</div>
</label><label class="ant-segmented-item">
<!---->
<div class="ant-segmented-item-label">Yearly</div>
</label>
</div>
</div>
`;

exports[`renders ./components/segmented/demo/block.vue correctly 1`] = `
<div class="ant-segmented ant-segmented-block">
<div class="ant-segmented-group">
<div class="ant-segmented-thumb ant-segmented-thumb-motion-appear-active"></div><label class="ant-segmented-item ant-segmented-item-selected">
<!---->
<div class="ant-segmented-item-label">123</div>
</label><label class="ant-segmented-item">
<!---->
<div class="ant-segmented-item-label">456</div>
</label><label class="ant-segmented-item">
<!---->
<div class="ant-segmented-item-label">longtext-longtext-longtext-longtext</div>
</label>
</div>
</div>
`;

exports[`renders ./components/segmented/demo/controlled.vue correctly 1`] = `
<div>
<div class="ant-segmented">
<div class="ant-segmented-group">
<div class="ant-segmented-thumb ant-segmented-thumb-motion-appear-active"></div><label class="ant-segmented-item">
<!---->
<div class="ant-segmented-item-label">Map</div>
</label><label class="ant-segmented-item ant-segmented-item-selected">
<!---->
<div class="ant-segmented-item-label">Transit</div>
</label><label class="ant-segmented-item">
<!---->
<div class="ant-segmented-item-label">Satellite</div>
</label>
</div>
</div>
</div>
`;

exports[`renders ./components/segmented/demo/custom.vue correctly 1`] = `
<br>
<br>
`;

exports[`renders ./components/segmented/demo/disabled.vue correctly 1`] = `
<div>
<div class="ant-segmented ant-segmented-item-disabled">
<div class="ant-segmented-group">
<div class="ant-segmented-thumb ant-segmented-thumb-motion-appear-active"></div><label class="ant-segmented-item ant-segmented-item-selected ant-segmented-item-disabled"><input type="radio" class="ant-segmented-item-input" disabled="">
<div class="ant-segmented-item-label">Map</div>
</label><label class="ant-segmented-item ant-segmented-item-disabled"><input type="radio" class="ant-segmented-item-input" disabled="">
<div class="ant-segmented-item-label">Transit</div>
</label><label class="ant-segmented-item ant-segmented-item-disabled"><input type="radio" class="ant-segmented-item-input" disabled="">
<div class="ant-segmented-item-label">Satellite</div>
</label>
</div>
</div><br><br>
<div class="ant-segmented">
<div class="ant-segmented-group">
<div class="ant-segmented-thumb ant-segmented-thumb-motion-appear-active"></div><label class="ant-segmented-item ant-segmented-item-selected">
<!---->
<div class="ant-segmented-item-label">Daily</div>
</label><label class="ant-segmented-item ant-segmented-item-disabled"><input type="radio" class="ant-segmented-item-input" disabled="">
<div class="ant-segmented-item-label"><span>Weekly</span></div>
</label><label class="ant-segmented-item">
<!---->
<div class="ant-segmented-item-label">Monthly</div>
</label><label class="ant-segmented-item ant-segmented-item-disabled"><input type="radio" class="ant-segmented-item-input" disabled="">
<div class="ant-segmented-item-label"><span>Quarterly</span></div>
</label><label class="ant-segmented-item">
<!---->
<div class="ant-segmented-item-label">Yearly</div>
</label>
</div>
</div>
</div>
`;

exports[`renders ./components/segmented/demo/dynamic.vue correctly 1`] = `
<div class="ant-segmented">
<div class="ant-segmented-group">
<div class="ant-segmented-thumb ant-segmented-thumb-motion-appear-active"></div><label class="ant-segmented-item ant-segmented-item-selected">
<!---->
<div class="ant-segmented-item-label">Daily</div>
</label><label class="ant-segmented-item">
<!---->
<div class="ant-segmented-item-label">Weekly</div>
</label><label class="ant-segmented-item">
<!---->
<div class="ant-segmented-item-label">Monthly</div>
</label>
</div>
</div>
<br>
<br>
<button class="ant-btn ant-btn-primary" type="button">
<!----><span>Load More</span>
</button>
`;

exports[`renders ./components/segmented/demo/icon.vue correctly 1`] = `
<div class="ant-segmented">
<div class="ant-segmented-group">
<div class="ant-segmented-thumb ant-segmented-thumb-motion-appear-active"></div><label class="ant-segmented-item ant-segmented-item-selected">
<!---->
<div class="ant-segmented-item-label"><span class="ant-segmented-item-icon"><span role="img" aria-label="unordered-list" class="anticon anticon-unordered-list"><svg focusable="false" class="" data-icon="unordered-list" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M912 192H328c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 284H328c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 284H328c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM104 228a56 56 0 10112 0 56 56 0 10-112 0zm0 284a56 56 0 10112 0 56 56 0 10-112 0zm0 284a56 56 0 10112 0 56 56 0 10-112 0z"></path></svg></span>
<!--v-if--></span><span>List</span>
</div>
</label><label class="ant-segmented-item">
<!---->
<div class="ant-segmented-item-label"><span class="ant-segmented-item-icon"><!--v-if--><span role="img" aria-label="appstore" class="anticon anticon-appstore"><svg focusable="false" class="" data-icon="appstore" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M464 144H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H212V212h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H612V212h200v200zM464 544H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H212V612h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H612V612h200v200z"></path></svg></span></span><span>Kanban</span></div>
</label>
</div>
</div>
`;

exports[`renders ./components/segmented/demo/size.vue correctly 1`] = `
<div class="ant-segmented ant-segmented-lg">
<div class="ant-segmented-group">
<div class="ant-segmented-thumb ant-segmented-thumb-motion-appear-active"></div><label class="ant-segmented-item ant-segmented-item-selected">
<!---->
<div class="ant-segmented-item-label">Daily</div>
</label><label class="ant-segmented-item">
<!---->
<div class="ant-segmented-item-label">Weekly</div>
</label><label class="ant-segmented-item">
<!---->
<div class="ant-segmented-item-label">Monthly</div>
</label><label class="ant-segmented-item">
<!---->
<div class="ant-segmented-item-label">Quarterly</div>
</label><label class="ant-segmented-item">
<!---->
<div class="ant-segmented-item-label">Yearly</div>
</label>
</div>
</div>
<br>
<br>
<div class="ant-segmented">
<div class="ant-segmented-group">
<div class="ant-segmented-thumb ant-segmented-thumb-motion-appear-active"></div><label class="ant-segmented-item ant-segmented-item-selected">
<!---->
<div class="ant-segmented-item-label">Daily</div>
</label><label class="ant-segmented-item">
<!---->
<div class="ant-segmented-item-label">Weekly</div>
</label><label class="ant-segmented-item">
<!---->
<div class="ant-segmented-item-label">Monthly</div>
</label><label class="ant-segmented-item">
<!---->
<div class="ant-segmented-item-label">Quarterly</div>
</label><label class="ant-segmented-item">
<!---->
<div class="ant-segmented-item-label">Yearly</div>
</label>
</div>
</div>
<br>
<br>
<div class="ant-segmented ant-segmented-sm">
<div class="ant-segmented-group">
<div class="ant-segmented-thumb ant-segmented-thumb-motion-appear-active"></div><label class="ant-segmented-item ant-segmented-item-selected">
<!---->
<div class="ant-segmented-item-label">Daily</div>
</label><label class="ant-segmented-item">
<!---->
<div class="ant-segmented-item-label">Weekly</div>
</label><label class="ant-segmented-item">
<!---->
<div class="ant-segmented-item-label">Monthly</div>
</label><label class="ant-segmented-item">
<!---->
<div class="ant-segmented-item-label">Quarterly</div>
</label><label class="ant-segmented-item">
<!---->
<div class="ant-segmented-item-label">Yearly</div>
</label>
</div>
</div>
`;
3 changes: 3 additions & 0 deletions components/segmented/__tests__/demo.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import demoTest from '../../../tests/shared/demoTest';

demoTest('segmented');
11 changes: 11 additions & 0 deletions components/segmented/__tests__/index.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import { mount } from '@vue/test-utils';
import Segmented from '../index';
describe('Segmented', () => {
const wrapper = mount({
render() {
return <Segmented></Segmented>;
},
});
const todo = wrapper.get('[options="[1,2,3,4,5]"]');
expect(todo.text()).toBe('segmented');
});
32 changes: 32 additions & 0 deletions components/segmented/demo/basic.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
<docs>
---
order: 0
title:
zh-CN: 基本用法
en-US: Basic Usage
---

## zh-CN

最简单的用法。

## en-US
The most basic usage.
</docs>

<template>
<a-segmented :options="data" />
</template>

<script lang="ts">
import { defineComponent, reactive } from 'vue';

export default defineComponent({
setup() {
const data = reactive(['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']);
return {
data,
};
},
});
</script>
31 changes: 31 additions & 0 deletions components/segmented/demo/block.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
<docs>
---
order: 1
title:
zh-CN: Block分段控制器
en-US: Block Segmented
---

## zh-CN

`block` 属性使其适合父元素宽度。

## en-US
`block` property will make the `Segmented` fit to its parent width.
</docs>
<template>
<a-segmented block :options="data" />
</template>

<script lang="ts">
import { defineComponent, reactive } from 'vue';

export default defineComponent({
setup() {
const data = reactive([123, 456, 'longtext-longtext-longtext-longtext']);
return {
data,
};
},
});
</script>
35 changes: 35 additions & 0 deletions components/segmented/demo/controlled.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
<docs>
---
order: 4
title:
zh-CN: 受控模式
en-US: Controlled mode
---

## zh-CN

受控的 Segmented

## en-US
Controlled Segmented.
</docs>
<template>
<div>
<a-segmented :options="data" default-value="1" @change="handle" />
</div>
</template>

<script lang="ts">
import { defineComponent, reactive } from 'vue';

export default defineComponent({
setup() {
const data = reactive(['Map', 'Transit', 'Satellite']);
const handle = v => console.log(v);
return {
data,
handle,
};
},
});
</script>
Loading