feat(dropdown): show radio button when selected is not array (#280)

globalbrain · May 23, 2023 · 976081b · 976081b
1 parent 5f46653
commit 976081b
Show file tree

Hide file tree

Showing 9 changed files with 105 additions and 85 deletions.
diff --git a/lib/components/SDropdown.vue b/lib/components/SDropdown.vue
@@ -19,25 +19,20 @@ defineProps<{
 
 <style scoped lang="postcss">
 .SDropdown {
-  border: 1px solid var(--c-divider-light);
-  border-radius: 12px;
+  border: 1px solid var(--c-divider-2);
+  border-radius: 6px;
   min-width: 256px;
   max-height: 384px;
-  background-color: var(--c-bg);
   overflow-y: auto;
 
   &::-webkit-scrollbar {
     display: none;
   }
-
-  .dark & {
-    background-color: var(--c-bg-mute);
-  }
 }
 
-.section {
-  & + & {
-    border-top: 1px solid var(--c-divider-light);
-  }
+.container {
+  display: grid;
+  gap: 1px;
+  background-color: var(--c-gutter);
 }
 </style>
diff --git a/lib/components/SDropdownSection.vue b/lib/components/SDropdownSection.vue
@@ -31,28 +31,3 @@ defineProps<{
     :comp="section.component"
   />
 </template>
-
-<style scoped lang="postcss">
-.SDropdown {
-  border: 1px solid var(--c-divider-light);
-  border-radius: 12px;
-  min-width: 256px;
-  max-height: 384px;
-  background-color: var(--c-bg);
-  overflow-y: auto;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
-
-  .dark & {
-    background-color: var(--c-bg-mute);
-  }
-}
-
-.section {
-  & + & {
-    border-top: 1px solid var(--c-divider-light);
-  }
-}
-</style>
diff --git a/lib/components/SDropdownSectionActions.vue b/lib/components/SDropdownSectionActions.vue
@@ -20,7 +20,9 @@ defineProps<{
 .SDropdownSectionActions {
   display: flex;
   justify-content: flex-end;
+  gap: 4px;
   padding: 8px;
+  background-color: var(--c-bg-elv-3);
 }
 
 .button {
@@ -30,8 +32,7 @@ defineProps<{
   width: 100%;
   text-align: left;
   line-height: 32px;
-  font-size: 12px;
-  font-weight: 500;
+  font-size: 14px;
   transition: color 0.25s, background-color 0.25s;
 
   &.neutral        { color: var(--button-text-neutral-text-color); }

diff --git a/lib/components/SDropdownSectionFilter.vue b/lib/components/SDropdownSectionFilter.vue
@@ -74,11 +74,14 @@ function handleClick(option: DropdownSectionFilterOption, value: string | number
           @keyup.down.prevent="focusNext"
           @click="handleClick(option, option.value)"
         >
-          <span class="checkbox">
+          <span v-if="isArray(unref(selected))" class="checkbox">
             <span class="checkbox-box">
               <SIcon :icon="IconCheck" class="checkbox-icon" />
             </span>
           </span>
+          <span v-else class="radio">
+            <span class="radio-dot" />
+          </span>
           <span class="option-item">
             <SDropdownSectionFilterItem :option="option" />
           </span>
@@ -93,33 +96,34 @@ function handleClick(option: DropdownSectionFilterOption, value: string | number
 </template>
 
 <style scoped lang="postcss">
+.SDropdownSectionFilter {
+  background-color: var(--c-bg-elv-3);
+}
+
 .search {
   position: sticky;
   top: 0;
-  border-bottom: 1px solid var(--c-divider-light);
+  border-bottom: 1px solid var(--c-gutter);
   padding: 8px;
   background-color: var(--c-bg-elv-up);
 }
 
 .input {
-  border: 1px solid var(--c-divider);
+  border: 1px solid var(--c-divider-1);
   border-radius: 6px;
   padding: 0 8px;
   width: 100%;
   font-size: 14px;
   line-height: 32px;
-  background-color: var(--c-bg);
+  background-color: var(--input-bg-color);
   transition: border-color 0.25s;
 
   &::placeholder {
-    color: var(--c-text-3);
+    color: var(--input-placeholder-color);
   }
 
-  &:hover { border-color: var(--c-black); }
-  &:focus { border-color: var(--c-info); }
-
-  .dark &:hover { border-color: var(--c-gray); }
-  .dark &:focus { border-color: var(--c-info); }
+  &:hover { border-color: var(--input-hover-border-color); }
+  &:focus { border-color: var(--input-focus-border-color); }
 }
 
 .list {
@@ -136,33 +140,29 @@ function handleClick(option: DropdownSectionFilterOption, value: string | number
 
   &:hover,
   &:focus {
-    background-color: var(--c-bg-mute);
-  }
-
-  .dark &:hover,
-  .dark &:focus {
-    background-color: var(--c-bg);
+    background-color: var(--c-mute);
   }
 }
 
 .checkbox {
   display: block;
   padding-top: 8px;
+  padding-bottom: 8px;
 }
 
 .checkbox-box {
   display: flex;
   justify-content: center;
   align-items: center;
-  border: 1px solid var(--c-divider);
+  border: 1px solid var(--c-divider-1);
   border-radius: 4px;
   width: 16px;
   height: 16px;
-  background-color: var(--c-bg);
+  background-color: var(--input-bg-color);
   transition: border-color 0.1s, background-color 0.1s;
 
   .button.active & {
-    border-color: var(--c-info);
+    border-color: var(--c-info-text);
     background-color: var(--c-info);
   }
 }
@@ -180,19 +180,53 @@ function handleClick(option: DropdownSectionFilterOption, value: string | number
   }
 }
 
+.radio {
+  position: relative;
+  flex-shrink: 0;
+  border: 1px solid var(--c-divider-1);
+  border-radius: 50%;
+  margin-top: 8px;
+  margin-bottom: 8px;
+  width: 16px;
+  height: 16px;
+  background-color: var(--input-bg-color);
+  transition: border-color 0.25s;
+
+  .button.active & {
+    border-color: var(--c-info-light);
+  }
+}
+
+.radio-dot {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  width: 100%;
+  background-color: var(--c-info-light);
+  opacity: 0;
+  transform: scale(0);
+  transition: opacity 0.25s, transform 0.1s;
+
+  .button.active & {
+    opacity: 1;
+    transform: scale(0.6);
+  }
+}
+
 .option-item {
-  padding-left: 8px;
+  padding-left: 12px;
   width: 100%;
 }
 
 .empty {
-  padding: 16px;
+  padding: 14px 16px;
   font-size: 12px;
-  font-weight: 500;
   color: var(--c-text-2);
-
-  .search + & {
-    border-top: 1px solid var(--c-divider-light);
-  }
 }
 </style>
diff --git a/lib/components/SDropdownSectionFilterItemAvatar.vue b/lib/components/SDropdownSectionFilterItemAvatar.vue
@@ -31,7 +31,7 @@ defineProps<{
 .name {
   display: inline-block;
   padding-left: 8px;
-  font-size: 12px;
+  font-size: 14px;
   font-weight: 400;
   white-space: nowrap;
   overflow: hidden;

diff --git a/lib/components/SDropdownSectionFilterItemText.vue b/lib/components/SDropdownSectionFilterItemText.vue
@@ -15,13 +15,12 @@ defineProps<{
   display: inline-block;
   padding: 6px 0;
   line-height: 20px;
-  font-size: 12px;
 }
 
 .text {
   display: inline-block;
   line-height: 20px;
-  font-size: 12px;
+  font-size: 14px;
   font-weight: 400;
 }
 </style>
diff --git a/lib/components/SDropdownSectionMenu.vue b/lib/components/SDropdownSectionMenu.vue
@@ -19,6 +19,7 @@ defineProps<{
 <style scoped lang="postcss">
 .SDropdownSectionMenu {
   padding: 8px;
+  background-color: var(--c-bg-elv-3);
 }
 
 .button {
@@ -28,12 +29,12 @@ defineProps<{
   width: 100%;
   text-align: left;
   line-height: 32px;
-  font-size: 12px;
+  font-size: 14px;
   font-weight: 400;
   transition: color 0.25s, background-color 0.25s;
 
   &:hover {
-    background-color: var(--c-bg-elv-down);
+    background-color: var(--c-mute);
   }
 }
 </style>
diff --git a/stories/components/SDropdown.01_Playground.story.vue b/stories/components/SDropdown.01_Playground.story.vue
@@ -12,8 +12,18 @@ const sections = createDropdown([
   {
     type: 'menu',
     options: [
-      { label: 'Select all', onClick: selectAll },
-      { label: 'Clear all', onClick: clearAll }
+      {
+        label: 'Select all',
+        onClick() {
+          selected.value = ['Draft', 'Published', 'Archived']
+        }
+      },
+      {
+        label: 'Clear all',
+        onClick() {
+          selected.value = []
+        }
+      }
     ]
   },
   {
@@ -25,7 +35,9 @@ const sections = createDropdown([
       { label: 'Published', value: 'Published' },
       { label: 'Archived', value: 'Archived' }
     ],
-    onClick: updateFilter
+    onClick(value: string) {
+      selected.value = xor(selected.value, [value])
+    }
   },
   {
     type: 'actions',
@@ -35,18 +47,6 @@ const sections = createDropdown([
     ]
   }
 ])
-
-function updateFilter(value: string) {
-  selected.value = xor(selected.value, [value])
-}
-
-function selectAll() {
-  selected.value = ['Draft', 'Published', 'Archived']
-}
-
-function clearAll() {
-  selected.value = []
-}
 </script>
 
 <template>

diff --git a/tests/components/SDropdown.spec.ts b/tests/components/SDropdown.spec.ts
@@ -1,8 +1,23 @@
 import { mount } from '@vue/test-utils'
 import SDropdownSectionFilter from 'sefirot/components/SDropdownSectionFilter.vue'
 
-describe('components/SDropdown', async () => {
+describe('components/SDropdown', () => {
   describe('SDropdownSectionFilter', () => {
+    test('shows avatar type filter', async () => {
+      const wrapper = mount(SDropdownSectionFilter, {
+        props: {
+          selected: 1,
+          options: [
+            { type: 'avatar', label: 'User A', value: 1 },
+            { type: 'avatar', label: 'User B', value: 2 },
+            { type: 'avatar', label: 'User C', value: 3 }
+          ]
+        }
+      })
+
+      expect(wrapper.findAll('.SDropdownSectionFilterItemAvatar').length).toBe(3)
+    })
+
     test('hide disabled options', async () => {
       const wrapper = mount(SDropdownSectionFilter, {
         props: {