toby/resources/js/Shared/ActiveComponent.js

40 lines
689 B
JavaScript

import { h, ref } from 'vue'
const ActiveComponent = function(props, { attrs, slots }) {
const key = props.pkey
const isActive = ref(false)
function onMouseover() {
console.log('activated ' + key)
isActive.value = true
}
function onMouseleave() {
console.log('disabled ' + key)
isActive.value = false
}
return h(props.as, {
...attrs,
class: 'hello',
onMouseover,
onMouseleave,
}, [
slots,
slots.default({ isActive }),
])
}
ActiveComponent.props = {
as: {
type: String,
default: 'div',
},
pkey: {
type: Number,
required: true,
},
}
export default ActiveComponent