A basic dropdown component for @histoire/histoire-controls

HstDropdown.vue

<script lang="ts">
export default {
  name: 'HstDropdown',
}
</script>

<script lang="ts" setup>
import { ref } from 'vue'
import HstWrapper from '../HstWrapper.vue'

const props = defineProps<{
  title?: string
  modelValue: string
  options: Array<{[name: string]: string, value: string}>
}>()

const emit = defineEmits({
  'update:modelValue': (newValue: string) => true,
})

const input = ref<HTMLSelectElement>()
</script>

<template>
  <HstWrapper
    :title="title"
    class="htw-cursor-text htw-items-center"
    :class="$attrs.class"
    :style="$attrs.style"
    @click="input.focus()"
  >
    <select
      ref="input"
      :value="modelValue"
      class="htw-text-inherit htw-bg-transparent htw-w-full htw-outline-none htw-px-2 htw-py-1 -htw-my-1 htw-border htw-border-solid htw-border-black/25 dark:htw-border-white/25 focus:htw-border-primary-500 dark:focus:htw-border-primary-500 htw-rounded-sm"
      @input="emit('update:modelValue', ($event.target as HTMLInputElement).value)"
    >
      <option
        v-for="item in options"
        :key="item.value"
        :value="item.value"
      >
        {{ item.name }}
      </option>
    </select>
  </HstWrapper>
</template>

<style scoped>
select {
  width: 100%;
}
</style>

index.ts

import type { App } from 'vue'
import HstCheckboxVue from './components/checkbox/HstCheckbox.vue'
import HstTextVue from './components/text/HstText.vue'
import HstNumberVue from './components/number/HstNumber.vue'
import HstTextareaVue from './components/textarea/HstTextarea.vue'
import HstDropdownVue from './components/dropdown/HstDropdown.vue'

export const HstCheckbox = HstCheckboxVue
export const HstText = HstTextVue
export const HstNumber = HstNumberVue
export const HstTextarea = HstTextareaVue
export const HstDropdown = HstDropdownVue

export function registerVueComponents (app: App) {
  app.component('HstCheckbox', HstCheckboxVue)
  app.component('HstText', HstTextVue)
  app.component('HstNumber', HstNumberVue)
  app.component('HstTextarea', HstTextareaVue)
  app.component('HstDropdown', HstDropdownVue)
}