feat(dropdown): add actions type (#225) (#227)

close #225

lib/components/SDropdownSection.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { DropdownSection } from '../composables/Dropdown'
+import SDropdownSectionActions from './SDropdownSectionActions.vue'
 import SDropdownSectionComponent from './SDropdownSectionComponent.vue'
 import SDropdownSectionFilter from './SDropdownSectionFilter.vue'
 import SDropdownSectionMenu from './SDropdownSectionMenu.vue'
@@ -21,6 +22,10 @@ defineProps<{
     :options="section.options"
     :on-click="section.onClick"
   />
+  <SDropdownSectionActions
+    v-if="section.type === 'actions'"
+    :options="section.options"
+  />
   <SDropdownSectionComponent
     v-else-if="section.type === 'component'"
     :comp="section.component"

lib/components/SDropdownSectionActions.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { DropdownSectionActionsOption } from '../composables/Dropdown'
+
+defineProps<{
+  options: DropdownSectionActionsOption[]
+}>()
+</script>
+
+<template>
+  <div class="SDropdownSectionActions">
+    <div v-for="option in options" :key="option.label" class="item">
+      <button class="button" :class="[option.mode ?? 'neutral']" @click="option.onClick">
+        {{ option.label }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="postcss">
+.SDropdownSectionActions {
+  display: flex;
+  justify-content: flex-end;
+  padding: 8px;
+}
+
+.button {
+  display: block;
+  border-radius: 6px;
+  padding: 0 8px;
+  width: 100%;
+  text-align: left;
+  line-height: 32px;
+  font-size: 12px;
+  font-weight: 500;
+  transition: color 0.25s, background-color 0.25s;
+
+  &.neutral        { color: var(--button-text-neutral-text-color); }
+  &.neutral:hover  { background-color: var(--button-text-neutral-hover-bg-color); }
+  &.neutral:active { background-color: var(--button-text-neutral-active-bg-color); }
+
+  &.mute        { color: var(--button-text-mute-text-color); }
+  &.mute:hover  { background-color: var(--button-text-mute-hover-bg-color); }
+  &.mute:active { background-color: var(--button-text-mute-active-bg-color); }
+
+  &.info        { color: var(--button-text-info-text-color); }
+  &.info:hover  { background-color: var(--button-text-info-hover-bg-color); }
+  &.info:active { background-color: var(--button-text-info-active-bg-color); }
+
+  &.success        { color: var(--button-text-success-text-color); }
+  &.success:hover  { background-color: var(--button-text-success-hover-bg-color); }
+  &.success:active { background-color: var(--button-text-success-active-bg-color); }
+
+  &.warning        { color: var(--button-text-warning-text-color); }
+  &.warning:hover  { background-color: var(--button-text-warning-hover-bg-color); }
+  &.warning:active { background-color: var(--button-text-warning-active-bg-color); }
+
+  &.danger        { color: var(--button-text-danger-text-color); }
+  &.danger:hover  { background-color: var(--button-text-danger-hover-bg-color); }
+  &.danger:active { background-color: var(--button-text-danger-active-bg-color); }
+}
+</style>

lib/composables/Dropdown.ts

@@ -5,8 +5,9 @@ export type DropdownSection =
   | DropdownSectionMenu
   | DropdownSectionFilter
   | DropdownSectionComponent
+  | DropdownSectionActions
 
-export type DropdownSectionType = 'menu' | 'filter' | 'component'
+export type DropdownSectionType = 'menu' | 'filter' | 'actions' | 'component'
 
 export interface DropdownSectionBase {
   type: DropdownSectionType
@@ -57,6 +58,17 @@ export interface DropdownSectionFilterOptionAvatar extends DropdownSectionFilter
   image?: string | null
 }
 
+export interface DropdownSectionActions extends DropdownSectionBase {
+  type: 'actions'
+  options: DropdownSectionActionsOption[]
+}
+
+export interface DropdownSectionActionsOption {
+  mode?: 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
+  label: string
+  onClick(): void
+}
+
 export interface DropdownSectionComponent extends DropdownSectionBase {
   type: 'component'
   component: any

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

@@ -10,8 +10,8 @@ const sections = createDropdown([
   {
     type: 'menu',
     options: [
-      { label: 'Sort ascending (A...Z)', onClick: () => {} },
-      { label: 'Sort descending (Z...A)', onClick: () => {} }
+      { label: 'Select all', onClick: selectAll },
+      { label: 'Clear all', onClick: clearAll }
     ]
   },
   {
@@ -24,26 +24,35 @@ const sections = createDropdown([
       { label: 'Archived', value: 'Archived' }
     ],
     onClick: updateFilter
+  },
+  {
+    type: 'actions',
+    options: [
+      { mode: 'mute', label: 'Cancel', onClick: () => {} },
+      { mode: 'info', label: 'Apply', onClick: () => {} }
+    ]
   }
 ])
 
 function updateFilter(value: string) {
   selected.value = xor(selected.value, [value])
 }
+
+function selectAll() {
+  selected.value = ['Draft', 'Published', 'Archived']
+}
+
+function clearAll() {
+  selected.value = []
+}
 </script>
 
 <template>
   <Board
     title="Components / SDropdown / 01. Playground"
   >
-    <div class="container">
+    <div class="max-w-256">
       <SDropdown :sections="sections" />
     </div>
   </Board>
 </template>
-
-<style scoped>
-.container {
-  max-width: 256px;
-}
-</style>