@phila/phila-ui-nav-link 0.0.10 → 0.0.13

package/README.md

@@ -1,18 +1,39 @@
-# Vue 3 + TypeScript + Vite
+## Usage
+### Import single component
 
-This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+```js
+import NavLink from "@phila/phila-ui-nav-link";
 
-## Recommended IDE Setup
+//register it locally...
+components: {
+  NavLink,
+}
 
-- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
+//... or register it globally
+Vue.component('NavLink', NavLink);
+```
 
-## Type Support For `.vue` Imports in TS
+## router-link
 
-TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
+The NavLink props when using it as a **router-link**.
 
-If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
+```js
+{
+  href: 'vue-router route name', //the route name is used, and not the path
+  text: 'My Link',
+  attrs: Object //any other html anchor attributes
+}
+```
 
-1. Disable the built-in TypeScript Extension
-   1. Run `Extensions: Show Built-in Extensions` from VSCode's command palette
-   2. Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
-2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
+## Regular link
+The NavLink props when using it as a **regular/native** link.
+
+```js
+{
+  type: 'native',
+  href: String, //url
+  active: Boolean,
+  click: Function,
+  attrs: Object //any other html anchor attributes
+}
+```

package/dist/NavLink.js

@@ -1,5 +1,5 @@
-import { defineComponent as i, resolveComponent as c, openBlock as n, createElementBlock as s, mergeProps as o, toHandlers as l, toDisplayString as r, createBlock as p, withCtx as k, createElementVNode as f } from "vue";
-const h = ["href"], m = ["href", "onClick"], y = /* @__PURE__ */ i({
+import { defineComponent as a, resolveComponent as s, createElementBlock as i, createBlock as l, openBlock as t, mergeProps as o, toHandlers as c, toDisplayString as r, withCtx as p, createTextVNode as k } from "vue";
+const u = ["href"], v = /* @__PURE__ */ a({
   __name: "NavLink",
   props: {
     type: {},
@@ -10,29 +10,25 @@ const h = ["href"], m = ["href", "onClick"], y = /* @__PURE__ */ i({
     attrs: {},
     submenu: {}
   },
-  setup(u) {
-    return (e, v) => {
-      const a = c("router-link");
-      return e.type === "native" ? (n(), s("a", o({ key: 0 }, e.attrs, {
+  setup(f) {
+    return (e, m) => {
+      const n = s("router-link");
+      return e.type === "native" ? (t(), i("a", o({ key: 0 }, e.attrs, {
         href: e.href,
         class: { "is-active": e.active }
-      }, l(e.click ? { click: e.click } : {}, !0)), r(e.text), 17, h)) : (n(), p(a, {
+      }, c(e.click ? { click: e.click } : {}, !0)), r(e.text), 17, u)) : (t(), l(n, o({
         key: 1,
-        to: { name: e.href }
-      }, {
-        default: k((t) => [
-          f("a", o({
-            href: t.href
-          }, e.attrs, {
-            class: { "is-active": t.isExactActive },
-            onClick: t.navigate
-          }), r(e.text), 17, m)
+        to: e.href,
+        class: { "is-active": e.active }
+      }, e.attrs), {
+        default: p(() => [
+          k(r(e.text), 1)
         ]),
         _: 1
-      }, 8, ["to"]));
+      }, 16, ["to", "class"]));
     };
   }
 });
 export {
-  y as default
+  v as default
 };

package/dist/NavLink.umd.cjs

@@ -1 +1 @@
-(function(e,n){typeof exports=="object"&&typeof module<"u"?module.exports=n(require("vue")):typeof define=="function"&&define.amd?define(["vue"],n):(e=typeof globalThis<"u"?globalThis:e||self,e.NavLink=n(e.Vue))})(this,function(e){"use strict";const n=["href"],o=["href","onClick"];return e.defineComponent({__name:"NavLink",props:{type:{},href:{},text:{},active:{type:Boolean},click:{type:[Function,null]},attrs:{},submenu:{}},setup(c){return(t,a)=>{const r=e.resolveComponent("router-link");return t.type==="native"?(e.openBlock(),e.createElementBlock("a",e.mergeProps({key:0},t.attrs,{href:t.href,class:{"is-active":t.active}},e.toHandlers(t.click?{click:t.click}:{},!0)),e.toDisplayString(t.text),17,n)):(e.openBlock(),e.createBlock(r,{key:1,to:{name:t.href}},{default:e.withCtx(i=>[e.createElementVNode("a",e.mergeProps({href:i.href},t.attrs,{class:{"is-active":i.isExactActive},onClick:i.navigate}),e.toDisplayString(t.text),17,o)]),_:1},8,["to"]))}}})});
+(function(e,n){typeof exports=="object"&&typeof module<"u"?module.exports=n(require("vue")):typeof define=="function"&&define.amd?define(["vue"],n):(e=typeof globalThis<"u"?globalThis:e||self,e.NavLink=n(e.Vue))})(this,function(e){"use strict";const n=["href"];return e.defineComponent({__name:"NavLink",props:{type:{},href:{},text:{},active:{type:Boolean},click:{type:[Function,null]},attrs:{},submenu:{}},setup(r){return(t,s)=>{const o=e.resolveComponent("router-link");return t.type==="native"?(e.openBlock(),e.createElementBlock("a",e.mergeProps({key:0},t.attrs,{href:t.href,class:{"is-active":t.active}},e.toHandlers(t.click?{click:t.click}:{},!0)),e.toDisplayString(t.text),17,n)):(e.openBlock(),e.createBlock(o,e.mergeProps({key:1,to:t.href,class:{"is-active":t.active}},t.attrs),{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.text),1)]),_:1},16,["to","class"]))}}})});

package/dist/NavLink.vue.d.ts

@@ -1,12 +1,3 @@
 import { NavLinkProps } from './types';
-declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<NavLinkProps>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<NavLinkProps>>>, {}, {}>;
+declare const _default: import("vue").DefineComponent<NavLinkProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NavLinkProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToRuntimeProps<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};

package/dist/types.d.ts

@@ -1,4 +1,5 @@
 import NavLink from './NavLink.vue';
+import { type RouteLocationRaw } from "vue-router";
 declare module "vue" {
     interface GlobalComponents {
         NavLink: typeof NavLink;
@@ -7,11 +8,11 @@ declare module "vue" {
 type ClickFunction = (event: MouseEvent) => void;
 export interface NavLinkProps {
     type?: string;
-    href?: string;
+    href?: RouteLocationRaw;
     text?: string;
     active?: boolean;
     click?: ClickFunction | null;
-    attrs?: Record<PropertyKey, never>;
+    attrs?: Record<PropertyKey, unknown>;
     submenu?: NavLinkProps[];
 }
 export default NavLink;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@phila/phila-ui-nav-link",
   "private": false,
-  "version": "0.0.10",
+  "version": "0.0.13",
   "type": "module",
   "files": [
     "dist"
@@ -22,14 +22,14 @@
   "devDependencies": {
     "@types/node": "^20.10.3",
     "@vitejs/plugin-vue": "^4.5.0",
-    "typescript": "^5.2.2",
+    "typescript": "^5.8.2",
     "vite": "^5.0.0",
     "vite-plugin-dts": "^3.6.4",
-    "vue-tsc": "^1.8.22"
+    "vue-tsc": "^2.2.8"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.com/",
     "access": "public"
   },
-  "gitHead": "17ea0e29f4566d58fe5eccba43c916d4453129ad"
+  "gitHead": "f00518592815b1bf558d88f77fc4b6b3a30296e5"
 }