fix(input-dropdown): remove button is displayed even when item is not…

… removable (#155) (#165) fix #155 Co-authored-by: Kia Ishii <kia.king.08@gmail.com>
globalbrain · Oct 20, 2022 · 49ff573 · 49ff573
1 parent 45b3ae3
commit 49ff573
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 8 deletions.
diff --git a/lib/components/SInputDropdown.vue b/lib/components/SInputDropdown.vue
@@ -83,6 +83,14 @@ const hasSelected = computed(() => {
   return selected.value.length > 0
 })
 
+const removable = computed(() => {
+  if (isArray(props.modelValue)) {
+    return props.nullable || selected.value.length > 1
+  }
+
+  return !!props.nullable
+})
+
 async function handleOpen() {
   !props.disabled && open()
 }
@@ -137,6 +145,7 @@ function handleArray(value: OptionValue) {
           <SInputDropdownItem
             v-if="hasSelected"
             :items="selected"
+            :removable="removable"
             :disabled="disabled ?? false"
             @remove="handleSelect"
           />

diff --git a/lib/components/SInputDropdownItem.vue b/lib/components/SInputDropdownItem.vue
@@ -22,6 +22,7 @@ export interface ItemAvatar extends ItemBase {
 
 defineProps<{
   items: Item[]
+  removable: boolean
   disabled: boolean
 }>()
 
@@ -37,6 +38,7 @@ defineEmits<{
         v-if="item.type === 'text' || item.type === undefined"
         :label="item.label"
         :value="item.value"
+        :removable="removable"
         :disabled="disabled"
         @remove="(v) => $emit('remove', v)"
       />
@@ -45,6 +47,7 @@ defineEmits<{
         :label="item.label"
         :image="item.image"
         :value="item.value"
+        :removable="removable"
         :disabled="disabled"
         @remove="(v) => $emit('remove', v)"
       />

diff --git a/lib/components/SInputDropdownItemAvatar.vue b/lib/components/SInputDropdownItemAvatar.vue
@@ -7,6 +7,7 @@ defineProps<{
   label: string
   image?: string | null
   value: string | number | boolean
+  removable: boolean
   disabled: boolean
 }>()
 
@@ -16,15 +17,15 @@ defineEmits<{
 </script>
 
 <template>
-  <div class="SInputDropdownItemAvatar" :class="{ disabled }">
+  <div class="SInputDropdownItemAvatar" :class="{ disabled, removable }">
     <div class="user">
       <div class="avatar">
         <SAvatar size="nano" :avatar="image" :name="label" />
       </div>
       <p class="name">{{ label }}</p>
     </div>
 
-    <div v-if="!disabled" class="remove" role="button" @click="$emit('remove', value)">
+    <div v-if="!disabled && removable" class="remove" role="button" @click="$emit('remove', value)">
       <div class="remove-box">
         <SIcon :icon="IconX" class="remove-icon" />
       </div>
@@ -37,10 +38,14 @@ defineEmits<{
   display: flex;
   border: 1px solid var(--c-divider-light);
   border-radius: 14px;
-  padding: 0;
+  padding: 0 12px 0 0;
   background-color: var(--c-bg-mute);
 }
 
+.SInputDropdownItemAvatar.removable {
+  padding: 0;
+}
+
 .SInputDropdownItemUserAvatar.disabled {
   padding: 0 10px 0 0;
   background-color: var(--c-gray-light-4);

diff --git a/lib/components/SInputDropdownItemText.vue b/lib/components/SInputDropdownItemText.vue
@@ -5,6 +5,7 @@ import SIcon from './SIcon.vue'
 defineProps<{
   label: string
   value: string | number | boolean
+  removable: boolean
   disabled: boolean
 }>()
 
@@ -14,10 +15,10 @@ defineEmits<{
 </script>
 
 <template>
-  <div class="SInputDropdownItemText" :class="{ disabled }">
+  <div class="SInputDropdownItemText" :class="{ disabled, removable }">
     <p class="text">{{ label }}</p>
 
-    <div v-if="!disabled" class="remove" role="button" @click.stop="$emit('remove', value)">
+    <div v-if="!disabled && removable" class="remove" role="button" @click.stop="$emit('remove', value)">
       <div class="remove-box">
         <SIcon :icon="IconX" class="remove-icon" />
       </div>
@@ -30,12 +31,16 @@ defineEmits<{
   display: flex;
   border: 1px solid var(--c-divider-light);
   border-radius: 14px;
-  padding: 0 0 0 12px;
+  padding: 0 12px;
   background-color: var(--c-bg-mute);
 }
 
+.SInputDropdownItemText.removable {
+  padding: 0 0 0 12px;
+}
+
 .SInputDropdownItemText.disabled {
-  padding: 0 10px 0;
+  padding: 0 10px;
   background-color: var(--c-gray-light-4);
 
   .text {

diff --git a/stories/components/SInputDropdown.story.vue b/stories/components/SInputDropdown.story.vue
@@ -21,7 +21,7 @@ const options = [
       label="Dropdown input"
       placeholder="Please select items"
       :options="options"
-      :nullable="true"
+      nullable
       v-model="value"
     />
   </Story>