npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

vue-vnode-syringe

v3.1.1

Published

Add attributes and event-listeners to <slot> content

Downloads

871

Readme

:syringe: vNode Syringe Latest version Monthly downloads Install size Bundle size

Add attributes and event-listeners to <slot> content.

Supports key, class/style, attrs, props & listeners!

<template>
    <div>
        <vnode-syringe
            class="new-class"
            @click="handleClick"
        >
            <slot />   ⬅ The class and event-listener gets added to every element passed in
        </vnode-syringe>
    </div>
</template>

🙋‍♂️ Why?

  • 🔥 Set or overwrite attributes & event-listeners on content received from the <slot>!
  • 🧠 Smart merging strategies Pick between merging, overwriting, or falling-back!
  • 🐥 Tiny 1.05 KB minzipped!

🚀 Install

npm i vue-vnode-syringe

💠 Merging strategies

Fallback

This is the default behavior. The class new-class and event-listener newOnClick only gets added if there isn't one added yet.

<vnode-syringe
    class="new-class"
    @click="newOnClick"
>
    <slot />
</vnode-syringe>

For example, given the following <slot> content, only the event-listener newOnClick will be added:

<div
	class="some-class"
	<!-- @click="newOnClick" gets added -->
>
    some content
</div>

Overwrite !

Add ! at the end of the attribute or event-listener to overwrite what exists.

<vnode-syringe
    class!="new-class"
    @click!="newOnClick"
>
    <slot />
</vnode-syringe>

For example, given the following <slot> content, both the class and event-listener will overwrite the existing class and event-listener.

<div
    class="some-class" <!-- becomes "new-class" -->
    @click="existing" <!-- becomes "newOnClick" -->
>
    some content
</div>

Merge &

Add & at the end of the attribute or event-listener to merge with what exists.

<vnode-syringe
    class&="new-class"
    @click&="newOnClick"
>
    <slot />
</vnode-syringe>

For example, given the following <slot> content, both the class and event-listener will merge with the existing class and event-listener. When merging event-listeners, both event-listeners will be called.

<div
    class="some-class" <!-- becomes "some-class new-class" -->
    @click="existing" <!-- becomes "existing(); newOnClick()" -->
>
    some content
</div>

👨🏻‍🏫 Examples

In this demo, the class="button-group__button" attribute is passed down to all of its <slot> content.

ButtonGroup.vue

<template>
    <div class="button-group">
        <vnode-syringe
            class="button-group__button"
        >
            <slot />
        </vnode-syringe>
    </div>
</template>

<style scoped>
.button-group { ... }
.button-group__button { ... }
</style>

Usage.vue

<button-group>
    <button>Button 1</button> <!-- Will render with the `button-group__button` class -->
    <button>Button 2</button> <!-- Will render with the `button-group__button` class -->
    <button>Button 3</button> <!-- Will render with the `button-group__button` class -->
</button-group>

By default, vNode Syringe only adds the attribute/event-listener if it doesn't already exist. To merge with or overwrite the existing one, use the & (merge) or ! (overwrite) suffix.

ButtonGroup.vue

<template>
    <div class="button-group">
        <vnode-syringe

            <!-- Merge with existing class -->
            class&="button-group__button"

            <!-- Force all buttons to have type="button" -->
            type!="button"

            <!-- Only gets added if child doesn't specify `disabled` -->
            :disabled="disabled"
        >
            <slot />
        </vnode-syringe>
    </div>
</template>

<script>
export default {
    props: {
        disabled: Boolean
    }
};
</script>

<style scoped>
.button-group { ... }
.button-group__button { ... }
</style>

Usage.vue

<button-group disabled>
    <button

         <!-- Gets overwritten to button button-group__button -->
        class="button"

        <!-- Gets overwritten to type="button" -->
        type="submit"

        <!-- Will be inherit parent's disabled state -->
    >
        Button 1
    </button>

    <button
         <!-- Gets overwritten to button button-group__button -->
        class="button"

        <!-- Won't inherit parent's disabled state -->
        :disabled="false"
    >
        Button 2
    </button>
</button-group>

💁‍♀️ FAQ

How can I add attributes/event-listeners to a specific element in the <slot>?

You can use Subslot to pick out specific elements in the slot.

For example, if you only want to accept <button>s in your slot:

<template>
    <div class="button-group">
        <vnode-syringe
            class&="button-group-item"
            @click="onClick"
        >
            <subslot element="button" />
        </vnode-syringe>
    </div>
</template>

<script>
import Subslot from 'vue-subslot';
import vnodeSyringe from 'vue-vnode-syringe';

export default {
    components: {
        Subslot,
        vnodeSyringe
    },

    ...,

    methods: {
        onClick() {
            ...
        }
    }
};
</script>

👨‍👩‍👧 Related

  • vue-proxi - 💠 Tiny proxy component
  • vue-subslot - 💍 Pick 'n choose what you want from a slot passed into your Vue component
  • vue-pseudo-window - 🖼 Declaratively interface window/document in your Vue template
  • vue-vnode-syringe - render vNodes via component template
  • vue-frag - 🤲 Directive to return multiple root elements