From d98a6adfb3f093069a356a92262463da19cb5bd7 Mon Sep 17 00:00:00 2001
From: "Adrian O.V" <83074853+CodexAdrian@users.noreply.github.com>
Date: Mon, 5 Jun 2023 23:34:52 -0400
Subject: [PATCH] Create button (#62)

---
 docs/.vitepress/config.js              |   1 +
 docs/components/dropdown-button.md     | 116 +++++++++
 lib/components/base/DropdownButton.vue | 323 +++++++++++++++++++++++++
 lib/components/base/DropdownSelect.vue |   3 +-
 lib/components/index.js                |   1 +
 package.json                           |   2 +-
 6 files changed, 444 insertions(+), 2 deletions(-)
 create mode 100644 docs/components/dropdown-button.md
 create mode 100644 lib/components/base/DropdownButton.vue

diff --git a/docs/.vitepress/config.js b/docs/.vitepress/config.js
index ada3501a0..e3f6014b8 100644
--- a/docs/.vitepress/config.js
+++ b/docs/.vitepress/config.js
@@ -29,6 +29,7 @@ export default {
           { text: 'Pagination', link: '/components/pagination' },
           { text: 'Modal', link: '/components/modal' },
           { text: 'Dropdown Select', link: '/components/dropdown-select' },
+          { text: 'Dropdown Button', link: '/components/dropdown-button' },
           { text: 'Project Card', link: '/components/project-card' },
           { text: 'Environment Indicator', link: '/components/environment-indicator' },
           { text: 'Categories', link: '/components/categories' },
diff --git a/docs/components/dropdown-button.md b/docs/components/dropdown-button.md
new file mode 100644
index 000000000..9837d5c4c
--- /dev/null
+++ b/docs/components/dropdown-button.md
@@ -0,0 +1,116 @@
+# Dropdown
+<DemoContainer>
+  <DropdownButton
+    :options="['delete', 'save', 'recycle', 'reduce', 'reuse']"
+    default-value="delete"
+    name="dropdown-one"
+  >
+    <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"
+  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
new file mode 100644
index 000000000..04e78fde4
--- /dev/null
+++ b/lib/components/base/DropdownButton.vue
@@ -0,0 +1,323 @@
+<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"
+        @click="clickOption"
+      >
+        <slot :name="selectedOption" />
+      </Button>
+      <div
+        class="selected"
+        :class="{
+          disabled: disabled,
+          'button-base': !disabled,
+          'render-down': dropdownVisible && !renderUp && !disabled,
+          'render-up': dropdownVisible && renderUp && !disabled,
+        }"
+        @click="toggleDropdown"
+      >
+        <div class="arrow" :class="{ rotate: dropdownVisible }">
+          <DropdownIcon />
+        </div>
+      </div>
+    </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,
+  },
+})
+
+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 })
+  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;
+      }
+    }
+  }
+
+  .selected {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--gap-sm) var(--gap-lg);
+    background-color: var(--color-button-bg);
+    cursor: pointer;
+    user-select: none;
+    border-radius: 0 var(--radius-md) var(--radius-md) 0;
+    box-shadow: var(--shadow-inset-sm), 0 0 0 0 transparent;
+
+    &.disabled {
+      cursor: not-allowed;
+      filter: grayscale(50%);
+      opacity: 0.5;
+    }
+
+    &.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 {
+      display: inline-block;
+      transition: transform 0.2s ease;
+      padding: 1px;
+      &.rotate {
+        transform: rotate(180deg);
+      }
+    }
+  }
+
+  .options {
+    z-index: 10;
+    max-height: min(12rem);
+    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 {
+  &.up {
+    transform: translateY(100%);
+  }
+
+  &.down {
+    transform: translateY(-100%);
+  }
+}
+
+.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(-100%);
+    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/base/DropdownSelect.vue b/lib/components/base/DropdownSelect.vue
index e1e716f8e..01bad8458 100644
--- a/lib/components/base/DropdownSelect.vue
+++ b/lib/components/base/DropdownSelect.vue
@@ -208,7 +208,8 @@ const isChildOfDropdown = (element) => {
 
     &.disabled {
       cursor: not-allowed;
-      filter: brightness(0.75);
+      filter: grayscale(50%);
+      opacity: 0.5;
     }
 
     &.render-up {
diff --git a/lib/components/index.js b/lib/components/index.js
index 604895315..2bbf7c763 100644
--- a/lib/components/index.js
+++ b/lib/components/index.js
@@ -22,6 +22,7 @@ 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 Categories } from './search/Categories.vue'
 export { default as SearchFilter } from './search/SearchFilter.vue'
diff --git a/package.json b/package.json
index 6113b8cd4..895df89b4 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "omorphia",
   "type": "module",
-  "version": "0.4.22",
+  "version": "0.4.23",
   "files": [
     "dist",
     "lib"