feat: add segmented (#5568)

components/components.ts

@@ -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';

components/segmented/__tests__/demo.test.js

@@ -0,0 +1,3 @@
+import demoTest from '../../../tests/shared/demoTest';
+
+demoTest('segmented');

components/segmented/__tests__/index.test.js

@@ -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');
+});

components/segmented/demo/basic.vue

@@ -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>

components/segmented/demo/block.vue

@@ -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>

components/segmented/demo/controlled.vue

@@ -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>

components/segmented/demo/custom.vue

@@ -0,0 +1,94 @@
+<docs>
+---
+order: 5
+title:
+  zh-CN: 自定义渲染
+  en-US: Custom
+---
+
+## zh-CN
+
+自定义渲染每一个 Segmented Item。
+
+## en-US
+Custom each Segmented Item.
+</docs>
+<template>
+  <a-segmented :options="data">
+    <template #title="index">
+      <template v-if="index === 0">
+        <div style="padding: 4px 4px">
+          <a-avatar src="https://joeschmoe.io/api/v1/random" />
+          <div>User 1</div>
+        </div>
+      </template>
+      <template v-if="index === 1">
+        <div style="padding: 4px 4px">
+          <a-avatar style="background-color: #f56a00">K</a-avatar>
+          <div>User 2</div>
+        </div>
+      </template>
+      <template v-if="index === 2">
+        <div style="padding: 4px 4px">
+          <a-avatar style="background-color: #1890ff">
+            <template #icon><UserOutlined /></template>
+          </a-avatar>
+          <div>User 3</div>
+        </div>
+      </template>
+    </template>
+  </a-segmented>
+  <br />
+  <br />
+  <a-segmented :options="options2">
+    <template #title="index">
+      <template v-if="index === 0">
+        <div style="padding: 4px 4px">
+          <div>Spring</div>
+          <div>Jan-Mar</div>
+        </div>
+      </template>
+      <template v-if="index === 1">
+        <div style="padding: 4px 4px">
+          <div>Summer</div>
+          <div>Apr-Jun</div>
+        </div>
+      </template>
+      <template v-if="index === 2">
+        <div style="padding: 4px 4px">
+          <div>Autumn</div>
+          <div>Jul-Sept</div>
+        </div>
+      </template>
+      <template v-if="index === 3">
+        <div style="padding: 4px 4px">
+          <div>Winter</div>
+          <div>Oct-Dec</div>
+        </div>
+      </template>
+    </template>
+  </a-segmented>
+</template>
+
+<script lang="ts">
+import { defineComponent, reactive } from 'vue';
+import { UserOutlined } from '@ant-design/icons-vue';
+import ASegmented from 'ant-design-vue/es/segmented/src/segmented';
+
+export default defineComponent({
+  components: { ASegmented, UserOutlined },
+  setup() {
+    const data = reactive([{ value: 'user1' }, { value: 'user2' }, { value: 'user3' }]);
+    const options2 = reactive([
+      { value: 'spring' },
+      { value: 'summer' },
+      { value: 'autumn' },
+      { value: 'winter' },
+    ]);
+    return {
+      data,
+      options2,
+    };
+  },
+});
+</script>

components/segmented/demo/disabled.vue

@@ -0,0 +1,44 @@
+<docs>
+---
+order: 3
+title:
+  zh-CN: 不可用
+  en-US: Disabled
+---
+
+## zh-CN
+
+Segmented 不可用。
+
+## en-US
+Disabled Segmented.
+</docs>
+<template>
+  <div>
+    <a-segmented disabled :options="data" />
+    <br />
+    <br />
+    <a-segmented :options="data2" />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, reactive } from 'vue';
+
+export default defineComponent({
+  setup() {
+    const data = reactive(['Map', 'Transit', 'Satellite']);
+    const data2 = reactive([
+      'Daily',
+      { value: 'Weekly', disabled: true },
+      'Monthly',
+      { value: 'Quarterly', disabled: true },
+      'Yearly',
+    ]);
+    return {
+      data,
+      data2,
+    };
+  },
+});
+</script>

components/segmented/demo/dynamic.vue

@@ -0,0 +1,40 @@
+<docs>
+---
+order: 6
+title:
+ zh-CN: 动态数据
+ en-US: Dynamic
+---
+
+## zh-CN
+
+动态加载数据。
+
+## en-US
+Load dynamically.
+</docs>
+<template>
+  <a-segmented :options="data"></a-segmented>
+  <br />
+  <br />
+  <a-button type="primary" @click="loadMore" :disabled="isDisabled">Load More</a-button>
+</template>
+
+<script lang="ts">
+import { defineComponent, reactive, ref } from 'vue';
+export default defineComponent({
+  setup() {
+    const data = reactive(['Daily', 'Weekly', 'Monthly']);
+    const isDisabled = ref<boolean>(false);
+    const loadMore = () => {
+      data.push(...['Quarterly', 'Yearly']);
+      isDisabled.value = true;
+    };
+    return {
+      data,
+      loadMore,
+      isDisabled,
+    };
+  },
+});
+</script>

components/segmented/demo/icon.vue

@@ -0,0 +1,49 @@
+<docs>
+---
+order: 7
+title:
+  zh-CN: 设置图标
+  en-US: With Icon
+---
+
+## zh-CN
+
+给 Segmented Item 设置 Icon。
+
+## en-US
+Set `icon` for Segmented Item.
+</docs>
+<template>
+  <a-segmented :options="data">
+    <template #icon="index">
+      <template v-if="index == 0">
+        <unordered-list-outlined />
+      </template>
+      <template v-if="index == 1">
+        <appstore-outlined />
+      </template>
+    </template>
+  </a-segmented>
+</template>
+
+<script lang="ts">
+import { defineComponent, reactive } from 'vue';
+import { UnorderedListOutlined, AppstoreOutlined } from '@ant-design/icons-vue';
+
+export default defineComponent({
+  components: { UnorderedListOutlined, AppstoreOutlined },
+  setup() {
+    const data = reactive([
+      {
+        value: 'List',
+      },
+      {
+        value: 'Kanban',
+      },
+    ]);
+    return {
+      data,
+    };
+  },
+});
+</script>

components/segmented/demo/index.vue

@@ -0,0 +1,36 @@
+<template>
+  <demo-sort>
+    <basic />
+    <block />
+    <disabled />
+    <controlled />
+    <custom />
+    <dynamic />
+    <size />
+    <icon />
+  </demo-sort>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import CN from '../index.zh-CN.md';
+import US from '../index.en-US.md';
+import Basic from './basic.vue';
+import Block from './block.vue';
+import Disabled from './disabled.vue';
+import Controlled from './controlled.vue';
+import Custom from './custom.vue';
+import Dynamic from './dynamic.vue';
+import Size from './size.vue';
+import Icon from './icon.vue';
+
+export default defineComponent({
+  components: { Icon, Size, Dynamic, Custom, Controlled, Disabled, Block, Basic },
+  category: 'Components',
+  subtitle: '分段控制器',
+  type: 'Data Display',
+  title: 'Segmented',
+  CN,
+  US,
+});
+</script>