Merge pull request #101 from modrinth/feature/joined-buttons
Joined buttons
This commit is contained in:
Prospector
GitHub
commit
5e4c261332
@ -107,3 +107,53 @@
|
||||
<Button icon-only transparent><SunIcon /></Button>
|
||||
<Button icon-only transparent><DropdownIcon /></Button>
|
||||
```
|
||||
|
||||
## Joined buttons
|
||||
|
||||
<DemoContainer>
|
||||
<div class="joined-buttons">
|
||||
<Button color="primary"><UploadIcon /> Upload</Button>
|
||||
<OverflowMenu :options="[
|
||||
{
|
||||
'id': 'import',
|
||||
'action': () => {},
|
||||
},
|
||||
{
|
||||
'id': 'edit',
|
||||
'action': () => {}
|
||||
}
|
||||
]" class="btn btn-primary btn-dropdown-animation icon-only">
|
||||
<DropdownIcon />
|
||||
<template #import>
|
||||
<ImportIcon /> Import
|
||||
</template>
|
||||
<template #edit>
|
||||
<EditIcon /> Edit
|
||||
</template>
|
||||
</OverflowMenu>
|
||||
</div>
|
||||
</DemoContainer>
|
||||
|
||||
```vue
|
||||
<div class="joined-buttons">
|
||||
<Button color="primary"><UploadIcon /> Upload</Button>
|
||||
<OverflowMenu :options="[
|
||||
{
|
||||
'id': 'import',
|
||||
'action': () => {},
|
||||
},
|
||||
{
|
||||
'id': 'edit',
|
||||
'action': () => {}
|
||||
}
|
||||
]" class="btn btn-primary btn-dropdown-animation icon-only">
|
||||
<DropdownIcon />
|
||||
<template #import>
|
||||
<ImportIcon /> Import
|
||||
</template>
|
||||
<template #edit>
|
||||
<EditIcon /> Edit
|
||||
</template>
|
||||
</OverflowMenu>
|
||||
</div>
|
||||
```
|
||||
|
||||
@ -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
lib/assets/icons/import.svg
Normal file
1
lib/assets/icons/import.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-import"><path d="M12 3v12"/><path d="m8 11 4 4 4-4"/><path d="M8 5H4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-4"/></svg>
|
||||
|
After Width: | Height: | Size: 346 B |
@ -486,6 +486,18 @@ a,
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&.btn-dropdown-animation {
|
||||
svg {
|
||||
transition: transform 0.125s ease-in-out;
|
||||
}
|
||||
|
||||
&.popout-open {
|
||||
svg {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
@ -494,6 +506,27 @@ a,
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.joined-buttons {
|
||||
display: flex;
|
||||
gap: 1px;
|
||||
|
||||
> :not(:first-child) {
|
||||
&.btn,
|
||||
> .btn {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
> :not(:last-child) {
|
||||
&.btn,
|
||||
> .btn {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// PROJECT CARDS
|
||||
|
||||
.project-list {
|
||||
|
||||
@ -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>
|
||||
@ -1,6 +1,11 @@
|
||||
<template>
|
||||
<div ref="dropdown" class="popup-container" tabindex="0" :aria-expanded="dropdownVisible">
|
||||
<button v-bind="$attrs" ref="dropdownButton" @click="toggleDropdown">
|
||||
<button
|
||||
v-bind="$attrs"
|
||||
ref="dropdownButton"
|
||||
:class="{ 'popout-open': dropdownVisible }"
|
||||
@click="toggleDropdown"
|
||||
>
|
||||
<slot></slot>
|
||||
</button>
|
||||
<div
|
||||
|
||||
@ -22,7 +22,6 @@ export { default as CopyCode } from './base/CopyCode.vue'
|
||||
export { default as Notifications } from './base/Notifications.vue'
|
||||
export { default as ModalConfirm } from './base/ModalConfirm.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 LineChart } from './base/LineChart.vue'
|
||||
export { default as PieChart } from './base/PieChart.vue'
|
||||
@ -88,6 +87,7 @@ export { default as HeartHandshakeIcon } from '@/assets/icons/heart-handshake.sv
|
||||
export { default as HistoryIcon } from '@/assets/icons/history.svg'
|
||||
export { default as HomeIcon } from '@/assets/icons/home.svg'
|
||||
export { default as ImageIcon } from '@/assets/icons/image.svg'
|
||||
export { default as ImportIcon } from '@/assets/icons/import.svg'
|
||||
export { default as InfoIcon } from '@/assets/icons/info.svg'
|
||||
export { default as IssuesIcon } from '@/assets/icons/issues.svg'
|
||||
export { default as LeftArrowIcon } from '@/assets/icons/left-arrow.svg'
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "omorphia",
|
||||
"type": "module",
|
||||
"version": "0.5.0",
|
||||
"version": "0.5.1",
|
||||
"files": [
|
||||
"dist",
|
||||
"lib"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user