fix(select): fix content overflow in multiple selections

devlive-community · Nov 7, 2024 · 2d6c617 · 2d6c617
1 parent 3862140
commit 2d6c617
Show file tree

Hide file tree

Showing 3 changed files with 117 additions and 30 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -1,9 +1,19 @@
 <template>
-  <div class="p-32">
+  <div class="p-32 space-y-2">
     <ShadcnSelect v-model="selected"
                   type="warning"
                   placeholder="Select options"
-                  multiple
+                  size="small"
+                  :options="options"/>
+    <ShadcnSelect v-model="selected"
+                  type="warning"
+                  placeholder="Select options"
+                  size="default"
+                  :options="options"/>
+    <ShadcnSelect v-model="selected"
+                  type="warning"
+                  placeholder="Select options"
+                  size="large"
                   :options="options"/>
   </div>
 </template>

diff --git a/src/ui/common/size.ts b/src/ui/common/size.ts
@@ -5,6 +5,20 @@ export enum Size
     large = 'h-10'
 }
 
+export enum MinSize
+{
+    default = 'min-h-8',
+    small = 'min-h-6',
+    large = 'min-h-10'
+}
+
+export enum PtPbSize
+{
+    default = '0.250rem',
+    small = '0.125rem',
+    large = '0.400rem'
+}
+
 export enum TabSize
 {
     default = 'h-10',

diff --git a/src/ui/select/ShadcnSelect.vue b/src/ui/select/ShadcnSelect.vue
@@ -1,41 +1,104 @@
+<!--<template>-->
+<!--  <div ref="selectRef" class="relative">-->
+<!--    <div :class="['flex items-center justify-between border rounded px-2 py-1',-->
+<!--                  Size[size],-->
+<!--                  {-->
+<!--                    'cursor-pointer': !disabled,-->
+<!--                    'cursor-not-allowed opacity-50 bg-gray-100': disabled,-->
+<!--                    [HoverType[type]]: true-->
+<!--                  }-->
+<!--         ]"-->
+<!--         @click="toggleDropdown">-->
+<!--      <div class="flex flex-wrap gap-1 flex-1">-->
+<!--        <slot name="selected">-->
+<!--          <template v-if="multiple && selectedLabels.length">-->
+<!--            <span v-for="(label, _index) in selectedLabels"-->
+<!--                  :key="_index"-->
+<!--                  class="bg-gray-100 px-2 py-1 rounded-md text-sm flex items-center gap-1">-->
+<!--              {{ label }}-->
+<!--              <button class="hover:text-red-500" @click.stop="removeSelection(_index)">-->
+<!--                ×-->
+<!--              </button>-->
+<!--            </span>-->
+<!--          </template>-->
+<!--          <template v-else>-->
+<!--            {{ selectedLabels[0] || placeholder }}-->
+<!--          </template>-->
+<!--        </slot>-->
+<!--      </div>-->
+
+<!--      <svg :class="['w-4 h-4 transition-transform duration-200 ml-1',-->
+<!--                    { 'rotate-180': isExpanded }]"-->
+<!--           fill="currentColor"-->
+<!--           viewBox="0 0 20 20"-->
+<!--           xmlns="http://www.w3.org/2000/svg">-->
+<!--        <path clip-rule="evenodd"-->
+<!--              d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"-->
+<!--              fill-rule="evenodd"/>-->
+<!--      </svg>-->
+<!--    </div>-->
+
+<!--    <div v-show="isExpanded"-->
+<!--         class="absolute z-10 bg-white border border-gray-300 rounded-sm mt-1 w-full py-2 px-2 space-y-1 overflow-y-auto max-h-60">-->
+<!--      <slot name="options">-->
+<!--        <ShadcnSelectOption v-for="(option, index) in internalOptions"-->
+<!--                            :key="index"-->
+<!--                            :value="option.value"-->
+<!--                            :label="option.label"-->
+<!--                            :selected="isOptionSelected(option.value)"-->
+<!--                            :disabled="option.disabled"-->
+<!--                            :type="type"/>-->
+<!--      </slot>-->
+<!--    </div>-->
+<!--  </div>-->
+<!--</template>-->
+
 <template>
   <div ref="selectRef" class="relative">
-    <div :class="['flex items-center justify-between border rounded p-3',
-                  Size[size],
+    <div :class="['flex border rounded px-2',
                   {
                     'cursor-pointer': !disabled,
                     'cursor-not-allowed opacity-50 bg-gray-100': disabled,
                     [HoverType[type]]: true
                   }
          ]"
          @click="toggleDropdown">
-      <div class="flex flex-wrap gap-1 flex-1">
-        <slot name="selected">
-          <template v-if="multiple && selectedLabels.length">
-            <span v-for="(label, _index) in selectedLabels"
-                  :key="_index"
-                  class="bg-gray-100 px-2 py-1 rounded-md text-sm flex items-center gap-1">
-              {{ label }}
-              <button class="hover:text-red-500" @click.stop="removeSelection(_index)">
-                ×
-              </button>
-            </span>
-          </template>
-          <template v-else>
-            {{ selectedLabels[0] || placeholder }}
-          </template>
-        </slot>
+      <div class="flex-1 flex items-center">
+        <div :class="['flex flex-wrap gap-1 w-full py-0.5',
+                    MinSize[size]
+              ]">
+          <slot name="selected">
+            <template v-if="multiple && selectedLabels.length">
+              <span v-for="(label, _index) in selectedLabels"
+                    class="bg-gray-100 px-2 rounded-md text-sm flex items-center gap-1"
+                    :key="_index"
+                    :style="{ paddingTop: PtPbSize[size], paddingBottom: PtPbSize[size] }">
+                {{ label }}
+                <button class="hover:text-red-500" @click.stop="removeSelection(_index)">
+                  ×
+                </button>
+              </span>
+            </template>
+            <template v-else>
+              <span :class="[ 'flex items-center']">
+                {{ selectedLabels[0] || placeholder }}
+              </span>
+            </template>
+          </slot>
+        </div>
       </div>
 
-      <svg :class="['w-4 h-4 transition-transform duration-200 ml-1',
-                    { 'rotate-180': isExpanded }]"
-           fill="currentColor"
-           viewBox="0 0 20 20"
-           xmlns="http://www.w3.org/2000/svg">
-        <path clip-rule="evenodd"
-              d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-              fill-rule="evenodd"/>
-      </svg>
+      <div :class="['flex items-center ml-1']">
+        <svg class="w-4 h-4 transition-transform duration-200"
+             :class="{ 'rotate-180': isExpanded }"
+             fill="currentColor"
+             viewBox="0 0 20 20"
+             xmlns="http://www.w3.org/2000/svg">
+          <path clip-rule="evenodd"
+                d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+                fill-rule="evenodd"/>
+        </svg>
+      </div>
     </div>
 
     <div v-show="isExpanded"
@@ -56,7 +119,7 @@
 <script setup lang="ts">
 import { computed, defineEmits, defineProps, nextTick, onMounted, onUnmounted, provide, ref, watch, withDefaults } from 'vue'
 import ShadcnSelectOption from './option/ShadcnSelectOption.vue'
-import { Size } from '@/ui/common/size.ts'
+import { MinSize, PtPbSize } from '@/ui/common/size.ts'
 import { HoverType } from '@/ui/common/type.ts'
 import { SelectEmits, SelectOptionProps, SelectProps } from '@/ui/select/types.ts'
 import { generateRandomId } from '@/utils/common.ts'