eightequal/AstralRinth
1
0
Fork 0
forked from didirus/AstralRinth
Code Pull Requests Activity

Merge branch 'master' into feat/typescript-hell-yeah

Browse Source
This commit is contained in:
Carter
2023-10-16 14:51:19 -07:00
committed by GitHub
parent cb32cca6aa 5e4c261332
commit 5adf27d345
8 changed files with 91 additions and 452 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
docs/components/button.md
View File

@@ -107,3 +107,53 @@
<Button icon-only transparent><SunIcon /></Button> <Button icon-only transparent><SunIcon /></Button>
<Button icon-only transparent><DropdownIcon /></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>
```

118
docs/components/dropdown-button.md
View File

@@ -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
View 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>
Side by Side

After

Width:  |  Height:  |  Size: 346 B

33
lib/assets/styles/classes.scss
View File

@@ -486,6 +486,18 @@ a,
background: none; background: none;
box-shadow: none; box-shadow: none;
} }
&.btn-dropdown-animation {
svg {
transition: transform 0.125s ease-in-out;
}
&.popout-open {
svg {
transform: rotate(180deg);
}
}
}
} }
.btn-group { .btn-group {
@@ -494,6 +506,27 @@ a,
flex-wrap: wrap; 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 CARDS
.project-list { .project-list {

331
lib/components/base/DropdownButton.vue
View File

@@ -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>

7
lib/components/base/PopoutMenu.vue
View File

@@ -1,6 +1,11 @@
<template> <template>
<div ref="dropdown" class="popup-container" tabindex="0" :aria-expanded="dropdownVisible"> <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> <slot></slot>
</button> </button>
<div <div

1
lib/components/index.js
View File

@@ -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'

2
package.json
View File

@@ -1,7 +1,7 @@
{ {
"name": "omorphia", "name": "omorphia",
"type": "module", "type": "module",
"version": "0.5.0", "version": "0.5.1",
"files": [ "files": [
"dist" "dist"
], ],