127 lines
3.7 KiB
Vue
127 lines
3.7 KiB
Vue
<template>
|
|
<el-dialog v-model="jumpModal" width="440px" custom-class="jump-modal">
|
|
<el-form class="jump-form" v-on:submit.prevent="jumpCurrentSelected">
|
|
<div class="channel">
|
|
<input type="text" v-model="inputtedChannel" :placeholder="$t('modals.jump.jump_to')" ref="channelForm" v-focus autofocus />
|
|
<ul class="channel-list">
|
|
<li
|
|
v-for="c in filteredChannel"
|
|
:class="c.name === selectedChannel.name ? 'channel-list-item selected' : 'channel-list-item'"
|
|
@click="jump(c)"
|
|
@mouseover="changeSelected(c)"
|
|
>
|
|
{{ c.name }}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!-- Dummy form to guard submitting with enter -->
|
|
<el-form-item class="hidden">
|
|
<el-input></el-input>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent, computed, watch } from 'vue'
|
|
import { useStore } from '@/store'
|
|
import { MUTATION_TYPES, ACTION_TYPES, Channel } from '@/store/TimelineSpace/Modals/Jump'
|
|
|
|
export default defineComponent({
|
|
name: 'jump',
|
|
setup() {
|
|
const space = 'TimelineSpace/Modals/Jump'
|
|
const store = useStore()
|
|
|
|
const channelList = computed(() =>
|
|
store.state.TimelineSpace.Modals.Jump.defaultChannelList
|
|
.concat(store.state.TimelineSpace.Modals.Jump.tagChannelList)
|
|
.concat(store.state.TimelineSpace.Modals.Jump.listChannelList)
|
|
)
|
|
const selectedChannel = computed(() => store.state.TimelineSpace.Modals.Jump.selectedChannel)
|
|
const inputtedChannel = computed({
|
|
get: () => store.state.TimelineSpace.Modals.Jump.channel,
|
|
set: (value: string) => store.commit(`${space}/${MUTATION_TYPES.UPDATE_CHANNEL}`, value)
|
|
})
|
|
const jumpModal = computed({
|
|
get: () => store.state.TimelineSpace.Modals.Jump.modalOpen,
|
|
set: (value: boolean) => store.commit(`${space}/${MUTATION_TYPES.CHANGE_MODAL}`, value)
|
|
})
|
|
// const shortcutEnabled = computed(() => jumpModal.value)
|
|
const filteredChannel = computed(() =>
|
|
channelList.value.filter(c => c.name.toLowerCase().indexOf(inputtedChannel.value.toLowerCase()) !== -1)
|
|
)
|
|
|
|
watch(inputtedChannel, (_new, _old) => {
|
|
store.commit(`${space}/${MUTATION_TYPES.CHANGE_SELECTED}`, filteredChannel.value[0])
|
|
})
|
|
watch(jumpModal, (newValue, oldValue) => {
|
|
if (!oldValue && newValue) {
|
|
store.dispatch(`${space}/${ACTION_TYPES.SYNC_LIST_CHANNEL}`)
|
|
store.dispatch(`${space}/${ACTION_TYPES.SYNC_TAG_CHANNEL}`)
|
|
} else {
|
|
store.commit(`${space}/${MUTATION_TYPES.UPDATE_CHANNEL}`, '')
|
|
}
|
|
})
|
|
|
|
const changeSelected = (channel: Channel) => {
|
|
store.commit(`${space}/${MUTATION_TYPES.CHANGE_SELECTED}`, channel)
|
|
}
|
|
const jump = (channel: Channel) => {
|
|
store.dispatch(`${space}/${ACTION_TYPES.JUMP}`, channel)
|
|
}
|
|
const jumpCurrentSelected = () => {
|
|
store.dispatch(`${space}/${ACTION_TYPES.JUMP_CURRENT_SELECTED}`)
|
|
}
|
|
|
|
return {
|
|
selectedChannel,
|
|
inputtedChannel,
|
|
jumpModal,
|
|
filteredChannel,
|
|
jump,
|
|
changeSelected,
|
|
jumpCurrentSelected
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.jump-form {
|
|
.channel {
|
|
input {
|
|
font-size: 32px;
|
|
line-height: 54px;
|
|
width: 100%;
|
|
outline: 0;
|
|
border: 1px solid #dcdfe6;
|
|
border-radius: 8px;
|
|
padding: 8px;
|
|
color: #303133;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.channel-list {
|
|
list-style: none;
|
|
font-size: 16px;
|
|
padding: 0;
|
|
|
|
.channel-list-item {
|
|
padding: 4px 8px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.selected {
|
|
background-color: #409eff;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
}
|
|
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
}
|
|
</style>
|