mirror of
https://github.com/koel/koel
synced 2024-09-20 06:11:53 +00:00
feat(plus): suggests to show public songs if song list is empty
This commit is contained in:
parent
1f9f053c0d
commit
024db0b988
2 changed files with 21 additions and 12 deletions
|
@ -42,6 +42,14 @@
|
|||
<Icon :icon="faVolumeOff" />
|
||||
</template>
|
||||
Your library is empty.
|
||||
<a
|
||||
role="button"
|
||||
class="d-block secondary"
|
||||
v-if="isPlus && ownSongsOnly"
|
||||
@click.prevent="showSongsFromOthers"
|
||||
>
|
||||
Show public songs from other users?
|
||||
</a>
|
||||
</ScreenEmptyState>
|
||||
</template>
|
||||
</section>
|
||||
|
@ -112,6 +120,11 @@ const sort = async (field: SongListSortField, order: SortOrder) => {
|
|||
await fetchSongs()
|
||||
}
|
||||
|
||||
const showSongsFromOthers = async () => {
|
||||
ownSongsOnly.value = false
|
||||
await fetchSongs()
|
||||
}
|
||||
|
||||
const fetchSongs = async () => {
|
||||
if (!moreSongsAvailable.value || loading.value) return
|
||||
|
||||
|
|
|
@ -1,24 +1,20 @@
|
|||
<template>
|
||||
<span :class="checked && 'checked'">
|
||||
<input :checked="checked" type="checkbox" v-bind="$attrs" @input="onInput">
|
||||
<span :class="value && 'checked'">
|
||||
<input :checked="value" type="checkbox" v-bind="$attrs" v-model="value">
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue'
|
||||
import { computed } from 'vue'
|
||||
|
||||
const props = withDefaults(defineProps<{ modelValue?: any }>(), {
|
||||
modelValue: false
|
||||
})
|
||||
|
||||
const checked = ref(props.modelValue)
|
||||
const props = withDefaults(defineProps<{ modelValue?: any }>(), { modelValue: false })
|
||||
|
||||
const emit = defineEmits<{ (e: 'update:modelValue', value: boolean): void }>()
|
||||
|
||||
const onInput = (event: Event) => {
|
||||
checked.value = (event.target as HTMLInputElement).checked
|
||||
emit('update:modelValue', checked.value)
|
||||
}
|
||||
const value = computed({
|
||||
get: () => props.modelValue,
|
||||
set: value => emit('update:modelValue', value)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
Loading…
Reference in a new issue