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

Comparing version 0.0.1-dev.11751417912.1d1c2863 to 0.0.1-dev.11753708416.1bc385bb

dist/index.cjs.js

@@ -171,4 +171,5 @@ 'use strict';
         }
+        const targetEventAttr = findModel.eventAttr !== undefined ? `'${findModel.eventAttr}'` : 'undefined';
         templateString += `,\n`;
-        templateString += `'${targetProp}', '${findModel.event}'`;
+        templateString += `'${targetProp}', '${findModel.event}', ${targetEventAttr}`;
     }
@@ -175,0 +176,0 @@ templateString += `)${ssrCondition};\n`;

dist/index.js

@@ -169,4 +169,5 @@ import path from 'node:path';
         }
+        const targetEventAttr = findModel.eventAttr !== undefined ? `'${findModel.eventAttr}'` : 'undefined';
         templateString += `,\n`;
-        templateString += `'${targetProp}', '${findModel.event}'`;
+        templateString += `'${targetProp}', '${findModel.event}', ${targetEventAttr}`;
     }
@@ -173,0 +174,0 @@ templateString += `)${ssrCondition};\n`;

dist/runtime.cjs.js

@@ -134,4 +134,5 @@ 'use strict';
  * @prop modelUpdateEvent - The event that is fired from your Web Component when the value changes (i.e. ionChange)
+ * @prop modelUpdateEventAttribute - Property to read value from when the value changes.
  */
