116 lines
2.2 KiB
Vue
116 lines
2.2 KiB
Vue
<template>
|
|
<ui-overlay-editor class="ui-pagepicker-overlay">
|
|
<template v-slot:header>
|
|
<ui-header-bar :title="config.title" :back-button="false" :close-button="true" />
|
|
</template>
|
|
<template v-slot:footer>
|
|
<ui-button type="light onbg" :label="config.closeLabel" :parent="config.rootId" @click="config.hide"></ui-button>
|
|
</template>
|
|
|
|
<div v-if="opened" class="ui-box ui-pagepicker-overlay-items">
|
|
<ui-tree ref="tree" :get="getItems" :parent="config.rootId" @select="onSelect" />
|
|
</div>
|
|
</ui-overlay-editor>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
import PagesApi from 'zero/api/pages.js'
|
|
|
|
export default {
|
|
|
|
props: {
|
|
model: String,
|
|
config: Object
|
|
},
|
|
|
|
data: () => ({
|
|
opened: false
|
|
}),
|
|
|
|
computed: {
|
|
disabledIds()
|
|
{
|
|
return this.config.disabledIds || [];
|
|
}
|
|
},
|
|
|
|
|
|
mounted()
|
|
{
|
|
setTimeout(() => this.opened = true, 300);
|
|
},
|
|
|
|
|
|
methods: {
|
|
|
|
onSelect(item)
|
|
{
|
|
this.config.confirm(item);
|
|
},
|
|
|
|
// get tree items
|
|
getItems(parent)
|
|
{
|
|
return PagesApi.getChildren(parent, this.model).then(res =>
|
|
{
|
|
res = res.filter(x => x.id !== 'recyclebin');
|
|
|
|
res.forEach(item =>
|
|
{
|
|
if (item.id === this.model)
|
|
{
|
|
item.isSelected = true;
|
|
}
|
|
if (this.disabledIds.indexOf(item.id) > -1)
|
|
{
|
|
item.disabled = true;
|
|
}
|
|
item.hasActions = false;
|
|
});
|
|
|
|
return res;
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.ui-pagepicker-overlay content
|
|
{
|
|
padding-top: 0;
|
|
}
|
|
|
|
.ui-box.ui-pagepicker-overlay-items
|
|
{
|
|
margin: 0;
|
|
padding: 20px 0;
|
|
|
|
.ui-tree-item.is-selected, .ui-tree-item:hover:not(.is-disabled)
|
|
{
|
|
background: var(--color-bg-xxlight);
|
|
}
|
|
|
|
& +.ui-box
|
|
{
|
|
margin-top: var(--padding);
|
|
}
|
|
|
|
.ui-tree-item.is-selected
|
|
{
|
|
&:after
|
|
{
|
|
font-family: "Feather";
|
|
content: "\e83e";
|
|
font-size: 16px;
|
|
color: var(--color-primary);
|
|
}
|
|
|
|
.ui-tree-item-text
|
|
{
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
</style> |