Macrame/ui/src/components/form/FormSelect.vue

<!--
Macrame is a program that enables the user to create keyboard macros and button panels. 
The macros are saved as simple JSON files and can be linked to the button panels. The panels can 
be created with HTML and CSS.

Copyright (C) 2025 Jesse Malotaux

This program is free software: you can redistribute it and/or modify 
it under the terms of the GNU General Public License as published by 
the Free Software Foundation, either version 3 of the License, or 
(at your option) any later version.

This program is distributed in the hope that it will be useful, 
but WITHOUT ANY WARRANTY; without even the implied warranty of 
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 
GNU General Public License for more details.

You should have received a copy of the GNU General Public License 
along with this program. If not, see <https://www.gnu.org/licenses/>.
-->

<template>
  <div class="input-group form-select">
    <label v-if="label">
      {{ label }}
    </label>
    <div class="select__container">
      <template v-if="search">
        <div class="select__search-bar">
          <input
            type="search"
            ref="selectSearch"
            :list="`${name}-search__options`"
            v-model="select.search"
            @change="selectSearchValue($event)"
            :disabled="!select.searchActive"
            autocomplete="on"
          />
          <datalist :id="`${name}-search__options`">
            <option v-for="option in select.options" :key="option.value" :value="option.value">
              {{ option.label }}
            </option>
          </datalist>
          <ButtonComp v-if="!select.searchActive" variant="ghost" size="sm" @click="initSearch">
            <IconSearch />
          </ButtonComp>
          <ButtonComp v-else variant="ghost" size="sm" @click="resetSearch">
            <IconSearchOff />
          </ButtonComp>
        </div>
      </template>
      <select :name="name" ref="selectEl" v-model="select.value" @change="changeSelect($event)">
        <option value="" disabled>- Select {{ label.toLocaleLowerCase() }} -</option>
        <option v-for="option in select.options" :key="option.value" :value="option.value">
          {{ option.label }}
        </option>
      </select>
    </div>
  </div>
</template>

<script setup>
import { IconSearch, IconSearchOff } from '@tabler/icons-vue'
import { onMounted, onUpdated, reactive, ref } from 'vue'
import ButtonComp from '../base/ButtonComp.vue'

const emit = defineEmits(['change'])

const props = defineProps({
  label: String,
  name: String,
  options: [Array, Object],
  search: Boolean,
  value: String,
})

const select = reactive({
  options: [],
  search: '',
  searchActive: false,
  changed: false,
  value: '',
})

const selectEl = ref(null)
const selectSearch = ref(null)

onMounted(() => {
  setValue()

  if (typeof props.options == 'object') select.options = Object.values(props.options)
})

onUpdated(() => {
  setValue()
})

const setValue = () => {
  if ((select.value == '' && props.value) || (!select.changed && props.value != select.value)) {
    select.value = props.value
  }

  select.changed = false
}

const initSearch = () => {
  select.searchActive = true
  select.search = ''
  selectEl.value.classList = 'search__is-active'
  setTimeout(() => {
    selectSearch.value.focus()
  }, 50)
}

const resetSearch = () => {
  select.search = ''
  select.searchActive = false
  selectEl.value.classList = ''
}

const selectSearchValue = (event) => {
  changeSelect(event)
  resetSearch()
}

const changeSelect = (event) => {
  select.changed = true
  select.value = event.target.value

  emit('change', select.value)
}
</script>

<style scoped>
@reference "@/assets/main.css";

.select__container {
  @apply relative
  h-8;

  select,
  .select__search-bar {
    @apply absolute top-0 h-8;
  }
}
.select__search-bar {
  @apply right-0 
  grid
  grid-cols-[1fr_auto]
  items-center
  w-full
  pr-4
  z-10
  pointer-events-none;

  button {
    @apply pointer-events-auto;
  }

  input {
    @apply border-0 bg-transparent pointer-events-auto px-2 py-0 focus:outline-0;

    &[disabled] {
      @apply pointer-events-none;
    }
  }
  datalist {
    @apply absolute
    top-full left-0;
  }
}

select.search__is-active {
  @apply text-transparent;
}
</style>