refactor: segmented #6286

Author: tangjinzhou

components/_util/type.ts

@@ -59,8 +59,18 @@ export function functionType<T = () => {}>(defaultVal?: T) {
   return { type: Function as PropType<T>, default: defaultVal as T };
 }
 
-export function anyType<T = any>(defaultVal?: T) {
-  return { validator: () => true, default: defaultVal as T } as unknown as { type: PropType<T> };
+export function anyType<T = any>(defaultVal?: T, required?: boolean) {
+  const type = { validator: () => true, default: defaultVal as T } as unknown;
+  return required
+    ? (type as {
+        type: PropType<T>;
+        default: T;
+        required: true;
+      })
+    : (type as {
+        default: T;
+        type: PropType<T>;
+      });
 }
 export function vNodeType<T = VueNode>() {
   return { validator: () => true } as unknown as { type: PropType<T> };

components/segmented/demo/basic.vue

@@ -15,17 +15,19 @@ The most basic usage.
 </docs>
 
 <template>
-  <a-segmented :options="data" />
+  <a-segmented v-model:value="value" :options="data" />
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive } from 'vue';
+import { defineComponent, reactive, ref } from 'vue';
 
 export default defineComponent({
   setup() {
     const data = reactive(['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']);
+    const value = ref(data[0]);
     return {
       data,
+      value,
     };
   },
 });

components/segmented/demo/block.vue

@@ -14,17 +14,19 @@ title:
 `block` property will make the `Segmented` fit to its parent width.
 </docs>
 <template>
-  <a-segmented block :options="data" />
+  <a-segmented v-model:value="value" block :options="data" />
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive } from 'vue';
+import { defineComponent, reactive, ref } from 'vue';
 
 export default defineComponent({
   setup() {
     const data = reactive([123, 456, 'longtext-longtext-longtext-longtext']);
+    const value = ref(data[0]);
     return {
       data,
+      value,
     };
   },
 });

components/segmented/demo/controlled.vue

@@ -14,80 +14,103 @@ title:
 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-segmented v-model:value="value" :options="data">
+    <template #label="{ value: val, payload = {} }">
+      <div style="padding: 4px 4px">
+        <template v-if="payload.icon">
+          <a-avatar :src="payload.src" :style="payload.style">
+            <template #icon><component :is="payload.icon" /></template>
+            {{ payload.content }}
           </a-avatar>
-          <div>User 3</div>
-        </div>
-      </template>
+        </template>
+        <template v-else>
+          <a-avatar :src="payload.src" :style="payload.style">
+            {{ payload.content }}
+          </a-avatar>
+        </template>
+        <div>{{ val }}</div>
+      </div>
     </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>
+  <a-segmented v-model:value="value2" :options="options2">
+    <template #label="{ payload }">
+      <div style="padding: 4px 4px">
+        <div>{{ payload.title }}</div>
+        <div>{{ payload.subTitle }}</div>
+      </div>
     </template>
   </a-segmented>
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive } from 'vue';
+import { defineComponent, ref } 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' },
+    const data = ref([
+      {
+        value: 'user1',
+        payload: {
+          src: 'https://joeschmoe.io/api/v1/random',
+          style: { backgroundColor: '#f56a00' },
+        },
+      },
+      {
+        value: 'user2',
+        payload: {
+          style: { backgroundColor: '#f56a00' },
+          content: 'K',
+        },
+      },
+      {
+        value: 'user3',
+        payload: {
+          icon: UserOutlined,
+          style: { backgroundColor: '#f56a00' },
+        },
+      },
+    ]);
+    const options2 = ref([
+      {
+        value: 'spring',
+        payload: {
+          title: 'Spring',
+          subTitle: 'Jan-Mar',
+        },
+      },
+      {
+        value: 'summer',
+        payload: {
+          title: 'Summer',
+          subTitle: 'Apr-Jun',
+        },
+      },
+      {
+        value: 'autumn',
+        payload: {
+          title: 'Autumn',
+          subTitle: 'Jul-Sept',
+        },
+      },
+      {
+        value: 'winter',
+        payload: {
+          title: 'Winter',
+          subTitle: 'Oct-Dec',
+        },
+      },
     ]);
+    const value = ref('user1');
+    const value2 = ref('spring');
     return {
       data,
       options2,
+      value,
+      value2,
     };
   },
 });

components/segmented/demo/custom.vue

@@ -15,15 +15,15 @@ Disabled Segmented.
 </docs>
 <template>
   <div>
-    <a-segmented disabled :options="data" />
+    <a-segmented v-model:value="value" disabled :options="data" />
     <br />
     <br />
-    <a-segmented :options="data2" />
+    <a-segmented v-model:value="value2" :options="data2" />
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive } from 'vue';
+import { defineComponent, reactive, ref } from 'vue';
 
 export default defineComponent({
   setup() {
@@ -35,9 +35,13 @@ export default defineComponent({
       { value: 'Quarterly', disabled: true },
       'Yearly',
     ]);
+    const value = ref(data[0]);
+    const value2 = ref('Daily');
     return {
       data,
       data2,
+      value,
+      value2,
     };
   },
 });

components/segmented/demo/disabled.vue

@@ -14,26 +14,28 @@ title:
 Load dynamically.
 </docs>
 <template>
-  <a-segmented :options="data"></a-segmented>
+  <a-segmented v-model:value="value" :options="data"></a-segmented>
   <br />
   <br />
-  <a-button type="primary" @click="loadMore" :disabled="isDisabled">Load More</a-button>
+  <a-button type="primary" :disabled="isDisabled" @click="loadMore">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 isDisabled = ref(false);
     const loadMore = () => {
       data.push(...['Quarterly', 'Yearly']);
       isDisabled.value = true;
     };
+    const value = ref(data[0]);
     return {
       data,
       loadMore,
       isDisabled,
+      value,
     };
   },
 });