Search dropdown (#91)

* Bar charts * Update package.json * Search Dropdown * Add circle icon option
2023-09-13 16:21:13 -04:00
parent ec35392cd1
commit ae7f7e9bd6
4 changed files with 424 additions and 0 deletions
--- 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' },
        ],
      },
    ],
--- a/docs/components/search-dropdown.md
+++ b/docs/components/search-dropdown.md
@@ -0,0 +1,93 @@
+# 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',
+      subtitle: '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',
+    },
+    {
+      title: 'Project 1',
+      subtitle: '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',
+    }
+  ]"
+/>
+
+</DemoContainer>
+
+```vue
+<SearchDropdown
+  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',
+      ...
+    },
+    ...
+  ]"
+/>
+```
--- 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'
--- a/lib/components/search/SearchDropdown.vue
+++ b/lib/components/search/SearchDropdown.vue
@@ -0,0 +1,329 @@
+<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" :circle="circledIcons" />
+              <div class="text">
+                <div class="title">
+                  {{ displayName(option.title) }}
+                </div>
+                <div class="author">
+                  {{ displayName(option.subtitle) }}
+                </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,
+  },
+  circledIcons: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+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>