Dropdown Lists v1.0
The <e-dropdown-list> component is a component that can be used for .
Usage
An e-dropdown-list has attributes that must be provided,
<e-dropdown-list/>
Attributes
id | Type: String | required
label | Type: String | Default:''
options | Type: Array | Default:selectOptions
const selectOptions = [
{
id: '0',
text: 'test1',
value: 'test1',
description: ''
},
{
id: '1',
text: 'test2',
value: 'test2',
description: ''
}
]
Examples
Below a few interactive examples of unavailable can be found.
Default
<e-dropdown-list
id='selectInputDefault'
/>
Source Code
e-dropdown-list.vue
<script setup lang="ts">
import { provide, reactive, watch } from 'vue';
const emit = defineEmits<{
(e: 'update:value', value: unknown | undefined): void;
(e: 'cancel'): void;
}>();
const state = reactive({
active: false,
selectedItem: undefined as unknown | undefined
});
provide('sharedState', state);
const toggle = (e: UIEvent) => {
state.active = !state.active;
e.preventDefault();
};
watch(
state,
() => {
emit('update:value', state.selectedItem);
},
{ deep: true }
);
</script>
<template>
<div
class="e-dropdown"
:class="state.active ? 'active' : ''"
@click="toggle($event)"
>
<slot
name="toggler"
:selected-item="state.selectedItem"
:active="state.active"
>
<button
type="button"
v-text="'Toggle'"
/>
</slot>
<slot />
</div>
</template>
<style lang="scss">
.e-dropdown {
position: relative;
button {
position: relative;
margin-right: 15px;
align-items: center;
outline: none;
transition: none !important;
}
&.active {
button:not(ul button) {
border-radius: 15px 15px 0 0 !important;
}
}
}
</style>