feat: show the placeholder if there are no selection options in the s…

…election

.changeset/large-geese-fold.md

@@ -0,0 +1,5 @@
+---
+"unify-ui": patch
+---
+
+Show the placeholder if there are no selection options in the selection

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>

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>

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 />",
+  }),
+};