koel/resources/assets/js/components/ui/ViewModeSwitch.vue

52 lines
1.5 KiB
Vue
Raw Normal View History

2022-04-15 14:24:30 +00:00
<template>
2024-04-04 22:20:42 +00:00
<span class="flex w-[64px] border border-solid border-white/20 rounded-md overflow-hidden mt-[0.5rem] md:mt-0">
2022-04-15 14:24:30 +00:00
<label
v-koel-tooltip
:class="{ active: value === 'thumbnails' }"
2022-04-15 14:24:30 +00:00
class="thumbnails"
2022-05-03 16:51:59 +00:00
data-testid="view-mode-thumbnail"
title="View as thumbnails"
2022-04-15 14:24:30 +00:00
>
<input v-model="value" class="hidden" name="view-mode" type="radio" value="thumbnails">
2024-10-14 08:25:23 +00:00
<LayoutGridIcon size="16" />
2022-04-15 14:24:30 +00:00
<span class="hidden">View as thumbnails</span>
</label>
<label
v-koel-tooltip
:class="{ active: value === 'list' }"
2022-04-15 14:24:30 +00:00
class="list"
2022-05-03 16:51:59 +00:00
data-testid="view-mode-list"
title="View as list"
2022-04-15 14:24:30 +00:00
>
<input v-model="value" class="hidden" name="view-mode" type="radio" value="list">
2024-10-14 08:25:23 +00:00
<LayoutListIcon size="16" />
2022-04-15 14:24:30 +00:00
<span class="hidden">View as list</span>
</label>
</span>
</template>
2022-04-15 17:00:08 +00:00
<script lang="ts" setup>
2024-10-14 08:25:23 +00:00
import { LayoutGridIcon, LayoutListIcon } from 'lucide-vue-next'
2022-04-30 08:11:01 +00:00
import { computed } from 'vue'
2022-04-15 14:24:30 +00:00
2022-05-29 21:36:45 +00:00
const props = withDefaults(defineProps<{ modelValue?: ArtistAlbumViewMode }>(), { modelValue: 'thumbnails' })
const emit = defineEmits<{ (e: 'update:modelValue', value: ArtistAlbumViewMode): void }>()
2022-04-15 14:24:30 +00:00
const value = computed({
2022-05-29 21:36:45 +00:00
get: () => props.modelValue,
set: value => emit('update:modelValue', value),
})
2022-04-15 14:24:30 +00:00
</script>
2024-04-04 20:13:35 +00:00
<style lang="postcss" scoped>
2024-04-04 22:20:42 +00:00
label {
@apply w-1/2 flex items-center justify-center h-[2rem] mb-0 cursor-pointer;
2022-04-15 14:24:30 +00:00
2024-04-04 22:20:42 +00:00
&.active {
@apply bg-k-text-primary text-k-bg-primary;
2022-04-15 14:24:30 +00:00
}
}
</style>