Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@stencil/vue-output-target

Package Overview
Dependencies
Maintainers
2
Versions
159
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@stencil/vue-output-target - npm Package Compare versions

Comparing version 0.8.6 to 0.8.7

3

dist/generate-vue-component.js

@@ -48,5 +48,2 @@ import { dashToPascalCase } from './utils';

templateString += `'${targetProp}', '${findModel.event}'`;
if (findModel.externalEvent) {
templateString += `, '${findModel.externalEvent}'`;
}
}

@@ -53,0 +50,0 @@ templateString += `);\n`;

@@ -136,5 +136,2 @@ 'use strict';

templateString += `'${targetProp}', '${findModel.event}'`;
if (findModel.externalEvent) {
templateString += `, '${findModel.externalEvent}'`;
}
}

@@ -141,0 +138,0 @@ templateString += `);\n`;

@@ -127,5 +127,2 @@ import path from 'path';

templateString += `'${targetProp}', '${findModel.event}'`;
if (findModel.externalEvent) {
templateString += `, '${findModel.externalEvent}'`;
}
}

@@ -132,0 +129,0 @@ templateString += `);\n`;

@@ -16,3 +16,2 @@ export interface OutputTargetVue {

targetAttr: string;
externalEvent?: string;
}

@@ -19,0 +18,0 @@ export interface PackageJSON {

2

package.json
{
"name": "@stencil/vue-output-target",
"version": "0.8.6",
"version": "0.8.7",
"description": "Vue output target for @stencil/core components.",

@@ -5,0 +5,0 @@ "main": "dist/index.cjs.js",

@@ -75,13 +75,2 @@ # @stencil/vue-output-target

targetAttr: string;
/**
* (optional) The event to emit from the Vue component
* wrapper. When listening directly to the `event` emitted
* from the Web Component, the `v-model` reference has not
* yet had a chance to update. By setting `externalEvent`,
* your Web Component can emit `event`, the Vue output target
* can update the `v-model` reference, and then emit `externalEvent`,
* notifying the end user that `v-model` has changed. Defaults to `event`.
*/
externalEvent?: string;
}

@@ -98,4 +87,3 @@ ```

elements: ['my-input', 'my-textarea'],
event: 'v-on-change',
externalEvent: 'on-change',
event: 'on-change',
targetAttr: 'value'

@@ -102,0 +90,0 @@ }

// @ts-nocheck
// It's easier and safer for Volar to disable typechecking and let the return type inference do its job.
import { VNode, defineComponent, getCurrentInstance, h, inject, ref, Ref } from 'vue';
import { defineComponent, getCurrentInstance, h, inject, ref, Ref, withDirectives } from 'vue';

@@ -56,4 +56,2 @@ export interface InputProps<T> {

* @prop modelUpdateEvent - The event that is fired from your Web Component when the value changes (i.e. ionChange)
* @prop externalModelUpdateEvent - The external event to fire from your Vue component when modelUpdateEvent fires. This is used for ensuring that v-model references have been
* correctly updated when a user's event callback fires.
*/

@@ -65,4 +63,3 @@ export const defineContainer = <Props, VModelType = string | number | boolean>(

modelProp?: string,
modelUpdateEvent?: string,
externalModelUpdateEvent?: string
modelUpdateEvent?: string
) => {

@@ -83,25 +80,23 @@ /**

const classes = new Set(getComponentClasses(attrs.class));
const onVnodeBeforeMount = (vnode: VNode) => {
// Add a listener to tell Vue to update the v-model
if (vnode.el) {
/**
* This directive is responsible for updating any reactive
* reference associated with v-model on the component.
* This code must be run inside of the "created" callback.
* Since the following listener callbacks as well as any potential
* event callback defined in the developer's app are set on
* the same element, we need to make sure the following callbacks
* are set first so they fire first. If the developer's callback fires first
* then the reactive reference will not have been updated yet.
*/
const vModelDirective = {
created: (el: HTMLElement) => {
const eventsNames = Array.isArray(modelUpdateEvent) ? modelUpdateEvent : [modelUpdateEvent];
eventsNames.forEach((eventName: string) => {
vnode.el!.addEventListener(eventName.toLowerCase(), (e: Event) => {
el.addEventListener(eventName.toLowerCase(), (e: Event) => {
modelPropValue = (e?.target as any)[modelProp];
emit(UPDATE_VALUE_EVENT, modelPropValue);
/**
* We need to emit the change event here
* rather than on the web component to ensure
* that any v-model bindings have been updated.
* Otherwise, the developer will listen on the
* native web component, but the v-model will
* not have been updated yet.
*/
if (externalModelUpdateEvent) {
emit(externalModelUpdateEvent, e);
}
});
});
}
},
};

@@ -152,3 +147,2 @@

onClick: handleClick,
onVnodeBeforeMount: modelUpdateEvent ? onVnodeBeforeMount : undefined,
};

@@ -189,3 +183,8 @@

return h(name, propsToAdd, slots.default && slots.default());
/**
* vModelDirective is only needed on components that support v-model.
* As a result, we conditionally call withDirectives with v-model components.
*/
const node = h(name, propsToAdd, slots.default && slots.default());
return modelProp === undefined ? node : withDirectives(node, [[vModelDirective]]);
};

@@ -207,3 +206,3 @@ });

Container.props[MODEL_VALUE] = DEFAULT_EMPTY_PROP;
Container.emits = [UPDATE_VALUE_EVENT, externalModelUpdateEvent];
Container.emits = [UPDATE_VALUE_EVENT];
}

@@ -210,0 +209,0 @@ }

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc