From 84dffe43a6c97f0d110bc199d26791b795590bd0 Mon Sep 17 00:00:00 2001
From: CodexAdrian <83074853+CodexAdrian@users.noreply.github.com>
Date: Mon, 21 Aug 2023 15:53:48 -0400
Subject: [PATCH 1/4] Bar charts

---
 docs/components/analytics.md      |  27 +++++++
 lib/components/base/BarChart.vue  | 115 ++++++++++++++++++++++++++++++
 lib/components/base/LineChart.vue |   6 +-
 lib/components/base/PieChart.vue  |   6 +-
 lib/components/index.js           |   1 +
 5 files changed, 150 insertions(+), 5 deletions(-)
 create mode 100644 lib/components/base/BarChart.vue

diff --git a/docs/components/analytics.md b/docs/components/analytics.md
index a8ac71a24..0ba7cfcd9 100644
--- a/docs/components/analytics.md
+++ b/docs/components/analytics.md
@@ -28,6 +28,33 @@
           ]
         }"
     />
+    <BarChart 
+        :data="{
+          labels: [
+            '2021-01-01', '2021-01-02', '2021-01-03', '2021-01-04', '2021-01-05',
+            '2021-01-06', '2021-01-07', '2021-01-08', '2021-01-09', '2021-01-10',
+            '2021-01-11', '2021-01-12', '2021-01-13', '2021-01-14', '2021-01-15',
+            '2021-01-16', '2021-01-17'
+          ],
+          data: [
+            {
+              title: 'Spirit',
+              color: 16711680,
+              data: [120, 130, 140, 150, 160, 170, 180, 190, 200, 210, 220, 230, 240, 250, 260, 270, 280],
+            },
+            {
+              title: 'Ad Astra',
+              color: 65280,
+              data: [150, 155, 160, 165, 170, 175, 180, 185, 190, 195, 200, 205, 210, 215, 220, 225, 230],
+            },
+            {
+              title: 'Tempad',
+              color: 255,
+              data: [180, 182, 184, 186, 188, 190, 192, 194, 196, 198, 200, 202, 204, 206, 208, 210, 212],
+            },
+          ]
+        }"
+    />
     <PieChart
         :data="{
             title: 'Downloads',
