fix(input-dropdown): various fixes (#487)

Author: kiaking

lib/components/SDropdown.vue

@@ -22,7 +22,7 @@ defineProps<{
   border: 1px solid var(--c-divider);
   border-radius: 6px;
   min-width: 288px;
-  max-height: 384px;
+  max-height: 364px;
   overflow-y: auto;
   white-space: normal;
 

lib/components/SDropdownSectionFilter.vue

@@ -3,6 +3,7 @@ import IconCheck from '@iconify-icons/ph/check'
 import Fuse from 'fuse.js'
 import { type MaybeRef, computed, onMounted, ref, unref } from 'vue'
 import { type DropdownSectionFilterOption, type DropdownSectionFilterSelectedValue } from '../composables/Dropdown'
+import { useTrans } from '../composables/Lang'
 import { isArray } from '../support/Utils'
 import SDropdownSectionFilterItem from './SDropdownSectionFilterItem.vue'
 import SIcon from './SIcon.vue'
@@ -14,6 +15,17 @@ const props = defineProps<{
   onClick?(value: any): void
 }>()
 
+const { t } = useTrans({
+  en: {
+    i_ph: 'Filter options',
+    not_found: 'No options found.'
+  },
+  ja: {
+    i_ph: 'オプションを検索',
+    not_found: 'オプションが見つかりません。'
+  }
+})
+
 const input = ref<HTMLElement | null>(null)
 const query = ref('')
 
@@ -60,7 +72,7 @@ function handleClick(option: DropdownSectionFilterOption, value: any) {
 <template>
   <div class="SDropdownSectionFilter">
     <div v-if="search" class="search">
-      <input class="input" placeholder="Filter options" ref="input" v-model="query">
+      <input class="input" :placeholder="t.i_ph" ref="input" v-model="query">
     </div>
 
     <ul v-if="filteredOptions.length" class="list">
@@ -89,7 +101,7 @@ function handleClick(option: DropdownSectionFilterOption, value: any) {
     </ul>
 
     <p v-else class="empty">
-      No options found.
+      {{ t.not_found }}
     </p>
   </div>
 </template>
@@ -105,6 +117,7 @@ function handleClick(option: DropdownSectionFilterOption, value: any) {
   z-index: 10;
   border-bottom: 1px solid var(--c-gutter);
   padding: 8px;
+  background-color: var(--c-bg-elv-3);
 }
 
 .input {
@@ -138,8 +151,7 @@ function handleClick(option: DropdownSectionFilterOption, value: any) {
   text-align: left;
   transition: color 0.25s, background-color 0.25s;
 
-  &:hover,
-  &:focus {
+  &:hover {
     background-color: var(--c-bg-mute-1);
   }
 }

lib/components/SDropdownSectionFilterItemAvatar.vue

@@ -31,6 +31,7 @@ defineProps<{
 .name {
   display: inline-block;
   padding-left: 8px;
+  line-height: 20px;
   font-size: 14px;
   font-weight: 400;
   white-space: nowrap;

lib/components/SInputDropdownItemText.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import IconX from '@iconify-icons/ph/x'
+import IconX from '@iconify-icons/ph/x-bold'
 import SIcon from './SIcon.vue'
 
 defineProps<{

stories/components/SInputDropdown.01_Playground.story.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import SInputDropdown from 'sefirot/components/SInputDropdown.vue'
+import SInputDropdown, { type OptionText } from 'sefirot/components/SInputDropdown.vue'
 import { ref } from 'vue'
 
 const title = 'Components / SInputDropdown / 01. Playground'
 
 const value = ref<string[]>([])
 
-const options = [
+const options: OptionText[] = [
   { label: 'Vue.js', value: 'vuejs' },
   { label: 'Vite', value: 'vite' },
   { label: 'Adonis', value: 'adonis' },
@@ -22,8 +22,7 @@ const options = [
     <Board :title="title">
       <SInputDropdown
         label="Dropdown input"
-        info="Some helpful information."
-        placeholder="Please select items"
+        placeholder="Select items"
         :options="options"
         nullable
         v-model="value"

stories/components/SInputDropdown.02_Avatar_Options.story.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import SInputDropdown, { type OptionAvatar } from 'sefirot/components/SInputDropdown.vue'
+import { ref } from 'vue'
+
+const title = 'Components / SInputDropdown / 02. Avatar Options'
+
+const value = ref<string[]>([])
+
+const options: OptionAvatar[] = [
+  { type: 'avatar', image: 'https://i.pravatar.cc/64?img=4', label: 'Kris James', value: 1 },
+  { type: 'avatar', image: 'https://i.pravatar.cc/64?img=5', label: 'Becky Lu', value: 2 },
+  { type: 'avatar', image: 'https://i.pravatar.cc/64?img=7', label: 'Thomas Wane', value: 3 },
+  { type: 'avatar', image: 'https://i.pravatar.cc/64?img=8', label: 'Linda Smith', value: 4 },
+  { type: 'avatar', image: 'https://i.pravatar.cc/64?img=9', label: 'Monica Green', value: 5 },
+  { type: 'avatar', image: 'https://i.pravatar.cc/64?img=10', label: 'Sefia Blue', value: 6 }
+]
+</script>
+
+<template>
+  <Story :title="title" source="Not available" auto-props-disabled>
+    <Board :title="title">
+      <SInputDropdown
+        label="Dropdown input"
+        placeholder="Select items"
+        :options="options"
+        nullable
+        v-model="value"
+      />
+    </Board>
+  </Story>
+</template>