76 lines
1.5 KiB
Vue
76 lines
1.5 KiB
Vue
<template>
|
|
<div class="zone-music plume">
|
|
<div class="pm-field">
|
|
<label for="use-music" data-pm-holder>
|
|
<span :class="{ selected: !withMusic, disabled: withMusic }"
|
|
>focus</span
|
|
>
|
|
<input
|
|
type="checkbox"
|
|
name="use-music"
|
|
id="use-music"
|
|
:checked="withMusic"
|
|
@change="setWithMusic(!withMusic)"
|
|
data-pm-checkbox-toggle
|
|
/>
|
|
<span :class="{ selected: withMusic, disabled: !withMusic }"
|
|
>chill</span
|
|
>
|
|
</label>
|
|
</div>
|
|
<ChilledMusic v-if="withMusic" :play="play" @play="play" @pause="pause" />
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent } from '@vue/composition-api'
|
|
import { useMusic } from '@/hooks/useMusic'
|
|
|
|
export default defineComponent({
|
|
name: 'ZoneMusic',
|
|
components: {
|
|
ChilledMusic: () => import('@/components/ChilledMusic.vue')
|
|
},
|
|
props: {
|
|
play: {
|
|
type: Boolean,
|
|
required: true
|
|
}
|
|
},
|
|
setup(_, { emit }) {
|
|
const { withMusic, setWithMusic } = useMusic()
|
|
|
|
const play = () => {
|
|
emit('play')
|
|
}
|
|
|
|
const pause = () => {
|
|
emit('pause')
|
|
}
|
|
|
|
return { withMusic, setWithMusic, play, pause }
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import '@/styles/variables';
|
|
|
|
label[data-pm-holder] {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin: auto;
|
|
max-width: 300px;
|
|
|
|
span {
|
|
flex: 1;
|
|
&.selected {
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
.disabled {
|
|
color: desaturate($color, 70%);
|
|
}
|
|
</style>
|