diff --git a/lib/components/base/BarChart.vue b/lib/components/base/BarChart.vue
new file mode 100644
index 000000000..7488db12c
--- /dev/null
+++ b/lib/components/base/BarChart.vue
@@ -0,0 +1,115 @@
+<script setup>
+import { defineProps, ref } from 'vue'
+import { Bar } from 'vue-chartjs'
+import {
+  Chart as ChartJS,
+  Title,
+  Tooltip,
+  Legend,
+  BarElement,
+  CategoryScale,
+  LinearScale,
+} from 'chart.js'
+import dayjs from 'dayjs'
+
+ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)
+
+const props = defineProps({
+  data: {
+    type: Object,
+    required: true,
+  },
+  formatLabels: {
+    type: Function,
+    default: (label) => dayjs(label).format('MMM D'),
+  },
+})
+
+const decimalToRgba = (decimalColor, alpha = 0.75) => {
+  const red = (decimalColor >> 16) & 255
+  const green = (decimalColor >> 8) & 255
+  const blue = decimalColor & 255
+
+  return `rgba(${red}, ${green}, ${blue}, ${alpha})`
+}
+
+const chartData = ref({
+  labels: props.data.labels.map((date) => props.formatLabels(date)),
+  datasets: props.data.data.map((project) => ({
+    label: project.title,
+    borderColor: decimalToRgba(project.color, 1),
+    borderWidth: 2,
+    borderSkipped: 'bottom',
+    backgroundColor: decimalToRgba(project.color, 0.5),
+    data: project.data,
+  })),
+})
+
+const chartOptions = ref({
+  responsive: true,
+  scales: {
+    x: {
+      stacked: true,
+      grid: {
+        color: getComputedStyle(document.documentElement).getPropertyValue('--color-button-bg'),
+      },
+      ticks: {
+        color: getComputedStyle(document.documentElement).getPropertyValue('--color-base'),
+      },
+    },
+    y: {
+      stacked: true,
+      grid: {
+        color: getComputedStyle(document.documentElement).getPropertyValue('--color-button-bg'),
+      },
+      ticks: {
+        color: getComputedStyle(document.documentElement).getPropertyValue('--color-base'),
+      },
+    },
+  },
+  interaction: {
+    mode: 'index',
+  },
+  plugins: {
+    legend: {
+      position: 'right',
+      align: 'start',
+      labels: {
+        color: getComputedStyle(document.documentElement).getPropertyValue('--color-base'),
+        font: {
+          size: 12,
+          family: 'Inter',
+        },
+      },
+    },
+    tooltip: {
+      position: 'nearest',
+      backgroundColor: getComputedStyle(document.documentElement).getPropertyValue(
+        '--color-raised-bg'
+      ),
+      borderColor: getComputedStyle(document.documentElement).getPropertyValue('--color-button-bg'),
+      borderWidth: 1,
+      titleColor: getComputedStyle(document.documentElement).getPropertyValue('--color-contrast'),
+      titleFont: {
+        size: 16,
+        family: 'Inter',
+      },
+      bodyColor: getComputedStyle(document.documentElement).getPropertyValue('--color-base'),
+      bodyFont: {
+        size: 12,
+        family: 'Inter',
+      },
+      boxPadding: 8,
+      intersect: false,
+      padding: 12,
+      displayColors: false,
+    },
+  },
+})
+</script>
+
+<template>
+  <Bar id="my-chart-id" :options="chartOptions" :data="chartData" />
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/lib/components/base/LineChart.vue b/lib/components/base/LineChart.vue
index 7aee0212b..332f76fb5 100644
--- a/lib/components/base/LineChart.vue
+++ b/lib/components/base/LineChart.vue
@@ -42,7 +42,7 @@ const chartData = ref({
   labels: props.data.labels.map((date) => props.formatLabels(date)),
   datasets: props.data.data.map((project) => ({
     label: project.title,
-    backgroundColor: decimalToRgba(project.color, 0.75),
+    backgroundColor: decimalToRgba(project.color, 0.5),
     borderColor: decimalToRgba(project.color),
     data: project.data,
   })),
@@ -69,7 +69,9 @@ const chartOptions = ref({
     },
   },
   interaction: {
-    mode: 'x',
+    mode: 'index',
+    intersect: false,
+    axis: 'xy',
   },
   plugins: {
     legend: {
diff --git a/lib/components/base/PieChart.vue b/lib/components/base/PieChart.vue
index caa5c0f58..e30317a45 100644
--- a/lib/components/base/PieChart.vue
+++ b/lib/components/base/PieChart.vue
@@ -21,7 +21,7 @@ const props = defineProps({
   },
 })
 
-const decimalToRgba = (decimalColor, alpha = 0.75) => {
+const decimalToRgba = (decimalColor, alpha = 1) => {
   const red = (decimalColor >> 16) & 255
   const green = (decimalColor >> 8) & 255
   const blue = decimalColor & 255
@@ -34,8 +34,8 @@ const chartData = ref({
   datasets: [
     {
       label: props.data.title,
-      backgroundColor: props.data.data.map((project) => decimalToRgba(project.color)),
-      borderColor: getComputedStyle(document.documentElement).getPropertyValue('--color-button-bg'),
+      backgroundColor: props.data.data.map((project) => decimalToRgba(project.color, 0.5)),
+      borderColor: props.data.data.map((project) => decimalToRgba(project.color)),
       data: props.data.data.map((project) => project.data),
       fill: true,
     },
diff --git a/lib/components/index.js b/lib/components/index.js
index 6151b05eb..41faa5859 100644
--- a/lib/components/index.js
+++ b/lib/components/index.js
@@ -26,6 +26,7 @@ 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'
+export { default as BarChart } from './base/BarChart.vue'
 
 export { default as Categories } from './search/Categories.vue'
 export { default as SearchFilter } from './search/SearchFilter.vue'

From 0a7989bbe61e2ad4c2fc7a76d6218518152109fb Mon Sep 17 00:00:00 2001
From: CodexAdrian <83074853+CodexAdrian@users.noreply.github.com>
Date: Mon, 21 Aug 2023 15:54:41 -0400
Subject: [PATCH 2/4] Update package.json

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

diff --git a/package.json b/package.json
index 66ecf50e5..bd790694d 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "omorphia",
   "type": "module",
-  "version": "0.4.39",
+  "version": "0.4.40",
   "files": [
     "dist",
     "lib"

From 71cdb5cd7cd2c675d7da5a0cea11e458d2d173f2 Mon Sep 17 00:00:00 2001
From: CodexAdrian <83074853+CodexAdrian@users.noreply.github.com>
Date: Tue, 12 Sep 2023 14:21:46 -0400
Subject: [PATCH 3/4] Search Dropdown

---
 docs/.vitepress/config.js                |   1 +
 docs/components/search-dropdown.md       | 190 +++++++++++++
 lib/components/index.js                  |   1 +
 lib/components/search/SearchDropdown.vue | 325 +++++++++++++++++++++++
 4 files changed, 517 insertions(+)
 create mode 100644 docs/components/search-dropdown.md
 create mode 100644 lib/components/search/SearchDropdown.vue

diff --git a/docs/.vitepress/config.js b/docs/.vitepress/config.js
index 023231ae2..56011ad8e 100644
--- a/docs/.vitepress/config.js
+++ b/docs/.vitepress/config.js
@@ -46,6 +46,7 @@ export default {
           { text: 'Notifications', link: '/components/notifications' },
           { text: 'Share Modal', link: '/components/share-modal' },
           { text: 'Analytics', link: '/components/analytics' },
+          { text: 'Search dropdown', link: '/components/search-dropdown' },
         ],
       },
     ],
diff --git a/docs/components/search-dropdown.md b/docs/components/search-dropdown.md
new file mode 100644
index 000000000..199c16f5e
--- /dev/null
+++ b/docs/components/search-dropdown.md
@@ -0,0 +1,190 @@
+# Search Dropdown
+
+<script setup>
+import { ref } from 'vue';
+
+const options = ref([]);
+const text = ref('');
+const onSelected = (option) => {
+  options.value.push(option);
+}
+</script>
+
+<DemoContainer>
+
+{{options}}
+
+{{text}}
+
+<SearchDropdown 
+  placeholder="Search for dependencies" 
+  @on-selected="onSelected"
+  v-model="text"
+  :options="[
+    {
+      title: 'Project 1',
+      author: 'Author 1',
+      icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
+      id: 'ejnfwfinj',
+    },
+    {
+      title: 'Project 2',
+      author: 'Author 1',
+      icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
+      id: 'ejnfwfinj',
+    },
+    {
+      title: 'Project 3',
+      author: 'Author 1',
+      icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
+      id: 'ejnfwfinj',
+    },
+    {
+      title: 'Project 3',
+      author: 'Author 1',
+      icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
+      id: 'ejnfwfinj',
+    },
+{
+title: 'Project 1',
+author: 'Author 1',
+icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
+id: 'ejnfwfinj',
+},
+{
+title: 'Project 2',
+author: 'Author 1',
+icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
+id: 'ejnfwfinj',
+},
+{
+title: 'Project 3',
+author: 'Author 1',
+icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
+id: 'ejnfwfinj',
+},
+{
+title: 'Project 3',
+author: 'Author 1',
+icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
+id: 'ejnfwfinj',
+}
+  ]"
+/>
+<SearchDropdown
+placeholder="Search for dependencies"
+@on-selected="onSelected"
+v-model="text"
+disabled
+:options="[
+{
+title: 'Project 1',
+author: 'Author 1',
+icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
+id: 'ejnfwfinj',
+},
+{
+title: 'Project 2',
+author: 'Author 1',
+icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
+id: 'ejnfwfinj',
+},
+{
+title: 'Project 3',
+author: 'Author 1',
+icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
+id: 'ejnfwfinj',
+},
+{
+title: 'Project 3',
+author: 'Author 1',
+icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
+id: 'ejnfwfinj',
+},
+{
+title: 'Project 1',
+author: 'Author 1',
+icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
+id: 'ejnfwfinj',
+},
+{
+title: 'Project 2',
+author: 'Author 1',
+icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
+id: 'ejnfwfinj',
+},
+{
+title: 'Project 3',
+author: 'Author 1',
+icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
+id: 'ejnfwfinj',
+},
+{
+title: 'Project 3',
+author: 'Author 1',
+icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
+id: 'ejnfwfinj',
+}
+]"
+/>
+
+<SearchDropdown
+placeholder="Search for dependencies"
+@on-selected="onSelected"
+v-model="text"
+render-up
+:options="[
+{
+title: 'Project 1',
+author: 'Author 1',
+icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
+id: 'ejnfwfinj',
+},
+{
+title: 'Project 2',
+author: 'Author 1',
+icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
+id: 'ejnfwfinj',
+},
+{
+title: 'Project 3',
+author: 'Author 1',
+icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
+id: 'ejnfwfinj',
+},
+{
+title: 'Project 3',
+author: 'Author 1',
+icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
+id: 'ejnfwfinj',
+},
+{
+title: 'Project 1',
+author: 'Author 1',
+icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
+id: 'ejnfwfinj',
+},
+{
+title: 'Project 2',
+author: 'Author 1',
+icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
+id: 'ejnfwfinj',
+},
+{
+title: 'Project 3',
+author: 'Author 1',
+icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
+id: 'ejnfwfinj',
+},
+{
+title: 'Project 3',
+author: 'Author 1',
+icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
+id: 'ejnfwfinj',
+}
+]"
+/>
+
+
+
+</DemoContainer>
diff --git a/lib/components/index.js b/lib/components/index.js
index 41faa5859..67f1a74c1 100644
--- a/lib/components/index.js
+++ b/lib/components/index.js
@@ -27,6 +27,7 @@ export { default as ShareModal } from './base/ShareModal.vue'
 export { default as LineChart } from './base/LineChart.vue'
 export { default as PieChart } from './base/PieChart.vue'
 export { default as BarChart } from './base/BarChart.vue'
+export { default as SearchDropdown } from './search/SearchDropdown.vue'
 
 export { default as Categories } from './search/Categories.vue'
 export { default as SearchFilter } from './search/SearchFilter.vue'
diff --git a/lib/components/search/SearchDropdown.vue b/lib/components/search/SearchDropdown.vue
new file mode 100644
index 000000000..1bd2b77fd
--- /dev/null
+++ b/lib/components/search/SearchDropdown.vue
@@ -0,0 +1,325 @@
+<template>
+  <div
+    ref="dropdown"
+    tabindex="0"
+    role="combobox"
+    :aria-expanded="dropdownVisible"
+    class="animated-dropdown"
+    @keydown.up.prevent="focusPreviousOption"
+    @keydown.down.prevent="focusNextOptionOrOpen"
+  >
+    <div class="iconified-input">
+      <SearchIcon />
+      <input
+        :value="modelValue"
+        type="text"
+        :name="name"
+        :disabled="disabled"
+        class="text-input"
+        autocomplete="off"
+        autocapitalize="off"
+        :placeholder="placeholder"
+        :class="{ down: !renderUp, up: renderUp }"
+        @input="$emit('update:modelValue', $event.target.value)"
+        @focus="onFocus"
+        @blur="onBlur"
+        @focusout="onBlur"
+        @keydown.enter.prevent="$emit('enter')"
+      />
+      <Button :disabled="disabled" @click="() => $emit('update:modelValue', '')">
+        <XIcon />
+      </Button>
+    </div>
+    <div ref="dropdownOptions" 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="option"
+            @click="selectOption(option)"
+          >
+            <div class="project-label">
+              <Avatar :src="option.icon" />
+              <div class="text">
+                <div class="title">
+                  {{ displayName(option.title) }}
+                </div>
+                <div class="author">
+                  {{ displayName(option.author) }}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </transition>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { Avatar, Button, XIcon, SearchIcon } from '@/components'
+
+const props = defineProps({
+  options: {
+    type: Array,
+    required: true,
+  },
+  name: {
+    type: String,
+    required: true,
+  },
+  placeholder: {
+    type: [String, Number],
+    default: null,
+  },
+  modelValue: {
+    type: [String, Number, Object],
+    default: null,
+  },
+  renderUp: {
+    type: Boolean,
+    default: false,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  displayName: {
+    type: Function,
+    default: (option) => option,
+  },
+})
+
+const emit = defineEmits(['input', 'onSelected', 'update:modelValue', 'enter'])
+
+const dropdownVisible = ref(false)
+const focusedOptionIndex = ref(null)
+const dropdown = ref(null)
+const optionElements = ref(null)
+const dropdownOptions = ref(null)
+
+const toggleDropdown = () => {
+  if (!props.disabled) {
+    dropdownVisible.value = !dropdownVisible.value
+    dropdown.value.focus()
+  }
+}
+
+const selectOption = (option) => {
+  emit('onSelected', option)
+  console.log('onSelected', option)
+  dropdownVisible.value = false
+}
+
+const onFocus = () => {
+  if (!props.disabled) {
+    focusedOptionIndex.value = props.options.findIndex(
+      (option) => option === props.modelValue.value
+    )
+    dropdownVisible.value = true
+  }
+}
+
+const onBlur = (event) => {
+  console.log(event)
+  if (!isChildOfDropdown(event.relatedTarget)) {
+    dropdownVisible.value = false
+  }
+}
+
+const focusPreviousOption = () => {
+  if (!props.disabled) {
+    if (!dropdownVisible.value) {
+      toggleDropdown()
+    }
+    focusedOptionIndex.value =
+      (focusedOptionIndex.value + props.options.length - 1) % props.options.length
+    optionElements.value[focusedOptionIndex.value].focus()
+  }
+}
+
+const focusNextOptionOrOpen = () => {
+  if (!props.disabled) {
+    if (!dropdownVisible.value) {
+      toggleDropdown()
+    }
+    focusedOptionIndex.value = (focusedOptionIndex.value + 1) % props.options.length
+    optionElements.value[focusedOptionIndex.value].focus()
+  }
+}
+
+const isChildOfDropdown = (element) => {
+  let currentNode = element
+  while (currentNode) {
+    if (currentNode === dropdownOptions.value) {
+      return true
+    }
+    currentNode = currentNode.parentNode
+  }
+  return false
+}
+</script>
+
+<style lang="scss" scoped>
+.animated-dropdown {
+  width: 20rem;
+  height: 2.5rem;
+  position: relative;
+  display: inline-block;
+
+  &:focus {
+    outline: 0;
+  }
+
+  .selected {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--gap-sm) var(--gap-lg);
+    background-color: var(--color-button-bg);
+    gap: var(--gap-md);
+    cursor: pointer;
+    user-select: none;
+    border-radius: var(--radius-md);
+    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) var(--radius-md);
+    }
+
+    &.render-down {
+      border-radius: var(--radius-md) var(--radius-md) 0 0;
+    }
+
+    &:focus {
+      outline: 0;
+      filter: brightness(1.25);
+      transition: filter 0.1s ease-in-out;
+    }
+  }
+
+  .options {
+    z-index: 10;
+    max-height: 18rem;
+    overflow-y: auto;
+
+    .option {
+      background-color: var(--color-button-bg);
+      display: flex;
+      align-items: center;
+      padding: var(--gap-md);
+      cursor: pointer;
+      user-select: none;
+
+      &: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);
+  }
+}
+
+.project-label {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  gap: var(--gap-md);
+  color: var(--color-contrast);
+
+  .title {
+    font-weight: bold;
+  }
+}
+
+.iconified-input {
+  width: 100%;
+}
+
+.text-input {
+  box-shadow: var(--shadow-inset-sm), 0 0 0 0 transparent !important;
+  width: 100%;
+
+  &:focus {
+    &.down {
+      border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
+    }
+
+    &.up {
+      border-radius: 0 0 var(--radius-md) var(--radius-md) !important;
+    }
+  }
+}
+</style>

From 71c89cb5a13751fdae0672ffc13cfa1067973105 Mon Sep 17 00:00:00 2001
From: CodexAdrian <83074853+CodexAdrian@users.noreply.github.com>
Date: Wed, 13 Sep 2023 16:06:03 -0400
Subject: [PATCH 4/4] Add circle icon option

---
 docs/components/search-dropdown.md       | 201 ++++++-----------------
 lib/components/search/SearchDropdown.vue |   8 +-
 2 files changed, 58 insertions(+), 151 deletions(-)

diff --git a/docs/components/search-dropdown.md b/docs/components/search-dropdown.md
index 199c16f5e..0d00ffb3c 100644
--- a/docs/components/search-dropdown.md
+++ b/docs/components/search-dropdown.md
@@ -1,190 +1,93 @@
 # Search Dropdown
 
 <script setup>
-import { ref } from 'vue';
+import { ref } from "vue";
 
 const options = ref([]);
-const text = ref('');
+const text = ref("");
 const onSelected = (option) => {
   options.value.push(option);
-}
+};
 </script>
 
 <DemoContainer>
-
 {{options}}
-
 {{text}}
 
-<SearchDropdown 
-  placeholder="Search for dependencies" 
+<SearchDropdown
+  placeholder="Search for dependencies"
   @on-selected="onSelected"
   v-model="text"
   :options="[
     {
       title: 'Project 1',
-      author: 'Author 1',
+      subtitle: 'Author 1',
       icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
       id: 'ejnfwfinj',
     },
     {
       title: 'Project 2',
-      author: 'Author 1',
+      subtitle: 'Author 1',
       icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
       id: 'ejnfwfinj',
     },
     {
       title: 'Project 3',
-      author: 'Author 1',
+      subtitle: 'Author 1',
       icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
       id: 'ejnfwfinj',
     },
     {
       title: 'Project 3',
-      author: 'Author 1',
+      subtitle: 'Author 1',
+      icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
+      id: 'ejnfwfinj',
+    },
+    {
+      title: 'Project 1',
+      subtitle: 'Author 1',
       icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
       id: 'ejnfwfinj',
     },
-{
-title: 'Project 1',
-author: 'Author 1',
-icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
-id: 'ejnfwfinj',
-},
-{
-title: 'Project 2',
-author: 'Author 1',
-icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
-id: 'ejnfwfinj',
-},
-{
-title: 'Project 3',
-author: 'Author 1',
-icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
-id: 'ejnfwfinj',
-},
-{
-title: 'Project 3',
-author: 'Author 1',
-icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
-id: 'ejnfwfinj',
-}
+    {
+      title: 'Project 2',
+      subtitle: 'Author 1',
+      icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
+      id: 'ejnfwfinj',
+    },
+    {
+      title: 'Project 3',
+      subtitle: 'Author 1',
+      icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
+      id: 'ejnfwfinj',
+    },
+    {
+      title: 'Project 3',
+      subtitle: 'Author 1',
+      icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
+      id: 'ejnfwfinj',
+    }
   ]"
 />
