114 lines
2.6 KiB
Vue
114 lines
2.6 KiB
Vue
<template>
|
|
<a :href="_path" class="ui-filelink" download>
|
|
<ui-icon :symbol="_icon" class="ui-filelink-icon" :size="22" />
|
|
<p class="ui-filelink-content">
|
|
<span class="ui-filelink-name">{{_name}}</span>
|
|
<span class="ui-filelink-path">{{_visiblePath}}</span>
|
|
</p>
|
|
</a>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
value: String,
|
|
config: Object,
|
|
|
|
name: {
|
|
type: [String, Function],
|
|
default: null
|
|
},
|
|
extension: {
|
|
type: [String, Function],
|
|
default: null
|
|
},
|
|
icon: {
|
|
type: [String, Function],
|
|
default: null
|
|
},
|
|
path: {
|
|
type: [String, Function],
|
|
default: null
|
|
},
|
|
visiblePath: {
|
|
type: [String, Function],
|
|
default: null
|
|
},
|
|
|
|
html: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
render: Function
|
|
},
|
|
|
|
computed: {
|
|
_path()
|
|
{
|
|
return !this.path ? this.value : (typeof this.path === 'function' ? this.path(this.value, this.config.model) : this.path);
|
|
},
|
|
_visiblePath()
|
|
{
|
|
return !this.visiblePath ? this._path : (typeof this.visiblePath === 'function' ? this.visiblePath(this.value, this.config.model) : this.visiblePath);
|
|
},
|
|
_name()
|
|
{
|
|
return !this.name ? '@filelink.defaultName' : (typeof this.name === 'function' ? this.name(this.value, this.config.model) : this.name);
|
|
},
|
|
_extension()
|
|
{
|
|
return !this.extension ? this._visiblePath.split('.').at(-1) : (typeof this.extension === 'function' ? this.extension(this.value, this.config.model) : this.extension);
|
|
},
|
|
_icon()
|
|
{
|
|
return !this.icon ? 'fth-download' : (typeof this.icon === 'function' ? this.icon(this.value, this.config.model) : this.icon);
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.ui-filelink
|
|
{
|
|
border-radius: var(--radius-inner);
|
|
border: 1px solid var(--color-line-dashed);
|
|
//background: var(--color-button-light);
|
|
padding: 16px 24px;
|
|
display: inline-grid;
|
|
grid-template-columns: auto 1fr;
|
|
gap: 22px;
|
|
align-items: center;
|
|
|
|
&:hover
|
|
{
|
|
background: var(--color-button-light);
|
|
border-color: transparent;
|
|
}
|
|
}
|
|
|
|
.ui-filelink-icon
|
|
{
|
|
position: relative;
|
|
top: -2px;
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.ui-filelink-content
|
|
{
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.ui-filelink-name
|
|
{
|
|
color: var(--color-text);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.ui-filelink-path
|
|
{
|
|
color: var(--color-text-dim);
|
|
font-size: var(--font-size-s);
|
|
margin-top: 3px;
|
|
}
|
|
</style> |