support header actions

globalbrain · Sep 18, 2023 · 3ac7f45 · 3ac7f45
1 parent 3044818
commit 3ac7f45
Show file tree

Hide file tree

Showing 5 changed files with 111 additions and 57 deletions.
diff --git a/lib/components/STable.vue b/lib/components/STable.vue
@@ -305,6 +305,7 @@ function updateSelected(selected: unknown[]) {
         :total="unref(options.total)"
         :reset="unref(options.reset)"
         :menu="unref(options.menu)"
+        :actions="unref(options.actions)"
         :borderless="unref(options.borderless)"
         :on-reset="options.onReset"
         :selected="selected"

diff --git a/lib/components/STableHeader.vue b/lib/components/STableHeader.vue
@@ -1,14 +1,16 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { type TableMenu } from '../composables/Table'
+import { type TableAction, type TableMenu } from '../composables/Table'
 import { format } from '../support/Num'
 import { isNullish } from '../support/Utils'
+import STableHeaderActions from './STableHeaderActions.vue'
 import STableHeaderMenu from './STableHeaderMenu.vue'
 
 const props = defineProps<{
   total?: number | null
   reset?: boolean
   menu?: TableMenu[] | TableMenu[][]
+  actions?: TableAction[]
   borderless?: boolean
   onReset?(): void
   selected?: unknown[]
@@ -24,21 +26,20 @@ const stats = computed(() => {
   }
   return text
 })
+
+const actionsWithStatsAndReset = computed(() => {
+  return [
+    ...(stats.value ? [{ label: stats.value }] : []),
+    ...(props.reset ? [{ label: 'Reset filters', onClick: props.onReset, type: 'info' as const }] : []),
+    ...(props.actions || [])
+  ]
+})
 </script>
 
 <template>
   <div class="STableHeader" :class="{ borderless }">
     <div class="container">
-      <div class="stats">
-        <p v-if="stats" class="total">
-          {{ stats }}
-        </p>
-        <div v-if="reset" class="reset">
-          <button class="button" @click="onReset">
-            Reset filters
-          </button>
-        </div>
-      </div>
+      <STableHeaderActions :actions="actionsWithStatsAndReset" />
       <div v-if="menu && menu.length" class="menu">
         <STableHeaderMenu :menu="menu" />
       </div>
@@ -62,52 +63,6 @@ const stats = computed(() => {
   min-height: 48px;
 }
 
-.stats {
-  display: flex;
-  flex-grow: 1;
-  padding: 0 16px;
-}
-
-.total {
-  margin: 0;
-  padding: 12px 0;
-  line-height: 24px;
-  font-size: 12px;
-  font-weight: 500;
-  color: var(--c-text-2);
-}
-
-.reset {
-  position: relative;
-
-  .total + & {
-    margin-left: 16px;
-  }
-
-  .total + &::before {
-    display: inline-block;
-    margin-right: 16px;
-    width: 1px;
-    height: 16px;
-    background-color: var(--c-divider-2);
-    content: "";
-    transform: translateY(4px);
-  }
-}
-
-.button {
-  padding: 12px 0;
-  line-height: 24px;
-  font-size: 12px;
-  font-weight: 500;
-  color: var(--c-info-text);
-  transition: color 0.25s;
-
-  &:hover {
-    color: var(--c-info-text-dark);
-  }
-}
-
 .menu {
   flex-shrink: 0;
   padding-right: 8px;

diff --git a/lib/components/STableHeaderActionItem.vue b/lib/components/STableHeaderActionItem.vue
@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { type TableAction } from '../composables/Table'
+
+withDefaults(defineProps<TableAction>(), { show: true })
+</script>
+
+<template>
+  <template v-if="show">
+    <button
+      v-if="onClick"
+      class="STableHeaderActionItem button"
+      :class="type"
+      @click="onClick"
+    >
+      {{ label }}
+    </button>
+    <p class="STableHeaderActionItem" v-else>{{ label }}</p>
+  </template>
+</template>
+
+<style scoped lang="postcss">
+.STableHeaderActionItem {
+  padding: 12px 0;
+  line-height: 24px;
+  font-size: 12px;
+  font-weight: 500;
+  transition: color 0.25s;
+  color: var(--c-text-2);
+
+  &.neutral {
+    color: var(--c-neutral-text);
+    &.button:hover { color: var(--c-neutral-text-dark); }
+  }
+
+  &.mute {
+    color: var(--c-mute-text);
+    &.button:hover { color: var(--c-mute-text-dark); }
+  }
+
+  &.info {
+    color: var(--c-info-text);
+    &.button:hover { color: var(--c-info-text-dark); }
+  }
+
+  &.success {
+    color: var(--c-success-text);
+    &.button:hover { color: var(--c-success-text-dark); }
+  }
+
+  &.warning {
+    color: var(--c-warning-text);
+    &.button:hover { color: var(--c-warning-text-dark); }
+  }
+
+  &.danger {
+    color: var(--c-danger-text);
+    &.button:hover { color: var(--c-danger-text-dark); }
+  }
+}
+</style>
diff --git a/lib/components/STableHeaderActions.vue b/lib/components/STableHeaderActions.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { type TableAction } from '../composables/Table'
+import STableHeaderActionItem from './STableHeaderActionItem.vue'
+
+defineProps<{ actions: TableAction[] }>()
+</script>
+
+<template>
+  <div class="STableHeaderActions">
+    <STableHeaderActionItem v-for="action in actions" :key="action.label" v-bind="action" />
+  </div>
+</template>
+
+<style scoped lang="postcss">
+.STableHeaderActions {
+  display: flex;
+  flex-grow: 1;
+  padding: 0 16px;
+  gap: 32px;
+
+  > :deep(*):not(:first-child)::before {
+    content: '';
+    display: inline-block;
+    width: 1px;
+    height: 16px;
+    background-color: var(--c-divider-2);
+    transform: translate(-16px, 4px);
+  }
+}
+</style>
diff --git a/lib/composables/Table.ts b/lib/composables/Table.ts
@@ -11,6 +11,7 @@ export interface Table<
   orders: MaybeRef<O[]>
   columns: MaybeRef<TableColumns<O, R, SR>>
   menu?: MaybeRef<TableMenu[] | TableMenu[][]>
+  actions?: MaybeRef<TableAction[]>
   records?: MaybeRef<R[] | null | undefined>
   header?: MaybeRef<boolean | undefined>
   footer?: MaybeRef<boolean | undefined>
@@ -184,6 +185,13 @@ export interface TableMenu {
   dropdown: DropdownSection[]
 }
 
+export interface TableAction {
+  label: string
+  onClick?(): void
+  show?: boolean
+  type?: 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
+}
+
 export function useTable<
   O extends string,
   R extends Record<string, any>,