Small button refactor, overflow and popout menus

2023-10-11 08:04:50 -07:00
parent c70ebb6cce
commit a708cf7f69
13 changed files with 556 additions and 58 deletions
--- a/docs/components/overflow-menu.md
+++ b/docs/components/overflow-menu.md
@@ -0,0 +1,43 @@
+<script setup>
+const options = [
+  {
+    'id': 'like',
+    'color': 'primary',
+    'action': () => {}
+  },
+  {
+    'id': 'report',
+    'action': () => {}
+  },
+  {
+    'id': 'delete',
+    'color': 'danger',
+    'action': () => {}
+  }
+]
+</script>
+
+# Popout Menu
+<DemoContainer>
+  <OverflowMenu :options="options" class="btn">
+    More options...
+    <template #like>
+      <HeartIcon /> Like
+    </template>
+    <template #report>
+      <ReportIcon /> Report
+    </template>
+    <template #delete>
+      <TrashIcon /> Delete
+    </template>
+  </OverflowMenu>
+</DemoContainer>
+
+```vue
+<PopoutMenu class="btn" position="bottom" direction="right">
+Bottom going right
+<template #menu>
+  Menu contents!
+</template>
+</PopoutMenu>
+```