@what3words/vue-components - npm Package Compare versions

Comparing version 4.9.2 to 5.0.0-alpha.0

dist/components.d.ts

@@ -1,6 +0,6 @@
-import type { JSX } from '@what3words/javascript-components';
-export declare const What3wordsAddress: import("vue").DefineComponent<JSX.What3wordsAddress & import("./vue-component-lib/utils").InputProps<string | number | boolean>, object, {}, import("vue").ComputedOptions, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<JSX.What3wordsAddress & import("./vue-component-lib/utils").InputProps<string | number | boolean>>, {}>;
-export declare const What3wordsAutosuggest: import("vue").DefineComponent<JSX.What3wordsAutosuggest & import("./vue-component-lib/utils").InputProps<string | number | boolean>, object, {}, import("vue").ComputedOptions, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<JSX.What3wordsAutosuggest & import("./vue-component-lib/utils").InputProps<string | number | boolean>>, {}>;
-export declare const What3wordsMap: import("vue").DefineComponent<JSX.What3wordsMap & import("./vue-component-lib/utils").InputProps<string | number | boolean>, object, {}, import("vue").ComputedOptions, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<JSX.What3wordsMap & import("./vue-component-lib/utils").InputProps<string | number | boolean>>, {}>;
-export declare const What3wordsNotes: import("vue").DefineComponent<JSX.What3wordsNotes & import("./vue-component-lib/utils").InputProps<string | number | boolean>, object, {}, import("vue").ComputedOptions, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<JSX.What3wordsNotes & import("./vue-component-lib/utils").InputProps<string | number | boolean>>, {}>;
-export declare const What3wordsSymbol: import("vue").DefineComponent<JSX.What3wordsSymbol & import("./vue-component-lib/utils").InputProps<string | number | boolean>, object, {}, import("vue").ComputedOptions, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<JSX.What3wordsSymbol & import("./vue-component-lib/utils").InputProps<string | number | boolean>>, {}>;
+import type { JSX } from '@what3words/stencil-components';
+export declare const What3wordsAddress: import("vue").DefineSetupFnComponent<JSX.What3wordsAddress & import("./vue-component-lib/utils").InputProps<string | number | boolean>, {}, {}, JSX.What3wordsAddress & import("./vue-component-lib/utils").InputProps<string | number | boolean> & {}, import("vue").PublicProps>;
+export declare const What3wordsAutosuggest: import("vue").DefineSetupFnComponent<JSX.What3wordsAutosuggest & import("./vue-component-lib/utils").InputProps<string | number | boolean>, {}, {}, JSX.What3wordsAutosuggest & import("./vue-component-lib/utils").InputProps<string | number | boolean> & {}, import("vue").PublicProps>;
+export declare const What3wordsMap: import("vue").DefineSetupFnComponent<JSX.What3wordsMap & import("./vue-component-lib/utils").InputProps<string | number | boolean>, {}, {}, JSX.What3wordsMap & import("./vue-component-lib/utils").InputProps<string | number | boolean> & {}, import("vue").PublicProps>;
+export declare const What3wordsNotes: import("vue").DefineSetupFnComponent<JSX.What3wordsNotes & import("./vue-component-lib/utils").InputProps<string | number | boolean>, {}, {}, JSX.What3wordsNotes & import("./vue-component-lib/utils").InputProps<string | number | boolean> & {}, import("vue").PublicProps>;
+export declare const What3wordsSymbol: import("vue").DefineSetupFnComponent<JSX.What3wordsSymbol & import("./vue-component-lib/utils").InputProps<string | number | boolean>, {}, {}, JSX.What3wordsSymbol & import("./vue-component-lib/utils").InputProps<string | number | boolean> & {}, import("vue").PublicProps>;

dist/components.js

