From e555c4d08329a8649e1bd60bd33025206b3353c5 Mon Sep 17 00:00:00 2001
From: Prospector <prospectordev@gmail.com>
Date: Sat, 14 Oct 2023 14:44:27 -0700
Subject: [PATCH 1/3] Joined buttons

---
 docs/components/button.md          | 50 ++++++++++++++++++++++++++++++
 lib/assets/icons/import.svg        |  1 +
 lib/assets/styles/classes.scss     | 33 ++++++++++++++++++++
 lib/components/base/PopoutMenu.vue |  7 ++++-
 lib/components/index.js            |  1 +
 5 files changed, 91 insertions(+), 1 deletion(-)
 create mode 100644 lib/assets/icons/import.svg

diff --git a/docs/components/button.md b/docs/components/button.md
index 3ceb5fee..6b93f550 100644
--- a/docs/components/button.md
+++ b/docs/components/button.md
@@ -107,3 +107,53 @@
 <Button icon-only transparent><SunIcon /></Button>
 <Button icon-only transparent><DropdownIcon /></Button>
 ```
+
+## Joined buttons
+
+<DemoContainer>
+<div class="joined-buttons">
+  <Button color="primary"><UploadIcon /> Upload</Button>
+  <OverflowMenu :options="[
+  {
+    'id': 'import',
+    'action': () => {},
+  },
+  {
+    'id': 'edit',
+    'action': () => {}
+  }
+]" class="btn btn-primary btn-dropdown-animation icon-only">
+    <DropdownIcon />
+    <template #import>
+      <ImportIcon /> Import
+    </template>
+    <template #edit>
+      <EditIcon /> Edit
+    </template>
+  </OverflowMenu>
+</div>
+</DemoContainer>
+
+```vue
+<div class="joined-buttons">
+  <Button color="primary"><UploadIcon /> Upload</Button>
+  <OverflowMenu :options="[
+  {
+    'id': 'import',
+    'action': () => {},
+  },
+  {
+    'id': 'edit',
+    'action': () => {}
+  }
+]" class="btn btn-primary btn-dropdown-animation icon-only">
+    <DropdownIcon />
+    <template #import>
+      <ImportIcon /> Import
+    </template>
+    <template #edit>
+      <EditIcon /> Edit
+    </template>
+  </OverflowMenu>
+</div>
+```
diff --git a/lib/assets/icons/import.svg b/lib/assets/icons/import.svg
new file mode 100644
index 00000000..b00c67b8
--- /dev/null
+++ b/lib/assets/icons/import.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-import"><path d="M12 3v12"/><path d="m8 11 4 4 4-4"/><path d="M8 5H4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-4"/></svg>
\ No newline at end of file
diff --git a/lib/assets/styles/classes.scss b/lib/assets/styles/classes.scss
index 3eaa4089..13ca3701 100644
--- a/lib/assets/styles/classes.scss
+++ b/lib/assets/styles/classes.scss
@@ -486,6 +486,18 @@ a,
     background: none;
     box-shadow: none;
   }
+
+  &.btn-dropdown-animation {
+    svg {
+      transition: transform 0.125s ease-in-out;
+    }
+
+    &.popout-open {
+      svg {
+        transform: rotate(180deg);
+      }
+    }
+  }
 }
 
 .btn-group {
@@ -494,6 +506,27 @@ a,
   flex-wrap: wrap;
 }
 
+.joined-buttons {
+  display: flex;
+  gap: 1px;
+
+  > :not(:first-child) {
+    &.btn,
+    > .btn {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+  }
+
+  > :not(:last-child) {
+    &.btn,
+    > .btn {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+  }
+}
+
 // PROJECT CARDS
 
 .project-list {
diff --git a/lib/components/base/PopoutMenu.vue b/lib/components/base/PopoutMenu.vue
index 54cf0b2c..76c1b249 100644
--- a/lib/components/base/PopoutMenu.vue
+++ b/lib/components/base/PopoutMenu.vue
@@ -1,6 +1,11 @@
 <template>
   <div ref="dropdown" class="popup-container" tabindex="0" :aria-expanded="dropdownVisible">
-    <button v-bind="$attrs" ref="dropdownButton" @click="toggleDropdown">
+    <button
+      v-bind="$attrs"
+      ref="dropdownButton"
+      :class="{ 'popout-open': dropdownVisible }"
+      @click="toggleDropdown"
+    >
       <slot></slot>
     </button>
     <div
diff --git a/lib/components/index.js b/lib/components/index.js
index 44969fe9..e8720101 100644
--- a/lib/components/index.js
+++ b/lib/components/index.js
@@ -88,6 +88,7 @@ export { default as HeartHandshakeIcon } from '@/assets/icons/heart-handshake.sv
 export { default as HistoryIcon } from '@/assets/icons/history.svg'
 export { default as HomeIcon } from '@/assets/icons/home.svg'
 export { default as ImageIcon } from '@/assets/icons/image.svg'
+export { default as ImportIcon } from '@/assets/icons/import.svg'
 export { default as InfoIcon } from '@/assets/icons/info.svg'
 export { default as IssuesIcon } from '@/assets/icons/issues.svg'
 export { default as LeftArrowIcon } from '@/assets/icons/left-arrow.svg'

From 2c850a612d3aa7367b8b218d8f2fc98e91141d98 Mon Sep 17 00:00:00 2001
From: Prospector <prospectordev@gmail.com>
Date: Sat, 14 Oct 2023 14:45:12 -0700
Subject: [PATCH 2/3] Version bump

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 49c1a471..f7db4214 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "omorphia",
   "type": "module",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "files": [
     "dist",
     "lib"

From 6fb04e23ad364ddce1da22434a8c0d46f671252c Mon Sep 17 00:00:00 2001
From: Prospector <prospectordev@gmail.com>
Date: Mon, 16 Oct 2023 07:44:11 -0700
Subject: [PATCH 3/3] Remove dropdown button

---
 docs/components/dropdown-button.md     | 118 ---------
 lib/components/base/DropdownButton.vue | 331 -------------------------
 lib/components/index.js                |   1 -
 3 files changed, 450 deletions(-)
 delete mode 100644 docs/components/dropdown-button.md
 delete mode 100644 lib/components/base/DropdownButton.vue

diff --git a/docs/components/dropdown-button.md b/docs/components/dropdown-button.md
deleted file mode 100644
index f37551c9..00000000
--- a/docs/components/dropdown-button.md
+++ /dev/null
@@ -1,118 +0,0 @@
-# Dropdown
-<DemoContainer>
-  <DropdownButton
-    :options="['delete', 'save', 'recycle', 'reduce', 'reuse']"
-    default-value="delete"
-    name="dropdown-one"
-    color="primary"
-  >
-    <template #delete>
-      <TrashIcon /> Delete
-    </template>
-    <template #save>
-      <CheckIcon /> Save
-    </template>
-    <template #recycle>
-      <UpdatedIcon /> Recycle
-    </template>
-    <template #reduce>
-      <ChevronDownIcon /> Reduce
-    </template>
-    <template #reuse>
-      <TransferIcon /> Reuse
-    </template>
-  </DropdownButton>
-  <DropdownButton
-    :options="['delete', 'save', 'recycle', 'reduce', 'reuse']"
-    default-value="delete"
-    name="dropdown-two"
-    render-up
-  >
-    <template #delete>
-      <TrashIcon /> Delete
-    </template>
-    <template #save>
-      <CheckIcon /> Save
-    </template>
-    <template #recycle>
-      <UpdatedIcon /> Recycle
-    </template>
-    <template #reduce>
-      <ChevronDownIcon /> Reduce
-    </template>
-    <template #reuse>
-      <CalendarIcon /> Reuse
-    </template>
-  </DropdownButton>
-  <DropdownButton
-    :options="['delete', 'save', 'recycle', 'reduce', 'reuse']"
-    default-value="delete"
-    name="dropdown-three"
-    disabled
-  >
-    <template #delete>
-      <TrashIcon /> Delete
-    </template>
-    <template #save>
-      <CheckIcon /> Save
-    </template>
-    <template #recycle>
-      <UpdatedIcon /> Recycle
-    </template>
-    <template #reduce>
-      <ChevronDownIcon /> Reduce
-    </template>
-    <template #reuse>
-      <CalendarIcon /> Reuse
-    </template>
-  </DropdownButton>
-  <DropdownButton
-    :options="['delete', 'save', 'recycle', 'reduce', 'reuse']"
-    default-value="delete"
-    name="dropdown-four"
-    render-up
-    disabled
-  >
-    <template #delete>
-      <TrashIcon /> Delete
-    </template>
-    <template #save>
-      <CheckIcon /> Save
-    </template>
-    <template #recycle>
-      <UpdatedIcon /> Recycle
-    </template>
-    <template #reduce>
-      <ChevronDownIcon /> Reduce
-    </template>
-    <template #reuse>
-      <CalendarIcon /> Reuse
-    </template>
-  </DropdownButton>
-</DemoContainer>
-
-```vue
-<DropdownButton
-  :options="['delete', 'save', 'recycle', 'reduce', 'reuse']"
-  default-value="delete"
-  @option-click="handleOptionClick"
-  color="primary"
-  render-up
->
-  <template #delete>
-    <TrashIcon /> Delete
-  </template>
-  <template #save>
-    <CheckIcon /> Save
-  </template>
-  <template #recycle>
-    <UpdatedIcon /> Recycle
-  </template>
-  <template #reduce>
-    <ChevronDownIcon /> Reduce
-  </template>
-  <template #reuse>
-    <CalendarIcon /> Reuse
-  </template>
-</DropdownButton>
-```
diff --git a/lib/components/base/DropdownButton.vue b/lib/components/base/DropdownButton.vue
deleted file mode 100644
index dac7cb43..00000000
--- a/lib/components/base/DropdownButton.vue
+++ /dev/null
@@ -1,331 +0,0 @@
-<template>
-  <div
-    ref="dropdown"
-    tabindex="0"
-    role="combobox"
-    :aria-expanded="dropdownVisible"
-    class="animated-dropdown"
-  >
-    <div class="dropdown-row">
-      <Button
-        class="dropdown-button"
-        :class="{
-          'render-down': dropdownVisible && !renderUp && !disabled,
-          'render-up': dropdownVisible && renderUp && !disabled,
-        }"
-        :disabled="disabled"
-        :color="color"
-        @click="clickOption"
-      >
-        <slot :name="selectedOption" />
-      </Button>
-      <Button
-        class="selected"
-        :class="{
-          'render-down': dropdownVisible && !renderUp && !disabled,
-          'render-up': dropdownVisible && renderUp && !disabled,
-        }"
-        icon-only
-        :color="color"
-        :disabled="disabled"
-        @click="toggleDropdown"
-      >
-        <DropdownIcon class="arrow" :class="{ rotate: dropdownVisible }" />
-      </Button>
-    </div>
-    <div class="options-wrapper" :class="{ down: !renderUp, up: renderUp }">
-      <transition name="options">
-        <div
-          v-show="dropdownVisible"
-          class="options"
-          role="listbox"
-          :class="{ down: !renderUp, up: renderUp }"
-        >
-          <div
-            v-for="(option, index) in options"
-            :key="index"
-            ref="optionElements"
-            tabindex="-1"
-            role="option"
-            :class="{ 'selected-option': selectedValue === option }"
-            :aria-selected="selectedValue === option"
-            class="option"
-            @click="selectOption(option, index)"
-            @keydown.space.prevent="selectOption(option, index)"
-          >
-            <input
-              :id="`${name}-${index}`"
-              v-model="radioValue"
-              type="radio"
-              :value="option"
-              :name="name"
-            />
-            <label :for="`${name}-${index}`" class="slot">
-              <slot :name="option" />
-            </label>
-          </div>
-        </div>
-      </transition>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
-import { Button, DropdownIcon } from '@/components'
-
-const props = defineProps({
-  options: {
-    type: Array,
-    required: true,
-  },
-  name: {
-    type: String,
-    required: true,
-  },
-  defaultValue: {
-    type: String,
-    default: null,
-  },
-  modelValue: {
-    type: String,
-    default: null,
-  },
-  renderUp: {
-    type: Boolean,
-    default: false,
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-  color: {
-    type: String,
-    default: '',
-  },
-})
-
-const emit = defineEmits(['input', 'change', 'update:modelValue', 'option-click'])
-
-const dropdownVisible = ref(false)
-const selectedValue = ref(props.modelValue || props.defaultValue)
-const dropdown = ref(null)
-const optionElements = ref(null)
-
-const selectedOption = computed(() => {
-  return selectedValue.value
-})
-
-const radioValue = computed({
-  get() {
-    return props.modelValue || selectedValue.value
-  },
-  set(newValue) {
-    emit('update:modelValue', newValue)
-    selectedValue.value = newValue
-  },
-})
-
-watch(
-  () => props.modelValue,
-  (newValue) => {
-    selectedValue.value = newValue
-  }
-)
-
-const toggleDropdown = () => {
-  if (!props.disabled) {
-    dropdownVisible.value = !dropdownVisible.value
-    dropdown.value.focus()
-  }
-}
-
-const selectOption = (option, index) => {
-  radioValue.value = option
-  emit('change', { option, index })
-  emit('option-click', { option: selectedOption.value })
-  dropdownVisible.value = false
-}
-
-const clickOption = () => {
-  emit('option-click', { option: selectedOption.value })
-  dropdownVisible.value = false
-}
-
-const handleClickOutside = (event) => {
-  const elements = document.elementsFromPoint(event.clientX, event.clientY)
-  if (
-    dropdown.value.$el !== event.target &&
-    !elements.includes(dropdown.value.$el) &&
-    !dropdown.value.contains(event.target)
-  ) {
-    dropdownVisible.value = false
-  }
-}
-
-onMounted(() => {
-  window.addEventListener('click', handleClickOutside)
-})
-
-onBeforeUnmount(() => {
-  window.removeEventListener('click', handleClickOutside)
-})
-</script>
-
-<style lang="scss" scoped>
-.animated-dropdown {
-  position: relative;
-  display: inline-block;
-
-  &:focus {
-    outline: 0;
-  }
-
-  .dropdown-row {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-
-    .dropdown-button {
-      width: 100%;
-      border-radius: var(--radius-md) 0 0 var(--radius-md);
-
-      &.render-up {
-        border-radius: 0 0 0 var(--radius-md);
-      }
-
-      &.render-down {
-        border-radius: var(--radius-md) 0 0 0;
-      }
-    }
-
-    .btn {
-      height: 2.25rem;
-
-      transition: 0.05s;
-
-      &:not(.render-down):not(.render-up) {
-        transition-delay: 0.2s;
-      }
-    }
-  }
-
-  .selected {
-    height: auto;
-    width: auto;
-    margin-left: 1px;
-    padding: var(--gap-sm);
-    border-radius: 0 var(--radius-md) var(--radius-md) 0;
-
-    &.render-up {
-      border-radius: 0 0 var(--radius-md) 0;
-    }
-
-    &.render-down {
-      border-radius: 0 var(--radius-md) 0 0;
-    }
-
-    &:focus {
-      outline: 0;
-      filter: brightness(1.25);
-      transition: filter 0.1s ease-in-out;
-    }
-
-    .arrow {
-      min-width: 1.125rem;
-      min-height: 1.125rem;
-      display: inline-block;
-      transition: transform 0.2s ease;
-
-      &.rotate {
-        transform: rotate(180deg);
-      }
-    }
-  }
-
-  .options {
-    z-index: 10;
-    max-height: 18.75rem;
-    overflow-y: auto;
-    box-shadow: var(--shadow-inset-sm), 0 0 0 0 transparent;
-
-    .option {
-      background-color: var(--color-button-bg);
-      display: flex;
-      align-items: center;
-      padding: var(--gap-md);
-      cursor: pointer;
-      user-select: none;
-
-      .slot {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        gap: var(--gap-sm);
-      }
-
-      &:hover {
-        filter: brightness(0.85);
-        transition: filter 0.2s ease-in-out;
-      }
-
-      &:focus {
-        outline: 0;
-        filter: brightness(0.85);
-        transition: filter 0.2s ease-in-out;
-      }
-
-      &.selected-option {
-        background-color: var(--color-brand);
-        color: var(--color-accent-contrast);
-        font-weight: bolder;
-      }
-
-      input {
-        display: none;
-      }
-    }
-  }
-}
-
-.options-enter-active,
-.options-leave-active {
-  transition: transform 0.2s ease;
-}
-
-.options-enter-from,
-.options-leave-to {
-  // this is not 100% due to a safari bug
-  &.up {
-    transform: translateY(99.999%);
-  }
-
-  &.down {
-    transform: translateY(-99.999%);
-  }
-}
-
-.options-enter-to,
-.options-leave-from {
-  &.up {
-    transform: translateY(0%);
-  }
-}
-
-.options-wrapper {
-  position: absolute;
-  width: 100%;
-  overflow: auto;
-  z-index: 9;
-
-  &.up {
-    top: 0;
-    transform: translateY(-99.999%);
-    border-radius: var(--radius-md) var(--radius-md) 0 0;
-  }
-
-  &.down {
-    border-radius: 0 0 var(--radius-md) var(--radius-md);
-  }
-}
-</style>
diff --git a/lib/components/index.js b/lib/components/index.js
index e8720101..754d171b 100644
--- a/lib/components/index.js
+++ b/lib/components/index.js
@@ -22,7 +22,6 @@ export { default as CopyCode } from './base/CopyCode.vue'
 export { default as Notifications } from './base/Notifications.vue'
 export { default as ModalConfirm } from './base/ModalConfirm.vue'
 export { default as Breadcrumbs } from './base/Breadcrumbs.vue'
-export { default as DropdownButton } from './base/DropdownButton.vue'
 export { default as ShareModal } from './base/ShareModal.vue'
 export { default as LineChart } from './base/LineChart.vue'
 export { default as PieChart } from './base/PieChart.vue'