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] 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 f37551c94..000000000
--- 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 dac7cb436..000000000
--- 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 e87201015..754d171b4 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'