Remove dropdown button
This commit is contained in:
Prospector
parent
2c850a612d
commit
6fb04e23ad
@ -1,118 +0,0 @@
|
|||||||
# Dropdown
|
|
||||||
<DemoContainer>
|
|
||||||
<DropdownButton
|
|
||||||
:options="['delete', 'save', 'recycle', 'reduce', 'reuse']"
|
|
||||||
default-value="delete"
|
|
||||||
name="dropdown-one"
|
|
||||||
color="primary"
|
|
||||||
>
|
|
||||||
<template #delete>
|
|
||||||
<TrashIcon /> Delete
|
|
||||||
</template>
|
|
||||||
<template #save>
|
|
||||||
<CheckIcon /> Save
|
|
||||||
</template>
|
|
||||||
<template #recycle>
|
|
||||||
<UpdatedIcon /> Recycle
|
|
||||||
</template>
|
|
||||||
<template #reduce>
|
|
||||||
<ChevronDownIcon /> Reduce
|
|
||||||
</template>
|
|
||||||
<template #reuse>
|
|
||||||
<TransferIcon /> Reuse
|
|
||||||
</template>
|
|
||||||
</DropdownButton>
|
|
||||||
<DropdownButton
|
|
||||||
:options="['delete', 'save', 'recycle', 'reduce', 'reuse']"
|
|
||||||
default-value="delete"
|
|
||||||
name="dropdown-two"
|
|
||||||
render-up
|
|
||||||
>
|
|
||||||
<template #delete>
|
|
||||||
<TrashIcon /> Delete
|
|
||||||
</template>
|
|
||||||
<template #save>
|
|
||||||
<CheckIcon /> Save
|
|
||||||
</template>
|
|
||||||
<template #recycle>
|
|
||||||
<UpdatedIcon /> Recycle
|
|
||||||
</template>
|
|
||||||
<template #reduce>
|
|
||||||
<ChevronDownIcon /> Reduce
|
|
||||||
</template>
|
|
||||||
<template #reuse>
|
|
||||||
<CalendarIcon /> Reuse
|
|
||||||
</template>
|
|
||||||
</DropdownButton>
|
|
||||||
<DropdownButton
|
|
||||||
:options="['delete', 'save', 'recycle', 'reduce', 'reuse']"
|
|
||||||
default-value="delete"
|
|
||||||
name="dropdown-three"
|
|
||||||
disabled
|
|
||||||
>
|
|
||||||
<template #delete>
|
|
||||||
<TrashIcon /> Delete
|
|
||||||
</template>
|
|
||||||
<template #save>
|
|
||||||
<CheckIcon /> Save
|
|
||||||
</template>
|
|
||||||
<template #recycle>
|
|
||||||
<UpdatedIcon /> Recycle
|
|
||||||
</template>
|
|
||||||
<template #reduce>
|
|
||||||
<ChevronDownIcon /> Reduce
|
|
||||||
</template>
|
|
||||||
<template #reuse>
|
|
||||||
<CalendarIcon /> Reuse
|
|
||||||
</template>
|
|
||||||
</DropdownButton>
|
|
||||||
<DropdownButton
|
|
||||||
:options="['delete', 'save', 'recycle', 'reduce', 'reuse']"
|
|
||||||
default-value="delete"
|
|
||||||
name="dropdown-four"
|
|
||||||
render-up
|
|
||||||
disabled
|
|
||||||
>
|
|
||||||
<template #delete>
|
|
||||||
<TrashIcon /> Delete
|
|
||||||
</template>
|
|
||||||
<template #save>
|
|
||||||
<CheckIcon /> Save
|
|
||||||
</template>
|
|
||||||
<template #recycle>
|
|
||||||
<UpdatedIcon /> Recycle
|
|
||||||
</template>
|
|
||||||
<template #reduce>
|
|
||||||
<ChevronDownIcon /> Reduce
|
|
||||||
</template>
|
|
||||||
<template #reuse>
|
|
||||||
<CalendarIcon /> Reuse
|
|
||||||
</template>
|
|
||||||
</DropdownButton>
|
|
||||||
</DemoContainer>
|
|
||||||
|
|
||||||
```vue
|
|
||||||
<DropdownButton
|
|
||||||
:options="['delete', 'save', 'recycle', 'reduce', 'reuse']"
|
|
||||||
default-value="delete"
|
|
||||||
@option-click="handleOptionClick"
|
|
||||||
color="primary"
|
|
||||||
render-up
|
|
||||||
>
|
|
||||||
<template #delete>
|
|
||||||
<TrashIcon /> Delete
|
|
||||||
</template>
|
|
||||||
<template #save>
|
|
||||||
<CheckIcon /> Save
|
|
||||||
</template>
|
|
||||||
<template #recycle>
|
|
||||||
<UpdatedIcon /> Recycle
|
|
||||||
</template>
|
|
||||||
<template #reduce>
|
|
||||||
<ChevronDownIcon /> Reduce
|
|
||||||
</template>
|
|
||||||
<template #reuse>
|
|
||||||
<CalendarIcon /> Reuse
|
|
||||||
</template>
|
|
||||||
</DropdownButton>
|
|
||||||
```
|
|
||||||
@ -1,331 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div
|
|
||||||
ref="dropdown"
|
|
||||||
tabindex="0"
|
|
||||||
role="combobox"
|
|
||||||
:aria-expanded="dropdownVisible"
|
|
||||||
class="animated-dropdown"
|
|
||||||
>
|
|
||||||
<div class="dropdown-row">
|
|
||||||
<Button
|
|
||||||
class="dropdown-button"
|
|
||||||
:class="{
|
|
||||||
'render-down': dropdownVisible && !renderUp && !disabled,
|
|
||||||
'render-up': dropdownVisible && renderUp && !disabled,
|
|
||||||
}"
|
|
||||||
:disabled="disabled"
|
|
||||||
:color="color"
|
|
||||||
@click="clickOption"
|
|
||||||
>
|
|
||||||
<slot :name="selectedOption" />
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
class="selected"
|
|
||||||
:class="{
|
|
||||||
'render-down': dropdownVisible && !renderUp && !disabled,
|
|
||||||
'render-up': dropdownVisible && renderUp && !disabled,
|
|
||||||
}"
|
|
||||||
icon-only
|
|
||||||
:color="color"
|
|
||||||
:disabled="disabled"
|
|
||||||
@click="toggleDropdown"
|
|
||||||
>
|
|
||||||
<DropdownIcon class="arrow" :class="{ rotate: dropdownVisible }" />
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
<div 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="{ 'selected-option': selectedValue === option }"
|
|
||||||
:aria-selected="selectedValue === option"
|
|
||||||
class="option"
|
|
||||||
@click="selectOption(option, index)"
|
|
||||||
@keydown.space.prevent="selectOption(option, index)"
|
|
||||||
>
|
|
||||||
<input
|
|
||||||
:id="`${name}-${index}`"
|
|
||||||
v-model="radioValue"
|
|
||||||
type="radio"
|
|
||||||
:value="option"
|
|
||||||
:name="name"
|
|
||||||
/>
|
|
||||||
<label :for="`${name}-${index}`" class="slot">
|
|
||||||
<slot :name="option" />
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</transition>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
|
|
||||||
import { Button, DropdownIcon } from '@/components'
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
options: {
|
|
||||||
type: Array,
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
name: {
|
|
||||||
type: String,
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
defaultValue: {
|
|
||||||
type: String,
|
|
||||||
default: null,
|
|
||||||
},
|
|
||||||
modelValue: {
|
|
||||||
type: String,
|
|
||||||
default: null,
|
|
||||||
},
|
|
||||||
renderUp: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
disabled: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
color: {
|
|
||||||
type: String,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
})
|
|
||||||
|
|
||||||
const emit = defineEmits(['input', 'change', 'update:modelValue', 'option-click'])
|
|
||||||
|
|
||||||
const dropdownVisible = ref(false)
|
|
||||||
const selectedValue = ref(props.modelValue || props.defaultValue)
|
|
||||||
const dropdown = ref(null)
|
|
||||||
const optionElements = ref(null)
|
|
||||||
|
|
||||||
const selectedOption = computed(() => {
|
|
||||||
return selectedValue.value
|
|
||||||
})
|
|
||||||
|
|
||||||
const radioValue = computed({
|
|
||||||
get() {
|
|
||||||
return props.modelValue || selectedValue.value
|
|
||||||
},
|
|
||||||
set(newValue) {
|
|
||||||
emit('update:modelValue', newValue)
|
|
||||||
selectedValue.value = newValue
|
|
||||||
},
|
|
||||||
})
|
|
||||||
|
|
||||||
watch(
|
|
||||||
() => props.modelValue,
|
|
||||||
(newValue) => {
|
|
||||||
selectedValue.value = newValue
|
|
||||||
}
|
|
||||||
)
|
|
||||||
|
|
||||||
const toggleDropdown = () => {
|
|
||||||
if (!props.disabled) {
|
|
||||||
dropdownVisible.value = !dropdownVisible.value
|
|
||||||
dropdown.value.focus()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const selectOption = (option, index) => {
|
|
||||||
radioValue.value = option
|
|
||||||
emit('change', { option, index })
|
|
||||||
emit('option-click', { option: selectedOption.value })
|
|
||||||
dropdownVisible.value = false
|
|
||||||
}
|
|
||||||
|
|
||||||
const clickOption = () => {
|
|
||||||
emit('option-click', { option: selectedOption.value })
|
|
||||||
dropdownVisible.value = false
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleClickOutside = (event) => {
|
|
||||||
const elements = document.elementsFromPoint(event.clientX, event.clientY)
|
|
||||||
if (
|
|
||||||
dropdown.value.$el !== event.target &&
|
|
||||||
!elements.includes(dropdown.value.$el) &&
|
|
||||||
!dropdown.value.contains(event.target)
|
|
||||||
) {
|
|
||||||
dropdownVisible.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
window.addEventListener('click', handleClickOutside)
|
|
||||||
})
|
|
||||||
|
|
||||||
onBeforeUnmount(() => {
|
|
||||||
window.removeEventListener('click', handleClickOutside)
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.animated-dropdown {
|
|
||||||
position: relative;
|
|
||||||
display: inline-block;
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
outline: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-row {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
.dropdown-button {
|
|
||||||
width: 100%;
|
|
||||||
border-radius: var(--radius-md) 0 0 var(--radius-md);
|
|
||||||
|
|
||||||
&.render-up {
|
|
||||||
border-radius: 0 0 0 var(--radius-md);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.render-down {
|
|
||||||
border-radius: var(--radius-md) 0 0 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
height: 2.25rem;
|
|
||||||
|
|
||||||
transition: 0.05s;
|
|
||||||
|
|
||||||
&:not(.render-down):not(.render-up) {
|
|
||||||
transition-delay: 0.2s;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.selected {
|
|
||||||
height: auto;
|
|
||||||
width: auto;
|
|
||||||
margin-left: 1px;
|
|
||||||
padding: var(--gap-sm);
|
|
||||||
border-radius: 0 var(--radius-md) var(--radius-md) 0;
|
|
||||||
|
|
||||||
&.render-up {
|
|
||||||
border-radius: 0 0 var(--radius-md) 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.render-down {
|
|
||||||
border-radius: 0 var(--radius-md) 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
outline: 0;
|
|
||||||
filter: brightness(1.25);
|
|
||||||
transition: filter 0.1s ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.arrow {
|
|
||||||
min-width: 1.125rem;
|
|
||||||
min-height: 1.125rem;
|
|
||||||
display: inline-block;
|
|
||||||
transition: transform 0.2s ease;
|
|
||||||
|
|
||||||
&.rotate {
|
|
||||||
transform: rotate(180deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.options {
|
|
||||||
z-index: 10;
|
|
||||||
max-height: 18.75rem;
|
|
||||||
overflow-y: auto;
|
|
||||||
box-shadow: var(--shadow-inset-sm), 0 0 0 0 transparent;
|
|
||||||
|
|
||||||
.option {
|
|
||||||
background-color: var(--color-button-bg);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
padding: var(--gap-md);
|
|
||||||
cursor: pointer;
|
|
||||||
user-select: none;
|
|
||||||
|
|
||||||
.slot {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
gap: var(--gap-sm);
|
|
||||||
}
|
|
||||||
|
|
||||||
&: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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -22,7 +22,6 @@ export { default as CopyCode } from './base/CopyCode.vue'
|
|||||||
export { default as Notifications } from './base/Notifications.vue'
|
export { default as Notifications } from './base/Notifications.vue'
|
||||||
export { default as ModalConfirm } from './base/ModalConfirm.vue'
|
export { default as ModalConfirm } from './base/ModalConfirm.vue'
|
||||||
export { default as Breadcrumbs } from './base/Breadcrumbs.vue'
|
export { default as Breadcrumbs } from './base/Breadcrumbs.vue'
|
||||||
export { default as DropdownButton } from './base/DropdownButton.vue'
|
|
||||||
export { default as ShareModal } from './base/ShareModal.vue'
|
export { default as ShareModal } from './base/ShareModal.vue'
|
||||||
export { default as LineChart } from './base/LineChart.vue'
|
export { default as LineChart } from './base/LineChart.vue'
|
||||||
export { default as PieChart } from './base/PieChart.vue'
|
export { default as PieChart } from './base/PieChart.vue'
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user