104 lines
1.9 KiB
Vue
104 lines
1.9 KiB
Vue
<template>
|
|
<button
|
|
class="directory-button"
|
|
:class="component.cssClass"
|
|
@click="navigateToDirectory"
|
|
>
|
|
<span
|
|
class="icon"
|
|
v-html="unicodeIcon"
|
|
/>
|
|
<span class="title">{{ component.title }}</span>
|
|
</button>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { useRouter } from 'vue-router'
|
|
import { computed } from 'vue'
|
|
|
|
const router = useRouter()
|
|
|
|
const props = defineProps({
|
|
component: {
|
|
type: Object,
|
|
required: true
|
|
}
|
|
})
|
|
|
|
function getUnicodeIcon (icon) {
|
|
if (icon === '' || !icon) {
|
|
return '📁' // Default folder icon
|
|
} else {
|
|
return unescape(icon)
|
|
}
|
|
}
|
|
|
|
const unicodeIcon = computed(() => {
|
|
return getUnicodeIcon(props.component.icon)
|
|
})
|
|
|
|
function navigateToDirectory () {
|
|
const params = { title: props.component.title }
|
|
|
|
if (props.component.entityType && props.component.entityKey) {
|
|
params.entityType = props.component.entityType
|
|
params.entityKey = props.component.entityKey
|
|
}
|
|
|
|
router.push({ name: 'Dashboard', params })
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
|
|
@layer components {
|
|
.directory-button {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-grow: 1;
|
|
justify-content: center;
|
|
padding: 0.5em;
|
|
box-shadow: 0 0 .6em #aaa;
|
|
background-color: #fff;
|
|
border-radius: .7em;
|
|
border: 1px solid #ccc;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
font-size: .85em;
|
|
}
|
|
|
|
.directory-button:hover {
|
|
background-color: #f5f5f5;
|
|
border-color: #999;
|
|
}
|
|
|
|
.directory-button .icon {
|
|
font-size: 3em;
|
|
flex-grow: 1;
|
|
align-content: center;
|
|
}
|
|
|
|
.directory-button .title {
|
|
font-weight: 500;
|
|
padding: 0.2em;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
.directory-button {
|
|
box-shadow: 0 0 .6em #000;
|
|
background-color: #111;
|
|
border-color: #000;
|
|
color: #fff;
|
|
}
|
|
|
|
.directory-button:hover {
|
|
background-color: #222;
|
|
border-color: #000;
|
|
box-shadow: 0 0 6px #444;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
|
|
</style>
|