@@ -1,9 +0,3 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.What3wordsSymbol = exports.What3wordsNotes = exports.What3wordsMap = exports.What3wordsAutosuggest = exports.What3wordsAddress = void 0;
-/* eslint-disable */
-/* tslint:disable */
-/* auto-generated vue proxies */
-const utils_1 = require("./vue-component-lib/utils");
-exports.What3wordsAddress = (0, utils_1.defineContainer)('what3words-address', undefined, [
+import { defineContainer } from './vue-component-lib/utils';
+export const What3wordsAddress = defineContainer('what3words-address', undefined, [
     'words',
@@ -19,3 +13,3 @@ 'iconColor',
 ]);
-exports.What3wordsAutosuggest = (0, utils_1.defineContainer)('what3words-autosuggest', undefined, [
+export const What3wordsAutosuggest = defineContainer('what3words-autosuggest', undefined, [
     'callback',
@@ -55,3 +49,3 @@ 'api_key',
 ]);
-exports.What3wordsMap = (0, utils_1.defineContainer)('what3words-map', undefined, [
+export const What3wordsMap = defineContainer('what3words-map', undefined, [
     'api_key',
@@ -97,3 +91,3 @@ 'headers',
 ]);
-exports.What3wordsNotes = (0, utils_1.defineContainer)('what3words-notes', undefined, [
+export const What3wordsNotes = defineContainer('what3words-notes', undefined, [
     'addressFormat',
@@ -122,5 +116,6 @@ 'showHintsTooltip',
 ]);
-exports.What3wordsSymbol = (0, utils_1.defineContainer)('what3words-symbol', undefined, [
+export const What3wordsSymbol = defineContainer('what3words-symbol', undefined, [
     'color',
     'size'
 ]);
+//# sourceMappingURL=components.js.map

dist/index.d.ts

@@ -1,1 +0,2 @@
-export * from './components';
+export * from "./components";
+export * from "./plugin";

dist/index.js

@@ -1,19 +0,3 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const loader_1 = require("@what3words/javascript-components/loader");
-(0, loader_1.applyPolyfills)().then(() => (0, loader_1.defineCustomElements)(window));
-__exportStar(require("./components"), exports);
+export * from "./components";
+export * from "./plugin";
+//# sourceMappingURL=index.js.map

dist/vue-component-lib/utils.d.ts

 export interface InputProps<T> {
     modelValue?: T;
 }
-/**
- * Create a callback to define a Vue component wrapper around a Web Component.
- *
- * @prop name - The component tag name (i.e. `ion-button`)
- * @prop componentProps - An array of properties on the
- * component. These usually match up with the @Prop definitions
- * in each component's TSX file.
- * @prop customElement - An option custom element instance to pass
- * to customElements.define. Only set if `includeImportCustomElements: true` in your config.
- * @prop modelProp - The prop that v-model binds to (i.e. value)
- * @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.
- */
-export declare const defineContainer: <Props, VModelType = string | number | boolean>(name: string, defineCustomElement: any, componentProps?: string[], modelProp?: string, modelUpdateEvent?: string, externalModelUpdateEvent?: string) => import("vue").DefineComponent<Props & InputProps<VModelType>, object, {}, import("vue").ComputedOptions, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<Props & InputProps<VModelType> extends infer T ? T extends Props & InputProps<VModelType> ? T extends import("vue").ComponentPropsOptions<{
-    [x: string]: unknown;
-}> ? import("vue").ExtractPropTypes<T> : T : never : never>, import("vue").ExtractDefaultPropTypes<Props & InputProps<VModelType>>>;
+export declare const defineContainer: <Props, VModelType = string | number | boolean>(name: string, defineCustomElement: any, componentProps?: string[], modelProp?: string, modelUpdateEvent?: string) => import("vue").DefineSetupFnComponent<Props & InputProps<VModelType>, {}, {}, Props & InputProps<VModelType> & {}, import("vue").PublicProps>;

dist/vue-component-lib/utils.js

@@ -1,5 +0,2 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.defineContainer = void 0;
-const vue_1 = require("vue");
+import { defineComponent, getCurrentInstance, h, inject, ref, withDirectives } from 'vue';
 const UPDATE_VALUE_EVENT = 'update:modelValue';
@@ -11,11 +8,2 @@ const MODEL_VALUE = 'modelValue';
 const ARIA_PROP_PREFIX = 'aria';
-/**
- * Starting in Vue 3.1.0, all properties are
- * added as keys to the props object, even if
- * they are not being used. In order to correctly
- * account for both value props and v-model props,
- * we need to check if the key exists for Vue <3.1.0
- * and then check if it is not undefined for Vue >= 3.1.0.
- * See https://github.com/vuejs/vue-next/issues/3889
- */
 const EMPTY_PROP = Symbol();
@@ -30,56 +18,27 @@ const DEFAULT_EMPTY_PROP = { default: EMPTY_PROP };
 };
-/**
- * Create a callback to define a Vue component wrapper around a Web Component.
- *
- * @prop name - The component tag name (i.e. `ion-button`)
- * @prop componentProps - An array of properties on the
- * component. These usually match up with the @Prop definitions
- * in each component's TSX file.
- * @prop customElement - An option custom element instance to pass
- * to customElements.define. Only set if `includeImportCustomElements: true` in your config.
- * @prop modelProp - The prop that v-model binds to (i.e. value)
- * @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.
- */
-const defineContainer = (name, defineCustomElement, componentProps = [], modelProp, modelUpdateEvent, externalModelUpdateEvent) => {
-    /**
-     * Create a Vue component wrapper around a Web Component.
-     * Note: The `props` here are not all properties on a component.
-     * They refer to whatever properties are set on an instance of a component.
-     */
+export const defineContainer = (name, defineCustomElement, componentProps = [], modelProp, modelUpdateEvent) => {
     if (defineCustomElement !== undefined) {
         defineCustomElement();
     }
-    const Container = (0, vue_1.defineComponent)((props, { attrs, slots, emit }) => {
+    const Container = defineComponent((props, { attrs, slots, emit }) => {
         var _a;
         let modelPropValue = props[modelProp];
-        const containerRef = (0, vue_1.ref)();
+        const containerRef = ref();
         const classes = new Set(getComponentClasses(attrs.class));
-        const onVnodeBeforeMount = (vnode) => {
-            // Add a listener to tell Vue to update the v-model
-            if (vnode.el) {
+        const vModelDirective = {
+            created: (el) => {
                 const eventsNames = Array.isArray(modelUpdateEvent) ? modelUpdateEvent : [modelUpdateEvent];
                 eventsNames.forEach((eventName) => {
-                    vnode.el.addEventListener(eventName.toLowerCase(), (e) => {
-                        modelPropValue = (e === null || e === void 0 ? void 0 : e.target)[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);
+                    el.addEventListener(eventName.toLowerCase(), (e) => {
+                        if (e.target.tagName === el.tagName) {
+                            modelPropValue = (e === null || e === void 0 ? void 0 : e.target)[modelProp];
+                            emit(UPDATE_VALUE_EVENT, modelPropValue);
                         }
                     });
                 });
-            }
+            },
         };
-        const currentInstance = (0, vue_1.getCurrentInstance)();
+        const currentInstance = getCurrentInstance();
         const hasRouter = (_a = currentInstance === null || currentInstance === void 0 ? void 0 : currentInstance.appContext) === null || _a === void 0 ? void 0 : _a.provides[NAV_MANAGER];
-        const navManager = hasRouter ? (0, vue_1.inject)(NAV_MANAGER) : undefined;
+        const navManager = hasRouter ? inject(NAV_MANAGER) : undefined;
         const handleRouterLink = (ev) => {
@@ -90,2 +49,3 @@ const { routerLink } = props;
             if (navManager !== undefined) {
+                ev.preventDefault();
                 let navigationPayload = { event: ev };
@@ -122,10 +82,3 @@ for (const key in props) {
                 onClick: handleClick,
-                onVnodeBeforeMount: modelUpdateEvent ? onVnodeBeforeMount : undefined,
             };
-            /**
-             * We can use Object.entries here
-             * to avoid the hasOwnProperty check,
-             * but that would require 2 iterations
-             * where as this only requires 1.
-             */
             for (const key in props) {
@@ -138,8 +91,2 @@ const value = props[key];
             if (modelProp) {
-                /**
-                 * If form value property was set using v-model
-                 * then we should use that value.
-                 * Otherwise, check to see if form value property
-                 * was set as a static value (i.e. no v-model).
-                 */
                 if (props[MODEL_VALUE] !== EMPTY_PROP) {
@@ -152,18 +99,24 @@ propsToAdd = Object.assign(Object.assign({}, propsToAdd), { [modelProp]: props[MODEL_VALUE] });
             }
-            return (0, vue_1.h)(name, propsToAdd, slots.default && slots.default());
+            if (props[ROUTER_LINK_VALUE] !== EMPTY_PROP) {
+                propsToAdd = Object.assign(Object.assign({}, propsToAdd), { href: props[ROUTER_LINK_VALUE] });
+            }
+            const node = h(name, propsToAdd, slots.default && slots.default());
+            return modelProp === undefined ? node : withDirectives(node, [[vModelDirective]]);
         };
     });
-    Container.displayName = name;
-    Container.props = {
-        [ROUTER_LINK_VALUE]: DEFAULT_EMPTY_PROP,
-    };
-    componentProps.forEach((componentProp) => {
-        Container.props[componentProp] = DEFAULT_EMPTY_PROP;
-    });
-    if (modelProp) {
-        Container.props[MODEL_VALUE] = DEFAULT_EMPTY_PROP;
-        Container.emits = [UPDATE_VALUE_EVENT, externalModelUpdateEvent];
+    if (typeof Container !== 'function') {
+        Container.name = name;
+        Container.props = {
+            [ROUTER_LINK_VALUE]: DEFAULT_EMPTY_PROP,
+        };
+        componentProps.forEach((componentProp) => {
+            Container.props[componentProp] = DEFAULT_EMPTY_PROP;
+        });
+        if (modelProp) {
+            Container.props[MODEL_VALUE] = DEFAULT_EMPTY_PROP;
+            Container.emits = [UPDATE_VALUE_EVENT];
+        }
     }
     return Container;
 };
-exports.defineContainer = defineContainer;
+//# sourceMappingURL=utils.js.map

package.json

 {
   "name": "@what3words/vue-components",
-  "version": "4.9.2",
-  "sideEffects": false,
-  "description": "The what3words javascript sdk and web components for vue",
+  "version": "5.0.0-alpha.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
-  "scripts": {
-    "clean": "rm -rf dist",
-    "build": "tsc -p tsconfig.json -outDir dist",
-    "compile": "npm run clean && npm run build",
-    "lint": "tslint './src/**/*.{ts,tsx}'",
-    "lint:fix": "tslint './src/**/*.{ts,tsx}' --fix"
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
   },
-  "peerDependencies": {
-    "vue": ">=3.0.5"
-  },
   "dependencies": {
-    "@what3words/javascript-components": "^4.9.2"
+    "@what3words/stencil-components": "5.0.0-alpha.0"
   },
   "devDependencies": {
-    "@babel/types": "^7.17.0",
-    "@types/googlemaps": "^3.43.3",
-    "@types/node": "^14.14.10",
-    "@what3words/api": "^5.2.1",
-    "tslint": "^6.1.3",
-    "typescript": "^4.9.5",
-    "vue": "^3.0.5"
+    "vue": "3",
+    "@what3words/tsconfig": "0.1.0"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "scripts": {
+    "clean": "pnpm dlx rimraf .turbo node_modules",
+    "prebuild": "pnpm dlx rimraf dist",
+    "build": "npm run tsc",
+    "tsc": "tsc -b . -f"
   }
-}
+}

New alerts

Unpublished package

Supply chain risk

Package version was not found on the registry. It may exist on a different registry and need to be configured to pull from that registry.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

No README

Quality

Package does not have a README. This may indicate a failed publish or a low quality package.

Found 1 instance in 1 package

Unpopular package

Quality

This package is not very popular.

Found 1 instance in 1 package

No contributors or author data

Maintenance

Package does not specify a list of contributors or an author in package.json.

Found 1 instance in 1 package

No License Found

License

(Experimental) License information could not be found.

Found 1 instance in 1 package

Improved metrics

Dependency count

1

decreased by-50%

Dev dependency count

2

decreased by-71.43%

Number of package files

14

increased by27.27%

Number of low license alerts

0

decreased by-100%

Number of medium quality alerts

0

decreased by-100%

Number of lines in readme file

203

increased byInfinity%

Worsened metrics

Total package byte prevSize

22754

decreased by-17.55%

Lines of code

259

decreased by-61.34%

Number of low quality alerts

2

increased by100%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@what3words/stencil-components@5.0.0-alpha.0

• - Removed@what3words/javascript-components@^4.9.2

• - Removed@babel/helper-string-parser@7.25.9(transitive)

• - Removed@babel/helper-validator-identifier@7.25.9(transitive)

• - Removed@babel/parser@7.26.7(transitive)

• - Removed@babel/types@7.26.7(transitive)

• - Removed@googlemaps/js-api-loader@1.16.8(transitive)

• - Removed@jridgewell/sourcemap-codec@1.5.0(transitive)

• - Removed@stencil/core@3.4.2(transitive)

• - Removed@vue/compiler-core@3.5.13(transitive)

• - Removed@vue/compiler-dom@3.5.13(transitive)

• - Removed@vue/compiler-sfc@3.5.13(transitive)

• - Removed@vue/compiler-ssr@3.5.13(transitive)

• - Removed@vue/reactivity@3.5.13(transitive)

• - Removed@vue/runtime-core@3.5.13(transitive)

• - Removed@vue/runtime-dom@3.5.13(transitive)

• - Removed@vue/server-renderer@3.5.13(transitive)

• - Removed@vue/shared@3.5.13(transitive)

• - Removed@what3words/api@5.4.0(transitive)

• - Removed@what3words/javascript-components@4.9.4(transitive)

• - Removedcross-fetch@3.2.0(transitive)

• - Removedcsstype@3.1.3(transitive)

• - Removedentities@4.5.0(transitive)

• - Removedestree-walker@2.0.2(transitive)

• - Removedmagic-string@0.30.17(transitive)

• - Removednanoid@3.3.8(transitive)

• - Removednode-fetch@2.7.0(transitive)

• - Removedpicocolors@1.1.1(transitive)

• - Removedpostcss@8.5.1(transitive)

• - Removedquerystring@0.2.1(transitive)

• - Removedsource-map-js@1.2.1(transitive)

• - Removedtr46@0.0.3(transitive)

• - Removeduuid@8.3.2(transitive)

• - Removedvue@3.5.13(transitive)

• - Removedwebidl-conversions@3.0.1(transitive)

• - Removedwhatwg-url@5.0.0(transitive)