-const defineContainer = (name, defineCustomElement, componentProps = [], emitProps = [], modelProp, modelUpdateEvent) => {
+const defineContainer = (name, defineCustomElement, componentProps = [], emitProps = [], modelProp, modelUpdateEvent, modelUpdateEventAttribute) => {
     /**
@@ -192,3 +193,7 @@ * Create a Vue component wrapper around a Web Component.
                         if (e.target.tagName === el.tagName && modelProp) {
-                            modelPropValue = (e?.target)[modelProp];
+                            const resolvePath = (object, path) => {
+                                return path.split('.').reduce((value, key) => (value !== undefined ? value[key] : undefined), object);
+                            };
+                            const path = (modelUpdateEventAttribute ?? `target.${modelProp}`);
+                            const modelPropValue = resolvePath(e, path);
                             emit(UPDATE_VALUE_EVENT, modelPropValue);
@@ -195,0 +200,0 @@ }

dist/runtime.d.ts

@@ -0,3 +1,3 @@
+import { InputProps } from './types';
 export { defineStencilSSRComponent } from './ssr';
-import { InputProps } from './types';
 /**
@@ -17,4 +17,5 @@ * Create a callback to define a Vue component wrapper around a Web Component.
  * @prop modelUpdateEvent - The event that is fired from your Web Component when the value changes (i.e. ionChange)
+ * @prop modelUpdateEventAttribute - Property to read value from when the value changes.
  */
-export declare const defineContainer: <Props, VModelType = string | number | boolean>(name: string, defineCustomElement: () => void, componentProps?: string[], emitProps?: string[], modelProp?: string, modelUpdateEvent?: string) => import("vue").DefineSetupFnComponent<Props & InputProps<VModelType>, {}, {}, Props & InputProps<VModelType> & {}, import("vue").PublicProps>;
+export declare const defineContainer: <Props, VModelType = string | number | boolean>(name: string, defineCustomElement: () => void, componentProps?: string[], emitProps?: string[], modelProp?: string, modelUpdateEvent?: string, modelUpdateEventAttribute?: string) => import("vue").DefineSetupFnComponent<Props & InputProps<VModelType>, {}, {}, Props & InputProps<VModelType> & {}, import("vue").PublicProps>;
 export * from './types';

dist/runtime.js

@@ -132,4 +132,5 @@ import { defineComponent, useSlots, createSSRApp, compile, ref, onMounted, getCurrentInstance, inject, h, withDirectives } from 'vue';
  * @prop modelUpdateEvent - The event that is fired from your Web Component when the value changes (i.e. ionChange)
+ * @prop modelUpdateEventAttribute - Property to read value from when the value changes.
  */
-const defineContainer = (name, defineCustomElement, componentProps = [], emitProps = [], modelProp, modelUpdateEvent) => {
+const defineContainer = (name, defineCustomElement, componentProps = [], emitProps = [], modelProp, modelUpdateEvent, modelUpdateEventAttribute) => {
     /**
@@ -190,3 +191,7 @@ * Create a Vue component wrapper around a Web Component.
                         if (e.target.tagName === el.tagName && modelProp) {
-                            modelPropValue = (e?.target)[modelProp];
+                            const resolvePath = (object, path) => {
+                                return path.split('.').reduce((value, key) => (value !== undefined ? value[key] : undefined), object);
+                            };
+                            const path = (modelUpdateEventAttribute ?? `target.${modelProp}`);
+                            const modelPropValue = resolvePath(e, path);
                             emit(UPDATE_VALUE_EVENT, modelPropValue);
@@ -193,0 +198,0 @@ }

dist/types.d.ts

@@ -1,3 +0,3 @@
-import type { DefineSetupFnComponent, VNodeProps, AllowedComponentProps, ComponentCustomProps } from 'vue';
-import type { RouteLocationAsRelativeGeneric, RouteLocationAsPathGeneric } from 'vue-router';
+import type { AllowedComponentProps, ComponentCustomProps, DefineSetupFnComponent, VNodeProps } from 'vue';
+import type { RouteLocationAsPathGeneric, RouteLocationAsRelativeGeneric } from 'vue-router';
 /**
@@ -19,3 +19,3 @@ * Options for the Vue Output Target
      * An array of tag names to exclude from generating component wrappers for.
-     * This is helpful when have a custom framework implementation of a specific
+     * This is helpful when you have a custom framework implementation of a specific
      * component or need to extend the base component wrapper behavior.
@@ -50,3 +50,3 @@ */
      * If `true`, the output target will import the custom element instance and register
-     * it with the Custom Elements Registry when the component is imported inside of a
+     * it with the Custom Elements Registry when the component is imported inside a
      * user's app. This can only be used with the [Custom Elements Bundle](https://stenciljs.com/docs/custom-elements)
@@ -65,3 +65,3 @@ * and will not work with lazy loaded components.
      * To enable server side rendering, provide the path to the hydrate module, e.g. `my-component/hydrate`.
-     * By default this value is undefined and server side rendering is disabled.
+     * By default, this value is undefined and server side rendering is disabled.
      */
@@ -74,2 +74,3 @@ hydrateModule?: string;
     targetAttr: string;
+    eventAttr?: string;
 }
@@ -76,0 +77,0 @@ export interface PackageJSON {

package.json

 {
   "name": "@stencil/vue-output-target",
-  "version": "0.0.1-dev.11751417912.1d1c2863",
+  "version": "0.0.1-dev.11753708416.1bc385bb",
   "description": "Vue output target for @stencil/core components.",
@@ -76,3 +76,3 @@ "author": "Ionic Team",
   },
-  "gitHead": "d1c286351b4468fdc6c2032e36ee2dc42e55e9c7"
+  "gitHead": "bc385bb0794e3062bd579669f18bb4f3ccf3aef3"
 }

README.md

@@ -39,5 +39,5 @@ # @stencil/vue-output-target
 | Property                      | Description                                                                                                                                                                                                                                                                                                                      |
-| ----------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+|-------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
 | `componentCorePackage`        | The NPM package name of your Stencil component library. This package is used as a dependency for your Vue wrappers.                                                                                                                                                                                                              |
-| `outDir`                 | The output file of all the component wrappers generated by the output target. This file path should point to a location within your Vue library/project.                                                                                                                                                                         |
+| `outDir`                      | The output file of all the component wrappers generated by the output target. This file path should point to a location within your Vue library/project.                                                                                                                                                                         |
 | `excludeComponents`           | An array of tag names to exclude from generating component wrappers for. This is helpful when have a custom framework implementation of a specific component or need to extend the base component wrapper behavior.                                                                                                              |
@@ -50,2 +50,3 @@ | `componentModels`             | This is an array of `ComponentModelConfig` objects for components that should be integrated with `v-model`.                                                                                                                                                                                                                      |
 | `customElementsDir`           | This is the directory where the custom elements are imported from when using the [Custom Elements Bundle](https://stenciljs.com/docs/custom-elements). Defaults to the `components` directory. Only applies when `includeImportCustomElements` is `true`.                                                                        |
+| `hydrateModule`               | To enable server side rendering, provide the path to the hydrate module, e.g. `my-component/hydrate`. By default, this value is undefined and server side rendering is disabled.                                                                                                                                                 |
 
@@ -77,2 +78,10 @@ ## Interfaces
   targetAttr: string;
+
+
+  /**
+   * The event attribute that should be used
+   * to trigger the `v-model` update with.
+   * Uses dot notation to specify nested properties. (i.e. `detail.value)
+   */
+  eventAttr?: string;
 }
@@ -79,0 +88,0 @@ ```

No alert changes

Improved metrics

Total package byte prevSize

73691

2.6%

Lines of code

1370

1.03%

Number of lines in readme file

101

9.78%

No dependency changes