BpClickable is a renderless vue component for making a larger, parent element work as a link in places where it’s not semantic or appropriate to simply use an <a> tag.

BpClickable exposes once method to its slot, click, that should be called and passed both the click event as we ll as reference to the actual <a> element. For example,

<bp-clickable v-slot="{ click }">
    <div @click="click($event, $refs.link)">
        <!-- ... -->
        <a ref="link" href="...">...</a>
    </div>
</bp-clickable>
<bp-clickable selector=".card__action">
    <div class=" card -wide -clickable">
        <div class="card__container">
            <div class="card__background">
                <picture class="">
                    <img src="data:image/svg+xml;utf8,<svg xmlns=&quot;http://www.w3.org/2000/svg&quot; height=&quot;1920&quot; width=&quot;1920&quot;></svg>" alt="Placeholder Image" class="lazyload  card__backgroundImg" data-srcset="https://placeimg.com/640/640 640w, https://placeimg.com/1000/1000 1024w" data-sizes="auto" />
                </picture>
            </div>
            <h3 class="card__heading">One Great Heading</h3>
            <p class="card__content">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos et voluptatum aliquam neque beatae.
                <a href="#nope">nope</a>
            </p>
            <div class="card__actions -attached">
                <a href="#example" class="card__action button -primary">Learn More</a>
            </div>
        </div>
    </div>

</bp-clickable>

<bp-clickable>
    <div class=" card -wide -clickable">
        <div class="card__container">
            <div class="card__background">
                <picture class="">
                    <img src="data:image/svg+xml;utf8,<svg xmlns=&quot;http://www.w3.org/2000/svg&quot; height=&quot;1920&quot; width=&quot;1920&quot;></svg>" alt="Placeholder Image" class="lazyload  card__backgroundImg" data-srcset="https://placeimg.com/640/640 640w, https://placeimg.com/1000/1000 1024w" data-sizes="auto" />
                </picture>
            </div>
            <h3 class="card__heading">One Great Heading</h3>
            <p class="card__content">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos et voluptatum aliquam neque beatae.
                <a href="#nope2">nope</a>
            </p>
            <div class="card__actions -attached">
                <a data-clickable href="#example2" class="card__action button -primary">Learn More</a>
            </div>
        </div>
    </div>

</bp-clickable>
  • Content:
    /**
     * BpClickable is a functional component for making the clickable target for a
     * link or button tied to more elements.
     */
    const BpClickable = function (props, { slots }) {
        const click = () => querySelector(props.selector)?.click()
        const vnodes = slots.default({ click })
    
        const querySelector = selector => {
            for (const vnode of vnodes) {
                const el = vnode.el?.querySelector?.(selector)
                if (el) {
                    return el
                }
            }
        }
    
        vnodes.forEach(vnode => {
            vnode.props.onClick = click
        })
    
        return vnodes
    }
    
    BpClickable.props = {
        selector: {
            type: String,
            default: () => '[data-clickable]',
        },
    }
    
    export default BpClickable
    
  • URL: /components/raw/clickable/BpClickable.js
  • Filesystem Path: resources/styles/utilities/clickable/BpClickable.js
  • Size: 737 Bytes