From b9fff017bc159df3360d1faaa474b8c0eda64fa1 Mon Sep 17 00:00:00 2001
From: "suk.bear" <suk.bear.suwu@gmail.com>
Date: Wed, 7 Aug 2024 16:40:35 +0800
Subject: [PATCH] feat: add select slot

---
 README.md                                    | 33 +++++++++++-
 src/components/BaseSelect/BaseSelect.vue     | 57 ++++++++++----------
 src/components/BaseSelect/types.ts           |  5 ++
 src/components/DatePicker/DatePicker.vue     |  6 ++-
 src/components/DatePicker/DatePickerBase.vue | 12 ++++-
 src/components/DatePicker/TimePicker.vue     | 30 +++++++++--
 6 files changed, 107 insertions(+), 36 deletions(-)
 create mode 100644 src/components/BaseSelect/types.ts

diff --git a/README.md b/README.md
index 97403365c..1cdb40cee 100644
--- a/README.md
+++ b/README.md
@@ -139,4 +139,35 @@ yarn lint
 ```sh
 # Types, ES, ESM, CommonJS, IIFE
 yarn test
-```
\ No newline at end of file
+```
+
+## Use Select Slot
+
+```vue
+<script>
+import ASelect from 'ant-design-vue/es/select';
+import AOption from 'ant-design-vue/es/select/option';
+</script>
+
+<template>
+  <VCalendarDatePicker v-if="date && (typeof date === 'object')" v-model.range="date" :columns="2" v-bind="{ ...attrs, ...$attrs }" :attributes="attributes" mode="dateTime" is24hr>
+        <template #select="{ onChange, value, options }">
+          <a-select
+            :default-value="value"
+            size="mini"
+            :style="{ width: '68px' }"
+            @change="(val) => onChange(val)"
+          >
+            <a-option
+              v-for="option in options"
+              :key="option.value"
+              :value="option.value"
+              :disabled="option.disabled"
+            >
+              {{ option.label }}
+            </a-option>
+          </a-select>
+        </template>
+  </VCalendarDatePicker>
+</template>
+```
diff --git a/src/components/BaseSelect/BaseSelect.vue b/src/components/BaseSelect/BaseSelect.vue
index 34b8ee50c..ca951e4c2 100644
--- a/src/components/BaseSelect/BaseSelect.vue
+++ b/src/components/BaseSelect/BaseSelect.vue
@@ -6,27 +6,29 @@
       'vc-has-icon': showIcon,
     }"
   >
-    <select
-      v-bind="$attrs"
-      :value="modelValue"
-      class="vc-focus"
-      :class="{
-        'vc-align-right': alignRight,
-        'vc-align-left': alignLeft,
-      }"
-      @change="
-        $emit('update:modelValue', ($event.target as HTMLSelectElement).value)
-      "
-    >
-      <option
-        v-for="option in options"
-        :key="option.value"
-        :value="option.value"
-        :disabled="option.disabled"
+    <slot name="select" :onChange="handleChange" :value="modelValue" :options="options" :alignRight="alignRight" :alignLeft="alignLeft">
+        <select
+        v-bind="$attrs"
+        :value="modelValue"
+        class="vc-focus"
+        :class="{
+          'vc-align-right': alignRight,
+          'vc-align-left': alignLeft,
+        }"
+        @change="
+          $emit('update:modelValue', ($event.target as HTMLSelectElement).value)
+        "
       >
-        {{ option.label }}
-      </option>
-    </select>
+        <option
+          v-for="option in options"
+          :key="option.value"
+          :value="option.value"
+          :disabled="option.disabled"
+        >
+          {{ option.label }}
+        </option>
+      </select>
+    </slot>
     <BaseIcon v-if="showIcon" name="ChevronDown" size="18" />
     <div v-if="fitContent" class="vc-base-sizer" aria-hidden="true">
       {{ selectedLabel }}
@@ -35,12 +37,6 @@
 </template>
 
 <script lang="ts">
-interface BaseOption {
-  value: any;
-  label: string;
-  disabled?: boolean;
-}
-
 export default {
   inheritAttrs: false,
 };
@@ -49,6 +45,8 @@ export default {
 <script setup lang="ts">
 import { computed } from 'vue';
 import BaseIcon from '../BaseIcon/BaseIcon.vue';
+import type { BaseOption } from './types'
+
 
 const props = defineProps<{
   options: BaseOption[];
@@ -58,12 +56,16 @@ const props = defineProps<{
   showIcon?: boolean;
   fitContent?: boolean;
 }>();
-defineEmits(['update:modelValue']);
+const emit = defineEmits(['update:modelValue']);
 
 const selectedLabel = computed(() => {
   const option = props.options.find(opt => opt.value === props.modelValue);
   return option?.label;
 });
+
+function handleChange(val: any): void {
+  emit('update:modelValue', val);
+}
 </script>
 
 <style lang="css">
@@ -134,3 +136,4 @@ const selectedLabel = computed(() => {
   }
 }
 </style>
+./types
diff --git a/src/components/BaseSelect/types.ts b/src/components/BaseSelect/types.ts
new file mode 100644
index 000000000..54ffd98f9
--- /dev/null
+++ b/src/components/BaseSelect/types.ts
@@ -0,0 +1,5 @@
+export interface BaseOption {
+  value: any;
+  label: string;
+  disabled?: boolean;
+}
diff --git a/src/components/DatePicker/DatePicker.vue b/src/components/DatePicker/DatePicker.vue
index 6633776f0..3feca6290 100644
--- a/src/components/DatePicker/DatePicker.vue
+++ b/src/components/DatePicker/DatePicker.vue
@@ -3,7 +3,11 @@
     <slot v-bind="slotCtx" />
     <DatePickerPopover v-bind="$attrs" />
   </template>
-  <DatePickerBase v-else v-bind="$attrs" />
+  <DatePickerBase v-else v-bind="$attrs">
+    <template #select="{ onChange, value, options, alignRight, alignLeft }">
+      <slot name="select" :onChange="onChange" :value="value" :options="options" :alignRight="alignRight" :alignLeft="alignLeft" />
+    </template>
+  </DatePickerBase>
 </template>
 
 <script lang="ts">
diff --git a/src/components/DatePicker/DatePickerBase.vue b/src/components/DatePicker/DatePickerBase.vue
index 2ace7e794..724b34180 100644
--- a/src/components/DatePicker/DatePickerBase.vue
+++ b/src/components/DatePicker/DatePickerBase.vue
@@ -7,7 +7,11 @@
       v-for="position in positions"
       :key="position"
       :position="position"
-    />
+    >
+      <template #select="{ onChange, value, options, alignRight, alignLeft }">
+        <slot name="select" :onChange="onChange" :value="value" :options="options" :alignRight="alignRight" :alignLeft="alignLeft" />
+      </template>
+    </TimePicker>
   </div>
   <Calendar
     v-else
@@ -23,7 +27,11 @@
           v-for="position in positions"
           :key="position"
           :position="position"
-        />
+        >
+          <template #select="{ onChange, value, options, alignRight, alignLeft }">
+            <slot name="select" :onChange="onChange" :value="value" :options="options" :alignRight="alignRight" :alignLeft="alignLeft" />
+          </template>
+        </TimePicker>
       </template>
       <CalendarSlot name="dp-footer" />
     </template>
diff --git a/src/components/DatePicker/TimePicker.vue b/src/components/DatePicker/TimePicker.vue
index 2243020ce..29921a9a4 100644
--- a/src/components/DatePicker/TimePicker.vue
+++ b/src/components/DatePicker/TimePicker.vue
@@ -26,7 +26,11 @@
         :options="hourOptions"
         class="vc-time-select-hours"
         align-right
-      />
+      >
+        <template #select="{ onChange, value, options, alignRight, alignLeft }">
+          <slot name="select" :onChange="onChange" :value="value" :options="options" :alignRight="alignRight" :alignLeft="alignLeft" />
+        </template>
+      </BaseSelect>
       <template v-if="timeAccuracy > 1">
         <span class="vc-time-colon">:</span>
         <BaseSelect
@@ -34,7 +38,11 @@
           :options="options.minutes"
           class="vc-time-select-minutes"
           :align-left="timeAccuracy === 2"
-        />
+        >
+          <template #select="{ onChange, value, options, alignRight, alignLeft }">
+            <slot name="select" :onChange="onChange" :value="value" :options="options" :alignRight="alignRight" :alignLeft="alignLeft" />
+          </template>
+        </BaseSelect>
       </template>
       <template v-if="timeAccuracy > 2">
         <span class="vc-time-colon">:</span>
@@ -43,7 +51,11 @@
           :options="options.seconds"
           class="vc-time-select-seconds"
           :align-left="timeAccuracy === 3"
-        />
+        >
+          <template #select="{ onChange, value, options, alignRight, alignLeft }">
+            <slot name="select" :onChange="onChange" :value="value" :options="options" :alignRight="alignRight" :alignLeft="alignLeft" />
+          </template>
+        </BaseSelect>
       </template>
       <template v-if="timeAccuracy > 3">
         <span class="vc-time-decimal">.</span>
@@ -52,9 +64,17 @@
           :options="options.milliseconds"
           class="vc-time-select-milliseconds"
           align-left
-        />
+        >
+          <template #select="{ onChange, value, options, alignRight, alignLeft }">
+            <slot name="select" :onChange="onChange" :value="value" :options="options" :alignRight="alignRight" :alignLeft="alignLeft" />
+          </template>
+        </BaseSelect>
       </template>
-      <BaseSelect v-if="!is24hr" v-model="isAM" :options="isAMOptions" />
+      <BaseSelect v-if="!is24hr" v-model="isAM" :options="isAMOptions">
+        <template #select="{ onChange, value, options, alignRight, alignLeft }">
+          <slot name="select" :onChange="onChange" :value="value" :options="options" :alignRight="alignRight" :alignLeft="alignLeft" />
+        </template>
+      </BaseSelect>
     </div>
   </div>
 </template>