From ea12d9d24261b38f2cb8a7e7d391210e291643f2 Mon Sep 17 00:00:00 2001
From: luohuidong <luohuidong01@126.com>
Date: Thu, 1 Feb 2024 23:47:52 +0800
Subject: [PATCH] feat: show the placeholder if there are no selection options
 in the selection

---
 .changeset/large-geese-fold.md                |  5 ++++
 src/components/data-entry/Select/Select.vue   | 12 ++++++--
 .../data-entry/Select/story/Empty.vue         | 29 +++++++++++++++++++
 .../data-entry/Select/story/Input.stories.ts  |  8 +++++
 4 files changed, 52 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/large-geese-fold.md
 create mode 100644 src/components/data-entry/Select/story/Empty.vue

diff --git a/.changeset/large-geese-fold.md b/.changeset/large-geese-fold.md
new file mode 100644
index 00000000..f0c230b0
--- /dev/null
+++ b/.changeset/large-geese-fold.md
@@ -0,0 +1,5 @@
+---
+"unify-ui": patch
+---
+
+Show the placeholder if there are no selection options in the selection
diff --git a/src/components/data-entry/Select/Select.vue b/src/components/data-entry/Select/Select.vue
index 4e10b9ae..c3fc2a08 100644
--- a/src/components/data-entry/Select/Select.vue
+++ b/src/components/data-entry/Select/Select.vue
@@ -7,7 +7,7 @@ export default defineComponent({
 </script>
 
 <script setup lang="ts">
-import { UniPopup } from "@/components";
+import { UniPopup, UniEmpty } from "@/components";
 import type { SelectProps, SelectEmits } from "./types";
 import { useProvideStore, useDocumentClick } from "./composables";
 
@@ -44,7 +44,11 @@ useDocumentClick({
         </template>
 
         <template v-else>
-          <slot></slot>
+          <slot>
+            <div :class="$style.empty">
+              <uni-empty></uni-empty>
+            </div>
+          </slot>
         </template>
       </ul>
     </template>
@@ -62,4 +66,8 @@ useDocumentClick({
   margin: 0;
   border-radius: form.$radius;
 }
+
+.empty {
+  padding: 20px;
+}
 </style>
diff --git a/src/components/data-entry/Select/story/Empty.vue b/src/components/data-entry/Select/story/Empty.vue
new file mode 100644
index 00000000..c6f6fdd9
--- /dev/null
+++ b/src/components/data-entry/Select/story/Empty.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { UniSelect, UniSelectOption } from "@/components";
+
+const options: { label: string; value: string }[] = [];
+
+const value = ref<string>();
+</script>
+
+<template>
+  <div class="container">
+    <UniSelect v-model="value">
+      <UniSelectOption
+        v-for="item in options"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value"
+      ></UniSelectOption>
+    </UniSelect>
+  </div>
+</template>
+
+<style scoped>
+.container {
+  width: 500px;
+  height: 500px;
+  padding: 20px;
+}
+</style>
diff --git a/src/components/data-entry/Select/story/Input.stories.ts b/src/components/data-entry/Select/story/Input.stories.ts
index 76f74dca..b272918c 100644
--- a/src/components/data-entry/Select/story/Input.stories.ts
+++ b/src/components/data-entry/Select/story/Input.stories.ts
@@ -9,6 +9,7 @@ import ShowCaseLoading from "./Loading.vue";
 import ShowCaseRemoteSearch from "./RemoteSearch.vue";
 import ShowCaseMultiple from "./Multiple.vue";
 import ShowCaseStatusError from "./StatusError.vue";
+import ShowCaseEmpty from "./Empty.vue";
 
 const meta = {
   title: "Data Entry/Select",
@@ -76,3 +77,10 @@ export const StatusError: Story = {
     template: "<ShowCaseStatusError />",
   }),
 };
+
+export const Empty: Story = {
+  render: () => ({
+    components: { ShowCaseEmpty },
+    template: "<ShowCaseEmpty />",
+  }),
+};