Mirrors/koel
2
0
Fork 0
mirror of https://github.com/koel/koel synced 2024-12-01 00:09:17 +00:00
Code Issues Projects Releases Packages Wiki Activity

refactor: better binding for ViewModeSwitch

Browse source
This commit is contained in:
Phan An 2022-04-30 00:06:13 +02:00
parent e7c3d603b5
commit 66d1008345
No known key found for this signature in database
GPG key ID: A81E4477F0BB6FDC
3 changed files with 15 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
resources/assets/js/components/screens/AlbumListScreen.vue
View file

@ -3,7 +3,7 @@
<ScreenHeader>
Albums
<template v-slot:controls>
<ViewModeSwitch v-model="viewMode" :value="viewMode"/>
<ViewModeSwitch v-model:mode="viewMode"/>
</template>
</ScreenHeader>

2
resources/assets/js/components/screens/ArtistListScreen.vue
View file

@ -3,7 +3,7 @@
<ScreenHeader>
Artists
<template v-slot:controls>
<ViewModeSwitch v-model="viewMode" :value="viewMode"/>
<ViewModeSwitch v-model:mode="viewMode"/>
</template>
</ScreenHeader>

28
resources/assets/js/components/ui/ViewModeSwitch.vue
View file

@ -1,23 +1,23 @@
<template>
<span class="view-modes">
<label
:class="{ active: value === 'thumbnails' }"
class="thumbnails"
:class="{ active: modelValue === 'thumbnails' }"
title="View as thumbnails"
data-test="view-mode-thumbnail"
title="View as thumbnails"
>
<input class="hidden" type="radio" value="thumbnails" v-model="modelValue" @input="onInput">
<input v-model="value" class="hidden" name="view-mode" type="radio" value="thumbnails">
<i class="fa fa-th-large"></i>
<span class="hidden">View as thumbnails</span>
</label>
<label
:class="{ active: value === 'list' }"
class="list"
:class="{ active: modelValue === 'list' }"
title="View as list"
data-test="view-mode-list"
title="View as list"
>
<input class="hidden" type="radio" value="list" v-model="modelValue" @input="onInput">
<input v-model="value" class="hidden" name="view-mode" type="radio" value="list">
<i class="fa fa-list"></i>
<span class="hidden">View as list</span>
</label>
@ -25,17 +25,15 @@
</template>
<script lang="ts" setup>
import { ref, toRefs, watchEffect } from 'vue'
import { computed} from 'vue'
const props = withDefaults(defineProps<{ value?: ArtistAlbumViewMode }>(), { value: 'thumbnails' })
const { value } = toRefs(props)
const props = withDefaults(defineProps<{ mode?: ArtistAlbumViewMode }>(), { mode: 'thumbnails' })
const emit = defineEmits(['update:mode'])
let modelValue = ref<ArtistAlbumViewMode>()
watchEffect(() => (modelValue.value = value.value))
const emit = defineEmits(['update:modelValue'])
const onInput = (e: InputEvent) => emit('update:modelValue', (e.target as HTMLInputElement).value)
const value = computed({
get: () => props.mode,
set: value => emit('update:mode', value)
})
</script>
<style lang="scss" scoped>