-<SearchDropdown
-placeholder="Search for dependencies"
-@on-selected="onSelected"
-v-model="text"
-disabled
-:options="[
-{
-title: 'Project 1',
-author: 'Author 1',
-icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
-id: 'ejnfwfinj',
-},
-{
-title: 'Project 2',
-author: 'Author 1',
-icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
-id: 'ejnfwfinj',
-},
-{
-title: 'Project 3',
-author: 'Author 1',
-icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
-id: 'ejnfwfinj',
-},
-{
-title: 'Project 3',
-author: 'Author 1',
-icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
-id: 'ejnfwfinj',
-},
-{
-title: 'Project 1',
-author: 'Author 1',
-icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
-id: 'ejnfwfinj',
-},
-{
-title: 'Project 2',
-author: 'Author 1',
-icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
-id: 'ejnfwfinj',
-},
-{
-title: 'Project 3',
-author: 'Author 1',
-icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
-id: 'ejnfwfinj',
-},
-{
-title: 'Project 3',
-author: 'Author 1',
-icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
-id: 'ejnfwfinj',
-}
-]"
-/>
 
+</DemoContainer>
+
+```vue
 <SearchDropdown
-placeholder="Search for dependencies"
-@on-selected="onSelected"
-v-model="text"
-render-up
-:options="[
-{
-title: 'Project 1',
-author: 'Author 1',
-icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
-id: 'ejnfwfinj',
-},
-{
-title: 'Project 2',
-author: 'Author 1',
-icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
-id: 'ejnfwfinj',
-},
-{
-title: 'Project 3',
-author: 'Author 1',
-icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
-id: 'ejnfwfinj',
-},
-{
-title: 'Project 3',
-author: 'Author 1',
-icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
-id: 'ejnfwfinj',
-},
-{
-title: 'Project 1',
-author: 'Author 1',
-icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
-id: 'ejnfwfinj',
-},
-{
-title: 'Project 2',
-author: 'Author 1',
-icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
-id: 'ejnfwfinj',
-},
-{
-title: 'Project 3',
-author: 'Author 1',
-icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
-id: 'ejnfwfinj',
-},
-{
-title: 'Project 3',
-author: 'Author 1',
-icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
-id: 'ejnfwfinj',
-}
-]"
+  placeholder="Search for dependencies"
+  @on-selected="onSelected"
+  v-model="text"
+  disabled
+  render-up
+  circled-icons
+  :options="[
+    {
+      title: 'Project 1',
+      subtitle: 'Author 1',
+      icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
+      ...
+    },
+    ...
+  ]"
 />
-
-
-
-</DemoContainer>
+```
diff --git a/lib/components/search/SearchDropdown.vue b/lib/components/search/SearchDropdown.vue
index 1bd2b77fd..0cd05f18e 100644
--- a/lib/components/search/SearchDropdown.vue
+++ b/lib/components/search/SearchDropdown.vue
@@ -48,13 +48,13 @@
             @click="selectOption(option)"
           >
             <div class="project-label">
-              <Avatar :src="option.icon" />
+              <Avatar :src="option.icon" :circle="circledIcons" />
               <div class="text">
                 <div class="title">
                   {{ displayName(option.title) }}
                 </div>
                 <div class="author">
-                  {{ displayName(option.author) }}
+                  {{ displayName(option.subtitle) }}
                 </div>
               </div>
             </div>
@@ -98,6 +98,10 @@ const props = defineProps({
     type: Function,
     default: (option) => option,
   },
+  circledIcons: {
+    type: Boolean,
+    default: false,
+  },
 })
 
 const emit = defineEmits(['input', 'onSelected', 'update:modelValue', 'enter'])