fix(input-dropdown): support mini and medium size (#490)

globalbrain · Mar 6, 2024 · cf674e7 · cf674e7
1 parent 1e7eec0
commit cf674e7
Show file tree

Hide file tree

Showing 6 changed files with 324 additions and 118 deletions.
diff --git a/lib/components/SInputDropdown.vue b/lib/components/SInputDropdown.vue
@@ -164,6 +164,7 @@ function handleArray(value: OptionValue) {
           <SInputDropdownItem
             v-if="hasSelected"
             :items="selected"
+            :size="size ?? 'small'"
             :removable="removable"
             :disabled="disabled ?? false"
             @remove="handleSelect"
@@ -187,13 +188,72 @@ function handleArray(value: OptionValue) {
 </template>
 
 <style scoped lang="postcss">
+.container {
+  position: relative;
+}
+
+.box {
+  position: relative;
+  display: flex;
+  align-items: center;
+  border: 1px solid var(--input-border-color);
+  border-radius: 6px;
+  width: 100%;
+  color: var(--input-text);
+  background-color: var(--input-bg-color);;
+  cursor: pointer;
+  transition: border-color 0.25s, background-color 0.25s;
+
+  &:hover {
+    border-color: var(--input-hover-border-color);
+  }
+}
+
+.box-content {
+  display: flex;
+  align-items: center;
+}
+
+.box-placeholder {
+  line-height: 24px;
+  color: var(--input-placeholder-color);
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.box-icon {
+  position: absolute;
+  z-index: 10;
+  cursor: pointer;
+}
+
+.box-icon-svg {
+  display: block;
+  width: 14px;
+  height: 14px;
+  color: var(--c-text-2);
+}
+
+.box-icon-svg.up {
+  margin-bottom: -4px;
+}
+
+.dropdown {
+  position: absolute;
+  left: 0;
+  z-index: var(--z-index-dropdown);
+
+  &.top    { bottom: calc(100% + 8px); }
+  &.bottom { top: calc(100% + 8px); }
+}
+
 .SInputDropdown.mini {
   .box {
     min-height: 32px;
   }
 
   .box-content {
-    padding: 3px 30px 3px 12px;
+    padding: 3px 30px 3px 8px;
     line-height: 24px;
     font-size: var(--input-font-size, var(--input-mini-font-size));
   }
@@ -210,7 +270,7 @@ function handleArray(value: OptionValue) {
   }
 
   .box-content {
-    padding: 5px 30px 5px 8px;
+    padding: 5px 30px 5px 12px;
     line-height: 24px;
     font-size: var(--input-font-size, var(--input-small-font-size));
   }
@@ -258,56 +318,4 @@ function handleArray(value: OptionValue) {
     border-color: var(--input-error-border-color);
   }
 }
-
-.container {
-  position: relative;
-}
-
-.box {
-  position: relative;
-  border: 1px solid var(--input-border-color);
-  border-radius: 6px;
-  width: 100%;
-  color: var(--input-text);
-  background-color: var(--input-bg-color);;
-  cursor: pointer;
-  transition: border-color 0.25s, background-color 0.25s;
-
-  &:hover {
-    border-color: var(--input-hover-border-color);
-  }
-}
-
-.box-placeholder {
-  padding: 2px 4px;
-  color: var(--input-placeholder-color);
-  overflow: hidden;
-  white-space: nowrap;
-}
-
-.box-icon {
-  position: absolute;
-  z-index: 10;
-  cursor: pointer;
-}
-
-.box-icon-svg {
-  display: block;
-  width: 14px;
-  height: 14px;
-  color: var(--c-text-2);
-}
-
-.box-icon-svg.up {
-  margin-bottom: -4px;
-}
-
-.dropdown {
-  position: absolute;
-  left: 0;
-  z-index: var(--z-index-dropdown);
-
-  &.top    { bottom: calc(100% + 8px); }
-  &.bottom { top: calc(100% + 8px); }
-}
 </style>
diff --git a/lib/components/SInputDropdownItem.vue b/lib/components/SInputDropdownItem.vue
@@ -20,8 +20,11 @@ export interface ItemAvatar extends ItemBase {
   image?: string | null
 }
 
+export type Size = 'mini' | 'small' | 'medium'
+
 defineProps<{
   items: Item[]
+  size: Size
   removable: boolean
   disabled: boolean
 }>()
@@ -36,6 +39,7 @@ defineEmits<{
     <div v-for="(item, index) in items" :key="index" class="item">
       <SInputDropdownItemText
         v-if="item.type === 'text' || item.type === undefined"
+        :size="size"
         :label="item.label"
         :value="item.value"
         :removable="removable"
@@ -44,6 +48,7 @@ defineEmits<{
       />
       <SInputDropdownItemAvatar
         v-if="item.type === 'avatar'"
+        :size="size"
         :label="item.label"
         :image="item.image"
         :value="item.value"

diff --git a/lib/components/SInputDropdownItemAvatar.vue b/lib/components/SInputDropdownItemAvatar.vue
@@ -1,9 +1,12 @@
 <script setup lang="ts">
-import IconX from '@iconify-icons/ph/x'
+import IconX from '@iconify-icons/ph/x-bold'
 import SAvatar from './SAvatar.vue'
 import SIcon from './SIcon.vue'
 
+export type Size = 'mini' | 'small' | 'medium'
+
 defineProps<{
+  size: Size
   label: string
   image?: string | null
   value: any
@@ -14,13 +17,19 @@ defineProps<{
 defineEmits<{
   (e: 'remove', value: any): void
 }>()
+
+const avatarSizeDict = {
+  mini: 'nano',
+  small: 'mini',
+  medium: 'mini'
+} as const
 </script>
 
 <template>
-  <div class="SInputDropdownItemAvatar" :class="{ disabled, removable }">
+  <div class="SInputDropdownItemAvatar" :class="[size, { disabled, removable }]">
     <div class="user">
       <div class="avatar">
-        <SAvatar size="nano" :avatar="image" :name="label" />
+        <SAvatar :size="avatarSizeDict[size]" :avatar="image" :name="label" />
       </div>
       <p class="name">{{ label }}</p>
     </div>
@@ -36,31 +45,22 @@ defineEmits<{
 <style lang="postcss" scoped>
 .SInputDropdownItemAvatar {
   display: flex;
+  align-items: center;
   border: 1px solid var(--c-border-mute-1);
-  border-radius: 14px;
-  padding: 0 12px 0 0;
   background-color: var(--c-bg-mute-1);
 }
 
-.SInputDropdownItemAvatar.removable {
-  padding: 0;
-}
-
-.SInputDropdownItemUserAvatar.disabled {
-  padding: 0 10px 0 0;
-}
-
 .user {
   display: flex;
+  align-items: center;
 }
 
 .avatar {
-  padding: 3px 0 0 3px;
+  display: flex;
+  align-items: center;
 }
 
 .name {
-  margin: 0 0 0 8px;
-  line-height: 26px;
   font-size: 12px;
   font-weight: 500;
   white-space: nowrap;
@@ -70,18 +70,13 @@ defineEmits<{
   display: flex;
   justify-content: center;
   align-items: center;
-  margin-left: 2px;
-  width: 26px;
-  height: 26px;
 }
 
 .remove-box {
   display: flex;
   justify-content: center;
   align-items: center;
   border-radius: 50%;
-  width: 20px;
-  height: 20px;
   color: var(--c-text-2);
   transition: color 0.25s, background-color 0.25s;
 
@@ -91,8 +86,91 @@ defineEmits<{
   }
 }
 
-.remove-icon {
-  width: 12px;
-  height: 12px;
+.SInputDropdownItemAvatar.mini {
+  gap: 2px;
+  border-radius: 12px;
+  padding: 0 8px 0 0;
+  height: 24px;
+
+  .avatar {
+    padding: 0 0 0 1px;
+  }
+
+  .name {
+    margin-left: 6px;
+  }
+
+  .remove {
+    width: 23px;
+    height: 23px;
+  }
+
+  .remove-box {
+    width: 20px;
+    height: 20px;
+  }
+
+  .remove-icon {
+    width: 12px;
+    height: 12px;
+  }
+}
+
+.SInputDropdownItemAvatar.small {
+  border-radius: 14px;
+  padding: 0 12px 0 0;
+  height: 28px;
+
+  .avatar {
+    padding: 0 0 0 1px;
+  }
+
+  .name {
+    margin-left: 6px;
+  }
+
+  .remove {
+    width: 26px;
+    height: 26px;
+  }
+
+  .remove-box {
+    width: 20px;
+    height: 20px;
+  }
+
+  .remove-icon {
+    width: 12px;
+    height: 12px;
+  }
+}
+
+.SInputDropdownItemAvatar.medium {
+  border-radius: 16px;
+  padding: 0 12px 0 0;
+  height: 32px;
+
+  .avatar {
+    padding: 0 0 0 4px;
+  }
+
+  .name {
+    margin-left: 6px;
+  }
+
+  .remove {
+    width: 26px;
+    height: 26px;
+  }
+
+  .remove-box {
+    width: 20px;
+    height: 20px;
+  }
+
+  .remove-icon {
+    width: 12px;
+    height: 12px;
+  }
 }
 </style>