feat: Select component

[webfansplz]

select-component.mov

<template borderStyle="round">
  <Select v-model="value" @submit="submit">
    <Option :value="item.value" v-for="(item, index) in options" :key="index">
      <template v-slot="{ isActive }">
        <Box flexDirection="column">
          <Text :dimmed="isActive" :underline="isActive">{{ item.label }}</Text>
        </Box>
      </template>
    </Option>
  </Select>
</template>

[netlify]

✅ Deploy Preview for vue-termui ready!

Name	Link
🔨 Latest commit	d111cb6
🔍 Latest deploy log	https://app.netlify.com/sites/vue-termui/deploys/635fcd5ec6311b000946d145
😎 Deploy Preview	https://deploy-preview-18--vue-termui.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[posva]

I wonder if this should be really different: like the input component, it does look a lot like the prompts version but it could be so much more. I wonder if by having relative + absolute positioned boxes we could recreate the select menu that exists on the browser and cycle through them with tab (using the useFocusable())
we could also have both versions but I don't think we should have the submit event for example, that should be handled at a higher level

I think I need to write one of these to better explain what I mean by something really interactive. I will try to give the select a try and open a new PR if you want?

[posva]

Do you think this is more interesting that having two different props?

[posva]

I think they can each of them have their own file 😄

[posva]

Ideally, this should look like this:

Suggested change

	<Option :value="item.value" v-for="(item, index) in options" :key="index">
	<template v-slot="{ isActive }">
	<Box flexDirection="column">
	<Text :dimmed="isActive" :underline="isActive">{{ item.label }}</Text>
	</Box>
	</template>
	</Option>
	<Option :value="item.value" v-for="(item, index) in options" :key="index">
	{{ item.label }}
	</Option>

and even allow not passing the value prop. We can achieve this by using inject/provide. The v-slot api is nice to allow the user further customization though

[webfansplz]

I wonder if this should be really different: like the input component, it does look a lot like the prompts version but it could be so much more. I wonder if by having relative + absolute positioned boxes we could recreate the select menu that exists on the browser and cycle through them with tab (using the useFocusable()) we could also have both versions but I don't think we should have the submit event for example, that should be handled at a higher level

I think I need to write one of these to better explain what I mean by something really interactive. I will try to give the select a try and open a new PR if you want?

Sure,It's nice to see the PR.