@fastkit/vue-utils - npm Package Compare versions

Comparing version 0.6.30 to 0.6.31

dist/vue-utils.cjs.js

@@ -107,51 +107,54 @@ 'use strict';
 
-const navigationableEmits = {
-    click: (ev) => true,
-};
-const navigationableProps = {
-    tag: String,
-    to: [String, Object],
-    replace: Boolean,
-    activeClass: String,
-    exactActiveClass: String,
-    custom: Boolean,
-    ariaCurrentValue: {
-        type: String,
-        default: 'page',
-    },
-    disabled: Boolean,
-    href: String,
-    target: String,
-    rel: String,
-    name: String,
-    charset: String,
-    hreflang: String,
-    download: [Boolean, String],
-    media: String,
-    ping: String,
-    referrerpolicy: String,
-    type: String,
-};
-function useNavigationable(props, fallbackTag, setupContext) {
-    const onClick = setupContext && setupContext.attrs.onClick;
+let _defaultRouterLink = vueRouter.RouterLink;
+function setDefaultRouterLink(Component) {
+    _defaultRouterLink = Component;
+}
+const navigationableInheritProps = {};
+function useNavigationable(setupContext, opts = {}) {
     const ctx = vue.computed(() => {
-        const _fallbackTag = typeof fallbackTag === 'function' ? fallbackTag() : fallbackTag;
-        const { tag, to, href, disabled, name, charset, hreflang } = props;
+        const ctxAttrs = { ...setupContext.attrs };
+        const props = { ...ctxAttrs };
+        let { clickableClassName } = opts;
+        if (typeof clickableClassName === 'function') {
+            clickableClassName = clickableClassName();
+        }
+        delete ctxAttrs.tag;
+        delete ctxAttrs.to;
+        delete ctxAttrs.class;
+        delete ctxAttrs.replace;
+        delete ctxAttrs.activeClass;
+        delete ctxAttrs.exactActiveClass;
+        delete ctxAttrs.ariaCurrentValue;
+        delete ctxAttrs.disabled;
+        delete ctxAttrs.href;
+        delete ctxAttrs.target;
+        delete ctxAttrs.rel;
+        delete ctxAttrs.name;
+        delete ctxAttrs.charset;
+        delete ctxAttrs.hreflang;
+        delete ctxAttrs.download;
+        delete ctxAttrs.media;
+        delete ctxAttrs.ping;
+        delete ctxAttrs.referrerpolicy;
+        delete ctxAttrs.type;
+        delete ctxAttrs.linkFallbackTag;
+        delete ctxAttrs.onClick;
+        const { onClick } = props;
+        const { linkFallbackTag } = props;
+        const fallbackTag = typeof linkFallbackTag === 'function'
+            ? linkFallbackTag()
+            : linkFallbackTag;
+        const { tag, to, href } = props;
         let Tag;
-        const attrs = {
-            disabled,
-            name,
-            charset,
-            hreflang,
-        };
+        const dynamicAttrs = {};
         let clickable = false;
         if (to) {
             clickable = true;
-            Tag = vueRouter.RouterLink;
-            attrs.to = to;
-            attrs.replace = props.replace;
-            attrs.activeClass = props.activeClass;
-            attrs.exactActiveClass = props.exactActiveClass;
-            attrs.custom = props.custom;
-            attrs.ariaCurrentValue = props.ariaCurrentValue;
+            Tag = opts.RouterLink || _defaultRouterLink;
+            dynamicAttrs.to = to;
+            dynamicAttrs.replace = props.replace;
+            dynamicAttrs.activeClass = props.activeClass;
+            dynamicAttrs.exactActiveClass = props.exactActiveClass;
+            dynamicAttrs.custom = props.custom;
+            dynamicAttrs.ariaCurrentValue = props.ariaCurrentValue;
         }
@@ -161,14 +164,14 @@ else if (href) {
             Tag = tag || 'a';
-            attrs.href = href;
-            attrs.target = props.target;
-            attrs.rel = props.rel;
-            attrs.download = props.download;
-            attrs.media = props.media;
-            attrs.ping = props.ping;
-            attrs.referrerpolicy = props.referrerpolicy;
+            dynamicAttrs.href = href;
+            dynamicAttrs.target = props.target;
+            dynamicAttrs.rel = props.rel;
+            dynamicAttrs.download = props.download;
+            dynamicAttrs.media = props.media;
+            dynamicAttrs.ping = props.ping;
+            dynamicAttrs.referrerpolicy = props.referrerpolicy;
         }
         else {
-            Tag = tag || (!!props.type && 'button') || _fallbackTag || 'button';
+            Tag = tag || (!!props.type && 'button') || fallbackTag || 'button';
             if (Tag === 'button') {
-                attrs.type = props.type || 'button';
+                dynamicAttrs.type = props.type || 'button';
             }
@@ -179,2 +182,17 @@ if (Tag === 'a' || Tag === 'button' || typeof onClick === 'function') {
         }
+        const classes = [];
+        if (props.class) {
+            classes.push(props.class);
+        }
+        if (clickable) {
+            classes.push('clickable');
+            if (clickableClassName) {
+                classes.push(clickableClassName);
+            }
+        }
+        const attrs = {
+            ...ctxAttrs,
+            ...dynamicAttrs,
+            class: classes,
+        };
         if (!attrs.disabled) {
@@ -189,3 +207,11 @@ delete attrs.disabled;
         }
-        // const clickable = Tag !== _fallbackTag || typeof onClick === 'function';
+        if (onClick) {
+            attrs.onClick = (ev) => {
+                if (attrs.disabled) {
+                    ev.preventDefault();
+                    return;
+                }
+                onClick(ev);
+            };
+        }
         return {
@@ -195,3 +221,2 @@ Tag,
             clickable,
-            classes: clickable ? ['clickable'] : [],
         };
@@ -538,2 +563,34 @@ });
 
+function _isSlot(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
+}
+
+const VLink = vue.defineComponent({
+  name: 'VLink',
+  inheritAttrs: false,
+  props: { ...navigationableInheritProps,
+    clickableClassName: String
+  },
+
+  setup(props, ctx) {
+    const navigationable = useNavigationable(ctx, {
+      clickableClassName: () => props.clickableClassName
+    });
+    return () => {
+      let _slot;
+
+      const {
+        Tag,
+        attrs
+      } = navigationable.value;
+      return vue.createVNode(Tag, vue.mergeProps(attrs, {
+        "class": "v-link"
+      }), _isSlot(_slot = renderSlotOrEmpty(ctx.slots)) ? _slot : {
+        default: () => [_slot]
+      });
+    };
+  }
+
+});
+
 function normalizeRawClickOutsideDirectiveBindingValue(value) {
@@ -886,2 +943,3 @@ if (value && typeof value === 'object') {
 exports.VExpandTransition = VExpandTransition;
+exports.VLink = VLink;
 exports.bodyScrollLockDirective = bodyScrollLockDirective;
@@ -902,4 +960,3 @@ exports.bodyScrollLockDirectiveArgument = bodyScrollLockDirectiveArgument;
 exports.isSameRoute = isSameRoute;
-exports.navigationableEmits = navigationableEmits;
-exports.navigationableProps = navigationableProps;
+exports.navigationableInheritProps = navigationableInheritProps;
 exports.pickShallowRoute = pickShallowRoute;
@@ -916,2 +973,3 @@ exports.rawNumberProp = rawNumberProp;
 exports.resolveVNodeChildOrSlots = resolveVNodeChildOrSlots;
+exports.setDefaultRouterLink = setDefaultRouterLink;
 exports.state = state$1;
@@ -918,0 +976,0 @@ exports.trailingSlashRE = trailingSlashRE;

dist/vue-utils.cjs.prod.js

@@ -107,51 +107,54 @@ 'use strict';
 
-const navigationableEmits = {
-    click: (ev) => true,
-};
-const navigationableProps = {
-    tag: String,
-    to: [String, Object],
-    replace: Boolean,
-    activeClass: String,
-    exactActiveClass: String,
-    custom: Boolean,
-    ariaCurrentValue: {
-        type: String,
-        default: 'page',
-    },
-    disabled: Boolean,
-    href: String,
-    target: String,
-    rel: String,
-    name: String,
-    charset: String,
-    hreflang: String,
-    download: [Boolean, String],
-    media: String,
-    ping: String,
-    referrerpolicy: String,
-    type: String,
-};
-function useNavigationable(props, fallbackTag, setupContext) {
-    const onClick = setupContext && setupContext.attrs.onClick;
+let _defaultRouterLink = vueRouter.RouterLink;
+function setDefaultRouterLink(Component) {
+    _defaultRouterLink = Component;
+}
+const navigationableInheritProps = {};
+function useNavigationable(setupContext, opts = {}) {
     const ctx = vue.computed(() => {
-        const _fallbackTag = typeof fallbackTag === 'function' ? fallbackTag() : fallbackTag;
-        const { tag, to, href, disabled, name, charset, hreflang } = props;
+        const ctxAttrs = { ...setupContext.attrs };
+        const props = { ...ctxAttrs };
+        let { clickableClassName } = opts;
+        if (typeof clickableClassName === 'function') {
+            clickableClassName = clickableClassName();
+        }
+        delete ctxAttrs.tag;
+        delete ctxAttrs.to;
+        delete ctxAttrs.class;
+        delete ctxAttrs.replace;
+        delete ctxAttrs.activeClass;
+        delete ctxAttrs.exactActiveClass;
+        delete ctxAttrs.ariaCurrentValue;
+        delete ctxAttrs.disabled;
+        delete ctxAttrs.href;
+        delete ctxAttrs.target;
+        delete ctxAttrs.rel;
+        delete ctxAttrs.name;
+        delete ctxAttrs.charset;
+        delete ctxAttrs.hreflang;
+        delete ctxAttrs.download;
+        delete ctxAttrs.media;
+        delete ctxAttrs.ping;
+        delete ctxAttrs.referrerpolicy;
+        delete ctxAttrs.type;
+        delete ctxAttrs.linkFallbackTag;
+        delete ctxAttrs.onClick;
+        const { onClick } = props;
+        const { linkFallbackTag } = props;
+        const fallbackTag = typeof linkFallbackTag === 'function'
+            ? linkFallbackTag()
+            : linkFallbackTag;
+        const { tag, to, href } = props;
         let Tag;
-        const attrs = {
-            disabled,
-            name,
-            charset,
-            hreflang,
-        };
+        const dynamicAttrs = {};
         let clickable = false;
         if (to) {
             clickable = true;
-            Tag = vueRouter.RouterLink;
-            attrs.to = to;
-            attrs.replace = props.replace;
-            attrs.activeClass = props.activeClass;
-            attrs.exactActiveClass = props.exactActiveClass;
-            attrs.custom = props.custom;
-            attrs.ariaCurrentValue = props.ariaCurrentValue;
+            Tag = opts.RouterLink || _defaultRouterLink;
+            dynamicAttrs.to = to;
+            dynamicAttrs.replace = props.replace;
+            dynamicAttrs.activeClass = props.activeClass;
+            dynamicAttrs.exactActiveClass = props.exactActiveClass;
+            dynamicAttrs.custom = props.custom;
+            dynamicAttrs.ariaCurrentValue = props.ariaCurrentValue;
         }
@@ -161,14 +164,14 @@ else if (href) {
             Tag = tag || 'a';
-            attrs.href = href;
-            attrs.target = props.target;
-            attrs.rel = props.rel;
-            attrs.download = props.download;
-            attrs.media = props.media;
-            attrs.ping = props.ping;
-            attrs.referrerpolicy = props.referrerpolicy;
+            dynamicAttrs.href = href;
+            dynamicAttrs.target = props.target;
+            dynamicAttrs.rel = props.rel;
+            dynamicAttrs.download = props.download;
+            dynamicAttrs.media = props.media;
+            dynamicAttrs.ping = props.ping;
+            dynamicAttrs.referrerpolicy = props.referrerpolicy;
         }
         else {
-            Tag = tag || (!!props.type && 'button') || _fallbackTag || 'button';
+            Tag = tag || (!!props.type && 'button') || fallbackTag || 'button';
             if (Tag === 'button') {
-                attrs.type = props.type || 'button';
+                dynamicAttrs.type = props.type || 'button';
             }
@@ -179,2 +182,17 @@ if (Tag === 'a' || Tag === 'button' || typeof onClick === 'function') {
         }
+        const classes = [];
+        if (props.class) {
+            classes.push(props.class);
+        }
+        if (clickable) {
+            classes.push('clickable');
+            if (clickableClassName) {
+                classes.push(clickableClassName);
+            }
+        }
+        const attrs = {
+            ...ctxAttrs,
+            ...dynamicAttrs,
+            class: classes,
+        };
         if (!attrs.disabled) {
@@ -189,3 +207,11 @@ delete attrs.disabled;
         }
-        // const clickable = Tag !== _fallbackTag || typeof onClick === 'function';
+        if (onClick) {
+            attrs.onClick = (ev) => {
+                if (attrs.disabled) {
+                    ev.preventDefault();
+                    return;
+                }
+                onClick(ev);
+            };
+        }
         return {
@@ -195,3 +221,2 @@ Tag,
             clickable,
-            classes: clickable ? ['clickable'] : [],
         };
@@ -538,2 +563,34 @@ });
 
+function _isSlot(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
+}
+
+const VLink = vue.defineComponent({
+  name: 'VLink',
+  inheritAttrs: false,
+  props: { ...navigationableInheritProps,
+    clickableClassName: String
+  },
+
+  setup(props, ctx) {
+    const navigationable = useNavigationable(ctx, {
+      clickableClassName: () => props.clickableClassName
+    });
+    return () => {
+      let _slot;
+
+      const {
+        Tag,
+        attrs
+      } = navigationable.value;
+      return vue.createVNode(Tag, vue.mergeProps(attrs, {
+        "class": "v-link"
+      }), _isSlot(_slot = renderSlotOrEmpty(ctx.slots)) ? _slot : {
+        default: () => [_slot]
+      });
+    };
+  }
+
+});
+
 function normalizeRawClickOutsideDirectiveBindingValue(value) {
@@ -886,2 +943,3 @@ if (value && typeof value === 'object') {
 exports.VExpandTransition = VExpandTransition;
+exports.VLink = VLink;
 exports.bodyScrollLockDirective = bodyScrollLockDirective;
@@ -902,4 +960,3 @@ exports.bodyScrollLockDirectiveArgument = bodyScrollLockDirectiveArgument;
 exports.isSameRoute = isSameRoute;
-exports.navigationableEmits = navigationableEmits;
-exports.navigationableProps = navigationableProps;
+exports.navigationableInheritProps = navigationableInheritProps;
 exports.pickShallowRoute = pickShallowRoute;
@@ -916,2 +973,3 @@ exports.rawNumberProp = rawNumberProp;
 exports.resolveVNodeChildOrSlots = resolveVNodeChildOrSlots;
+exports.setDefaultRouterLink = setDefaultRouterLink;
 exports.state = state$1;
@@ -918,0 +976,0 @@ exports.trailingSlashRE = trailingSlashRE;

dist/vue-utils.d.ts

@@ -0,3 +1,6 @@
+import { AllowedComponentProps } from 'vue';
 import { BaseTransitionProps } from 'vue';
 import { ButtonHTMLAttributes } from '@vue/runtime-dom';
+import { ComponentCustomProps } from 'vue';
+import { ComponentOptionsMixin } from 'vue';
 import { ComponentPropsOptions } from '@vue/runtime-core';
@@ -8,2 +11,3 @@ import { ComponentPropsOptions as ComponentPropsOptions_2 } from 'vue';
 import { CSSProperties } from '@vue/runtime-dom';
+import { CSSProperties as CSSProperties_2 } from 'vue';
 import { Debounced } from '@fastkit/helpers';
@@ -33,2 +37,3 @@ import { DefineComponent } from 'vue';
 import type { RouteRecordNormalized } from 'vue-router';
+import { RouterLink } from 'vue-router';
 import { RouterLinkProps } from 'vue-router';
@@ -45,2 +50,3 @@ import { SetupContext } from 'vue';
 import { VNodeChild as VNodeChild_2 } from 'vue';
+import { VNodeProps } from 'vue';
 import type { VNodeTypes } from '@vue/runtime-core';
@@ -269,34 +275,35 @@ import { WatchCallback } from 'vue';
     Tag: NavigationableTag;
-    attrs: NavigationableAttrs;
-    classes: string[];
+    attrs: Record<string, unknown>;
     clickable: boolean;
 }
 
-export declare const navigationableEmits: {
-    click: (ev: MouseEvent) => boolean;
-};
+export declare type NavigationableInheritProps = ExtractPropTypes<typeof navigationableInheritProps>;
 
-export declare const navigationableProps: {
-    readonly tag: StringConstructor;
-    readonly to: PropType_2<RouteLocationRaw>;
-    readonly replace: BooleanConstructor;
-    readonly activeClass: StringConstructor;
-    readonly exactActiveClass: StringConstructor;
-    readonly custom: BooleanConstructor;
-    readonly ariaCurrentValue: {
-        readonly type: PropType_2<"page" | "step" | "location" | "date" | "time" | "true" | "false" | undefined>;
-        readonly default: "page";
+export declare const navigationableInheritProps: {
+    tag: PropType_2<string>;
+    class: PropType_2<any>;
+    style: PropType_2<CSSProperties_2>;
+    to: PropType_2<RouteLocationRaw>;
+    replace: PropType_2<boolean>;
+    activeClass: PropType_2<string>;
+    exactActiveClass: PropType_2<string>;
+    custom: PropType_2<boolean>;
+    ariaCurrentValue: {
+        type: PropType_2<RouterLinkProps['ariaCurrentValue']>;
+        default: 'page';
     };
-    readonly disabled: BooleanConstructor;
-    readonly href: StringConstructor;
-    readonly target: StringConstructor;
-    readonly rel: StringConstructor;
-    readonly name: StringConstructor;
-    readonly charset: StringConstructor;
-    readonly hreflang: StringConstructor;
-    readonly download: PropType_2<string | boolean>;
-    readonly media: StringConstructor;
-    readonly ping: StringConstructor;
-    readonly referrerpolicy: StringConstructor;
-    readonly type: PropType_2<"submit" | "reset" | "button" | undefined>;
+    disabled: PropType_2<boolean>;
+    href: PropType_2<string>;
+    target: PropType_2<string>;
+    rel: PropType_2<string>;
+    name: PropType_2<string>;
+    charset: PropType_2<string>;
+    hreflang: PropType_2<string>;
+    download: PropType_2<boolean | string>;
+    media: PropType_2<string>;
+    ping: PropType_2<string>;
+    referrerpolicy: PropType_2<string>;
+    type: PropType_2<ButtonHTMLAttributes['type']>;
+    linkFallbackTag: PropType_2<string | (() => string | undefined)>;
+    onClick: PropType_2<(ev: MouseEvent) => any>;
 };
@@ -413,2 +420,4 @@
 
+export declare function setDefaultRouterLink(Component: typeof RouterLink): void;
+
 export declare const state: {
@@ -444,4 +453,9 @@ avairable: boolean;
 
-export declare function useNavigationable(props: ExtractPropTypes<typeof navigationableProps>, fallbackTag?: string | (() => string | undefined), setupContext?: SetupContext): ComputedRef<NavigationableContext>;
+export declare function useNavigationable(setupContext: SetupContext<any>, opts?: UseNavigationableOptions): ComputedRef<NavigationableContext>;
 
+export declare interface UseNavigationableOptions {
+    clickableClassName?: string | (() => string | undefined);
+    RouterLink?: typeof RouterLink;
+}
+
 export declare function useVisibility(opts?: UseVisibilityOptions): UseVisibilityRef;
@@ -483,2 +497,85 @@
 
+export declare const VLink: DefineComponent<{
+    clickableClassName: StringConstructor;
+    tag: PropType_2<string>;
+    class: PropType_2<any>;
+    style: PropType_2<CSSProperties_2>;
+    to: PropType_2<RouteLocationRaw>;
+    replace: PropType_2<boolean>;
+    activeClass: PropType_2<string>;
+    exactActiveClass: PropType_2<string>;
+    custom: PropType_2<boolean>;
+    ariaCurrentValue: {
+        type: PropType_2<"page" | "step" | "location" | "date" | "time" | "true" | "false" | undefined>;
+        default: "page";
+    };
+    disabled: PropType_2<boolean>;
+    href: PropType_2<string>;
+    target: PropType_2<string>;
+    rel: PropType_2<string>;
+    name: PropType_2<string>;
+    charset: PropType_2<string>;
+    hreflang: PropType_2<string>;
+    download: PropType_2<string | boolean>;
+    media: PropType_2<string>;
+    ping: PropType_2<string>;
+    referrerpolicy: PropType_2<string>;
+    type: PropType_2<"submit" | "reset" | "button" | undefined>;
+    linkFallbackTag: PropType_2<string | (() => string | undefined)>;
+    onClick: PropType_2<(ev: MouseEvent) => any>;
+}, () => JSX.Element, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, Record<string, any>, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<{
+    clickableClassName?: unknown;
+    tag?: unknown;
+    class?: unknown;
+    style?: unknown;
+    to?: unknown;
+    replace?: unknown;
+    activeClass?: unknown;
+    exactActiveClass?: unknown;
+    custom?: unknown;
+    ariaCurrentValue?: unknown;
+    disabled?: unknown;
+    href?: unknown;
+    target?: unknown;
+    rel?: unknown;
+    name?: unknown;
+    charset?: unknown;
+    hreflang?: unknown;
+    download?: unknown;
+    media?: unknown;
+    ping?: unknown;
+    referrerpolicy?: unknown;
+    type?: unknown;
+    linkFallbackTag?: unknown;
+    onClick?: unknown;
+} & {
+    ariaCurrentValue: "page" | "step" | "location" | "date" | "time" | "true" | "false" | undefined;
+} & {
+    type?: "submit" | "reset" | "button" | undefined;
+    onClick?: ((ev: MouseEvent) => any) | undefined;
+    name?: string | undefined;
+    replace?: boolean | undefined;
+    clickableClassName?: string | undefined;
+    tag?: string | undefined;
+    class?: any;
+    style?: CSSProperties_2 | undefined;
+    to?: RouteLocationRaw | undefined;
+    activeClass?: string | undefined;
+    exactActiveClass?: string | undefined;
+    custom?: boolean | undefined;
+    disabled?: boolean | undefined;
+    href?: string | undefined;
+    target?: string | undefined;
+    rel?: string | undefined;
+    charset?: string | undefined;
+    hreflang?: string | undefined;
+    download?: string | boolean | undefined;
+    media?: string | undefined;
+    ping?: string | undefined;
+    referrerpolicy?: string | undefined;
+    linkFallbackTag?: string | (() => string | undefined) | undefined;
+}>, {
+    ariaCurrentValue: "page" | "step" | "location" | "date" | "time" | "true" | "false" | undefined;
+}>;
+
 export declare type VNodeChildOrSlot<Prop extends any = any> = VNodeChild | TypedSlot<Prop>;
@@ -485,0 +582,0 @@

dist/vue-utils.esm-bundler.js

@@ -1,2 +0,2 @@
-import { Comment, Text, computed, BaseTransition, h, Transition, onBeforeMount, onBeforeUnmount, reactive, watch, nextTick } from 'vue';
+import { Comment, Text, computed, BaseTransition, h, Transition, onBeforeMount, onBeforeUnmount, reactive, defineComponent, createVNode, mergeProps, isVNode, watch, nextTick } from 'vue';
 import { RouterLink } from 'vue-router';
@@ -103,51 +103,54 @@ import { isObjectEqual, IN_WINDOW, addTransitionendEvent, pushDynamicStyle, debounce } from '@fastkit/helpers';
 
-const navigationableEmits = {
-    click: (ev) => true,
-};
-const navigationableProps = {
-    tag: String,
-    to: [String, Object],
-    replace: Boolean,
-    activeClass: String,
-    exactActiveClass: String,
-    custom: Boolean,
-    ariaCurrentValue: {
-        type: String,
-        default: 'page',
-    },
-    disabled: Boolean,
-    href: String,
-    target: String,
-    rel: String,
-    name: String,
-    charset: String,
-    hreflang: String,
-    download: [Boolean, String],
-    media: String,
-    ping: String,
-    referrerpolicy: String,
-    type: String,
-};
-function useNavigationable(props, fallbackTag, setupContext) {
-    const onClick = setupContext && setupContext.attrs.onClick;
+let _defaultRouterLink = RouterLink;
+function setDefaultRouterLink(Component) {
+    _defaultRouterLink = Component;
+}
+const navigationableInheritProps = {};
+function useNavigationable(setupContext, opts = {}) {
     const ctx = computed(() => {
-        const _fallbackTag = typeof fallbackTag === 'function' ? fallbackTag() : fallbackTag;
-        const { tag, to, href, disabled, name, charset, hreflang } = props;
+        const ctxAttrs = { ...setupContext.attrs };
+        const props = { ...ctxAttrs };
+        let { clickableClassName } = opts;
+        if (typeof clickableClassName === 'function') {
+            clickableClassName = clickableClassName();
+        }
+        delete ctxAttrs.tag;
+        delete ctxAttrs.to;
+        delete ctxAttrs.class;
+        delete ctxAttrs.replace;
+        delete ctxAttrs.activeClass;
+        delete ctxAttrs.exactActiveClass;
+        delete ctxAttrs.ariaCurrentValue;
+        delete ctxAttrs.disabled;
+        delete ctxAttrs.href;
+        delete ctxAttrs.target;
+        delete ctxAttrs.rel;
+        delete ctxAttrs.name;
+        delete ctxAttrs.charset;
+        delete ctxAttrs.hreflang;
+        delete ctxAttrs.download;
+        delete ctxAttrs.media;
+        delete ctxAttrs.ping;
+        delete ctxAttrs.referrerpolicy;
+        delete ctxAttrs.type;
+        delete ctxAttrs.linkFallbackTag;
+        delete ctxAttrs.onClick;
+        const { onClick } = props;
+        const { linkFallbackTag } = props;
+        const fallbackTag = typeof linkFallbackTag === 'function'
+            ? linkFallbackTag()
+            : linkFallbackTag;
+        const { tag, to, href } = props;
         let Tag;
-        const attrs = {
-            disabled,
-            name,
-            charset,
-            hreflang,
-        };
+        const dynamicAttrs = {};
         let clickable = false;
         if (to) {
             clickable = true;
-            Tag = RouterLink;
-            attrs.to = to;
-            attrs.replace = props.replace;
-            attrs.activeClass = props.activeClass;
-            attrs.exactActiveClass = props.exactActiveClass;
-            attrs.custom = props.custom;
-            attrs.ariaCurrentValue = props.ariaCurrentValue;
+            Tag = opts.RouterLink || _defaultRouterLink;
+            dynamicAttrs.to = to;
+            dynamicAttrs.replace = props.replace;
+            dynamicAttrs.activeClass = props.activeClass;
+            dynamicAttrs.exactActiveClass = props.exactActiveClass;
+            dynamicAttrs.custom = props.custom;
+            dynamicAttrs.ariaCurrentValue = props.ariaCurrentValue;
         }
@@ -157,14 +160,14 @@ else if (href) {
             Tag = tag || 'a';
-            attrs.href = href;
-            attrs.target = props.target;
-            attrs.rel = props.rel;
-            attrs.download = props.download;
-            attrs.media = props.media;
-            attrs.ping = props.ping;
-            attrs.referrerpolicy = props.referrerpolicy;
+            dynamicAttrs.href = href;
+            dynamicAttrs.target = props.target;
+            dynamicAttrs.rel = props.rel;
+            dynamicAttrs.download = props.download;
+            dynamicAttrs.media = props.media;
+            dynamicAttrs.ping = props.ping;
+            dynamicAttrs.referrerpolicy = props.referrerpolicy;
         }
         else {
-            Tag = tag || (!!props.type && 'button') || _fallbackTag || 'button';
+            Tag = tag || (!!props.type && 'button') || fallbackTag || 'button';
             if (Tag === 'button') {
-                attrs.type = props.type || 'button';
+                dynamicAttrs.type = props.type || 'button';
             }
@@ -175,2 +178,17 @@ if (Tag === 'a' || Tag === 'button' || typeof onClick === 'function') {
         }
+        const classes = [];
+        if (props.class) {
+            classes.push(props.class);
+        }
+        if (clickable) {
+            classes.push('clickable');
+            if (clickableClassName) {
+                classes.push(clickableClassName);
+            }
+        }
+        const attrs = {
+            ...ctxAttrs,
+            ...dynamicAttrs,
+            class: classes,
+        };
         if (!attrs.disabled) {
@@ -185,3 +203,11 @@ delete attrs.disabled;
         }
-        // const clickable = Tag !== _fallbackTag || typeof onClick === 'function';
+        if (onClick) {
+            attrs.onClick = (ev) => {
+                if (attrs.disabled) {
+                    ev.preventDefault();
+                    return;
+                }
+                onClick(ev);
+            };
+        }
         return {
@@ -191,3 +217,2 @@ Tag,
             clickable,
-            classes: clickable ? ['clickable'] : [],
         };
@@ -534,2 +559,34 @@ });
 
+function _isSlot(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
+}
+
+const VLink = defineComponent({
+  name: 'VLink',
+  inheritAttrs: false,
+  props: { ...navigationableInheritProps,
+    clickableClassName: String
+  },
+
+  setup(props, ctx) {
+    const navigationable = useNavigationable(ctx, {
+      clickableClassName: () => props.clickableClassName
+    });
+    return () => {
+      let _slot;
+
+      const {
+        Tag,
+        attrs
+      } = navigationable.value;
+      return createVNode(Tag, mergeProps(attrs, {
+        "class": "v-link"
+      }), _isSlot(_slot = renderSlotOrEmpty(ctx.slots)) ? _slot : {
+        default: () => [_slot]
+      });
+    };
+  }
+
+});
+
 function normalizeRawClickOutsideDirectiveBindingValue(value) {
@@ -875,2 +932,2 @@ if (value && typeof value === 'object') {
 
-export { BODY_SCROLL_LOCK_ATTRIBUTE, BODY_SCROLL_LOCK_SCROLLER_ATTRIBUTE, BooleanishPropOption, ClickOutsideDirectiveElementSymbol, LocationService, NumberishPropOption, VExpandTransition, bodyScrollLockDirective, bodyScrollLockDirectiveArgument, cleanupEmptyVNodeChild, clickOutsideDirective, clickOutsideDirectiveArgument, createJavaScriptTransition, createPropsOptions, defineSlotsProps, extractRouteMatchedItems, findVNodeChild, getMergedRouteQuery, getQueryMergedLocation, getRouteMatchedComponents, getRouteQuery, isSameRoute, navigationableEmits, navigationableProps, pickShallowRoute, rawNumberProp, rawNumberPropType, removeTrailingSlash, renderSlotOrEmpty, resizeDirective, resizeDirectiveArgument, resolveBooleanish, resolveNumberish, resolveVNodeChildOrSlot, resolveVNodeChildOrSlots, state$1 as state, trailingSlashRE, useKeybord, useNavigationable, useVisibility, useWindow };
+export { BODY_SCROLL_LOCK_ATTRIBUTE, BODY_SCROLL_LOCK_SCROLLER_ATTRIBUTE, BooleanishPropOption, ClickOutsideDirectiveElementSymbol, LocationService, NumberishPropOption, VExpandTransition, VLink, bodyScrollLockDirective, bodyScrollLockDirectiveArgument, cleanupEmptyVNodeChild, clickOutsideDirective, clickOutsideDirectiveArgument, createJavaScriptTransition, createPropsOptions, defineSlotsProps, extractRouteMatchedItems, findVNodeChild, getMergedRouteQuery, getQueryMergedLocation, getRouteMatchedComponents, getRouteQuery, isSameRoute, navigationableInheritProps, pickShallowRoute, rawNumberProp, rawNumberPropType, removeTrailingSlash, renderSlotOrEmpty, resizeDirective, resizeDirectiveArgument, resolveBooleanish, resolveNumberish, resolveVNodeChildOrSlot, resolveVNodeChildOrSlots, setDefaultRouterLink, state$1 as state, trailingSlashRE, useKeybord, useNavigationable, useVisibility, useWindow };

package.json

 {
   "name": "@fastkit/vue-utils",
-  "version": "0.6.30",
+  "version": "0.6.31",
   "description": "@fastkit/vue-utils",
@@ -34,7 +34,7 @@ "buildOptions": {
   "dependencies": {
-    "@fastkit/body-scroll-lock": "0.6.30",
-    "@fastkit/visibility": "0.6.30",
-    "@fastkit/keybord": "0.6.30",
-    "@fastkit/helpers": "0.6.30"
+    "@fastkit/body-scroll-lock": "0.6.31",
+    "@fastkit/visibility": "0.6.31",
+    "@fastkit/keybord": "0.6.31",
+    "@fastkit/helpers": "0.6.31"
   }
 }

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

116404

increased by8.55%

Lines of code

3287

increased by8.3%

Dependency changes

• + Added@fastkit/body-scroll-lock@0.6.31(transitive)

• + Added@fastkit/helpers@0.6.31(transitive)

• + Added@fastkit/keybord@0.6.31(transitive)

• + Added@fastkit/tiny-logger@0.6.31(transitive)

• + Added@fastkit/visibility@0.6.31(transitive)

• - Removed@fastkit/body-scroll-lock@0.6.30(transitive)

• - Removed@fastkit/helpers@0.6.30(transitive)

• - Removed@fastkit/keybord@0.6.30(transitive)

• - Removed@fastkit/tiny-logger@0.6.30(transitive)

• - Removed@fastkit/visibility@0.6.30(transitive)

• Updated@fastkit/body-scroll-lock@0.6.31

• Updated@fastkit/helpers@0.6.31

• Updated@fastkit/keybord@0.6.31

• Updated@fastkit/visibility@0.6.31