Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/privatenumber/vue-vnode-syringe
🧬 Add attributes and event-listeners to <slot> content 💉
https://github.com/privatenumber/vue-vnode-syringe
attributes event-listeners merge mutate overwrite props slot vnode vnode-syringe vue
Last synced: 18 days ago
JSON representation
🧬 Add attributes and event-listeners to <slot> content 💉
- Host: GitHub
- URL: https://github.com/privatenumber/vue-vnode-syringe
- Owner: privatenumber
- License: mit
- Created: 2020-03-15T15:35:21.000Z (over 4 years ago)
- Default Branch: develop
- Last Pushed: 2021-04-05T17:03:02.000Z (over 3 years ago)
- Last Synced: 2024-10-19T01:10:54.728Z (27 days ago)
- Topics: attributes, event-listeners, merge, mutate, overwrite, props, slot, vnode, vnode-syringe, vue
- Language: JavaScript
- Homepage:
- Size: 860 KB
- Stars: 22
- Watchers: 3
- Forks: 1
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# :syringe: vNode Syringe [](https://npm.im/vue-vnode-syringe) [](https://npm.im/vue-vnode-syringe) [](https://packagephobia.now.sh/result?p=vue-vnode-syringe) [](https://bundlephobia.com/result?p=vue-vnode-syringe)
Add _attributes_ and _event-listeners_ to `` content.
Supports `key`, `class`/`style`, `attrs`, `props` & `listeners`!
```html
⬅ The class and event-listener gets added to every element passed in
```
## 🙋♂️ Why?
- **🔥 Set or overwrite attributes & event-listeners** on content received from the ``!
- **🧠 Smart merging strategies** Pick between merging, overwriting, or falling-back!
- **🐥 Tiny** `1.05 KB` minzipped!
## 🚀 Install
```sh
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.
```html
```
For example, given the following `` content, only the event-listener `newOnClick` will be added:
```html
>
some content
```
### Overwrite `!`
Add `!` at the end of the attribute or event-listener to overwrite what exists.
```html
```
For example, given the following `` content, both the class and event-listener will _overwrite_ the existing class and event-listener.
```html
@click="existing"
>
some content
```
### Merge `&`
Add `&` at the end of the attribute or event-listener to merge with what exists.
```html
```
For example, given the following `` 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.
```html
@click="existing"
>
some content
```
## 👨🏻🏫 Examples
Demo 1: Passing down attributes
In this demo, the `class="button-group__button"` attribute is passed down to all of its `` content.
_ButtonGroup.vue_
```html
.button-group { ... }
.button-group__button { ... }
```
_Usage.vue_
```html
Button 1
Button 2
Button 3
```
Demo 2: Merging and Overwriting classes
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_
```html
export default {
props: {
disabled: Boolean
}
};
.button-group { ... }
.button-group__button { ... }
```
_Usage.vue_
```html
class="button"
type="submit"
>
Button 1
class="button"
:disabled="false"
>
Button 2
```
## 💁♀️ FAQ
### How can I add attributes/event-listeners to a specific element in the ``?
You can use [Subslot](https://github.com/privatenumber/vue-subslot) to pick out specific elements in the slot.
For example, if you only want to accept ``s in your slot:
```html
import Subslot from 'vue-subslot';
import vnodeSyringe from 'vue-vnode-syringe';
export default {
components: {
Subslot,
vnodeSyringe
},
...,
methods: {
onClick() {
...
}
}
};
```
## 👨👩👧 Related
- [vue-proxi](https://github.com/privatenumber/vue-proxi) - 💠 Tiny proxy component
- [vue-subslot](https://github.com/privatenumber/vue-subslot) - 💍 Pick 'n choose what you want from a slot passed into your Vue component
- [vue-pseudo-window](https://github.com/privatenumber/vue-pseudo-window) - 🖼 Declaratively interface window/document in your Vue template
- [vue-v](https://github.com/privatenumber/vue-v) - render vNodes via component template
- [vue-frag](https://github.com/privatenumber/vue-frag) - 🤲 Directive to return multiple root elements