wikijs-fork/client/components/common/page-selector.vue

106 lines
2.9 KiB
Vue
Raw Normal View History

2018-09-30 22:19:28 +00:00
<template lang="pug">
v-dialog(v-model='isShown', lazy, max-width='850px')
v-card
.dialog-header
span Select Page Location
v-spacer
v-progress-circular(
indeterminate
color='white'
:size='20'
:width='2'
v-show='searchLoading'
)
.d-flex(style='min-height:400px;')
v-flex(xs4).grey.lighten-3
v-toolbar(color='grey lighten-2', dense, flat)
2018-10-01 02:18:40 +00:00
.body-2.grey--text.text--darken-2 Folders
2018-09-30 22:19:28 +00:00
v-spacer
2018-10-01 02:18:40 +00:00
v-divider.mx-3(vertical)
v-btn(icon): v-icon(color='grey') arrow_upward
2018-09-30 22:19:28 +00:00
v-btn(icon): v-icon(color='grey darken-2') create_new_folder
v-list.grey.lighten-3(dense)
v-list-tile.primary(dark)
v-list-tile-avatar: v-icon folder_open
v-list-tile-title.white--text / (Site Root)
v-divider
v-list-tile
v-list-tile-avatar: v-icon folder
v-list-tile-title Folder B
v-flex(xs8)
v-toolbar(color='grey lighten-4', dense, flat)
2018-10-01 02:18:40 +00:00
.body-2.grey--text.text--darken-2 Pages
v-divider.ml-4(vertical)
v-text-field(
prepend-inner-icon='search'
label='Search...'
hide-details
solo
flat
background-color='grey lighten-4'
clearable
)
v-divider.mx-3(vertical)
2018-09-30 22:19:28 +00:00
v-btn(icon): v-icon(color='grey') forward
v-btn(icon): v-icon(color='grey') delete
v-list(dense)
v-list-tile
v-list-tile-avatar: v-icon insert_drive_file
v-list-tile-title File A
v-divider
v-list-tile
v-list-tile-avatar: v-icon insert_drive_file
v-list-tile-title File B
v-divider
v-list-tile
v-list-tile-avatar: v-icon insert_drive_file
v-list-tile-title File C
v-divider
v-list-tile
v-list-tile-avatar: v-icon insert_drive_file
v-list-tile-title File D
v-card-text.grey.lighten-2.pa-2
v-text-field(
solo
hide-details
v-model='location'
2018-10-01 02:18:40 +00:00
flat
prepend-inner-icon='subdirectory_arrow_right'
clearable
2018-09-30 22:19:28 +00:00
)
v-card-chin
v-spacer
v-btn(outline, @click='close') Cancel
v-btn(color='primary')
v-icon(left) check
span Select
</template>
<script>
export default {
props: {
value: {
type: Boolean,
default: false
}
},
data() {
return {
searchLoading: true,
location: '/new-page'
}
},
computed: {
isShown: {
get() { return this.value },
set(val) { this.$emit('input', val) }
}
},
methods: {
close() {
this.isShown = false
}
}
}
</script>