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

Comparing version 0.6.1-dev.11650990404.1c4facf3 to 0.6.1-dev.11650996582.1590f5aa

package.json

 {
   "name": "@stencil/vue-output-target",
-  "version": "0.6.1-dev.11650990404.1c4facf3",
+  "version": "0.6.1-dev.11650996582.1590f5aa",
   "description": "Vue output target for @stencil/core components.",
@@ -52,3 +52,3 @@ "main": "dist/index.cjs.js",
   },
-  "gitHead": "c4facf34607b1500dd33dd5c5d1ba5685edd90d4"
+  "gitHead": "590f5aa3efd440940921bd016f9333acecc92e1d"
 }

vue-component-lib/utils.ts

@@ -34,3 +34,3 @@ import { VNode, defineComponent, getCurrentInstance, h, inject, ref, Ref } from 'vue';
 const getElementClasses = (ref: Ref<HTMLElement | undefined>, componentClasses: Set<string>, defaultClasses: string[] = []) => {
-  return [ ...Array.from(ref.value?.classList || []), ...defaultClasses ]
+  return [...Array.from(ref.value?.classList || []), ...defaultClasses]
     .filter((c: string, i, self) => !componentClasses.has(c) && self.indexOf(c) === i);
@@ -71,111 +71,114 @@ };
 
-  const Container = defineComponent<Props & InputProps>((props: any, { attrs, slots, emit }) => {
-    let modelPropValue = props[modelProp];
-    const containerRef = ref<HTMLElement>();
-    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) {
-        const eventsNames = Array.isArray(modelUpdateEvent) ? modelUpdateEvent : [modelUpdateEvent];
-        eventsNames.forEach((eventName: string) => {
-          vnode.el.addEventListener(eventName.toLowerCase(), (e: Event) => {
-            modelPropValue = (e?.target as any)[modelProp];
-            emit(UPDATE_VALUE_EVENT, modelPropValue);
+  const Container = defineComponent<Props & InputProps>({
+    name: name,
+    setup(props, { attrs, slots, emit }) {
+      let modelPropValue = props[modelProp];
+      const containerRef = ref<HTMLElement>();
+      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) {
+          const eventsNames = Array.isArray(modelUpdateEvent) ? modelUpdateEvent : [modelUpdateEvent];
+          eventsNames.forEach((eventName: string) => {
+            vnode.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);
-            }
+              /**
+               * 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);
+              }
+            });
           });
-        });
+        }
       }
-    };
 
-    const currentInstance = getCurrentInstance();
-    const hasRouter = currentInstance?.appContext?.provides[NAV_MANAGER];
-    const navManager: NavManager | undefined = hasRouter ? inject(NAV_MANAGER) : undefined;
-    const handleRouterLink = (ev: Event) => {
-      const { routerLink } = props;
-      if (routerLink === EMPTY_PROP) return;
+      const currentInstance = getCurrentInstance();
+      const hasRouter = currentInstance?.appContext?.provides[NAV_MANAGER];
+      const navManager: NavManager | undefined = hasRouter ? inject(NAV_MANAGER) : undefined;
+      const handleRouterLink = (ev: Event) => {
+        const { routerLink } = props;
+        if (routerLink === EMPTY_PROP) return;
 
-      if (navManager !== undefined) {
-        let navigationPayload: any = { event: ev };
-        for (const key in props) {
-          const value = props[key];
-          if (props.hasOwnProperty(key) && key.startsWith(ROUTER_PROP_PREFIX) && value !== EMPTY_PROP) {
-            navigationPayload[key] = value;
+        if (navManager !== undefined) {
+          let navigationPayload: any = { event: ev };
+          for (const key in props) {
+            const value = props[key];
+            if (props.hasOwnProperty(key) && key.startsWith(ROUTER_PROP_PREFIX) && value !== EMPTY_PROP) {
+              navigationPayload[key] = value;
+            }
           }
+
+          navManager.navigate(navigationPayload);
+        } else {
+          console.warn('Tried to navigate, but no router was found. Make sure you have mounted Vue Router.');
         }
-
-        navManager.navigate(navigationPayload);
-      } else {
-        console.warn('Tried to navigate, but no router was found. Make sure you have mounted Vue Router.');
       }
-    }
 
-    return () => {
-      modelPropValue = props[modelProp];
+      return () => {
+        modelPropValue = props[modelProp];
 
-      getComponentClasses(attrs.class).forEach(value => {
-        classes.add(value);
-      });
+        getComponentClasses(attrs.class).forEach(value => {
+          classes.add(value);
+        });
 
-      const oldClick = props.onClick;
-      const handleClick = (ev: Event) => {
-        if (oldClick !== undefined) {
-          oldClick(ev);
+        const oldClick = props.onClick;
+        const handleClick = (ev: Event) => {
+          if (oldClick !== undefined) {
+            oldClick(ev);
+          }
+          if (!ev.defaultPrevented) {
+            handleRouterLink(ev);
+          }
         }
-        if (!ev.defaultPrevented) {
-          handleRouterLink(ev);
-        }
-      }
 
-      let propsToAdd: any = {
-        ref: containerRef,
-        class: getElementClasses(containerRef, classes),
-        onClick: handleClick,
-        onVnodeBeforeMount: (modelUpdateEvent) ? onVnodeBeforeMount : undefined
-      };
+        let propsToAdd: any = {
+          ref: containerRef,
+          class: getElementClasses(containerRef, classes),
+          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) {
-        const value = props[key];
-        if (props.hasOwnProperty(key) && value !== EMPTY_PROP) {
-          propsToAdd[key] = value;
-        }
-      }
-
-      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).
+         * We can use Object.entries here
+         * to avoid the hasOwnProperty check,
+         * but that would require 2 iterations
+         * where as this only requires 1.
          */
-        if (props[MODEL_VALUE] !== EMPTY_PROP) {
-          propsToAdd = {
-            ...propsToAdd,
-            [modelProp]: props[MODEL_VALUE]
+        for (const key in props) {
+          const value = props[key];
+          if (props.hasOwnProperty(key) && value !== EMPTY_PROP) {
+            propsToAdd[key] = value;
           }
-        } else if (modelPropValue !== EMPTY_PROP) {
-          propsToAdd = {
-            ...propsToAdd,
-            [modelProp]: modelPropValue
+        }
+
+        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) {
+            propsToAdd = {
+              ...propsToAdd,
+              [modelProp]: props[MODEL_VALUE]
+            }
+          } else if (modelPropValue !== EMPTY_PROP) {
+            propsToAdd = {
+              ...propsToAdd,
+              [modelProp]: modelPropValue
+            }
           }
         }
+
+        return h(name, propsToAdd, slots.default && slots.default());
       }
-
-      return h(name, propsToAdd, slots.default && slots.default());
     }
@@ -182,0 +185,0 @@ });

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

54706

increased by0.4%

Lines of code

1007

increased by0.3%

No dependency changes