@phila/phila-ui-link 1.0.0-beta.0

package/README.md

@@ -0,0 +1,150 @@
+# Link Component
+
+A versatile Vue 3 Link component with TypeScript support, Vue Router integration, and external link icon support.
+
+## Features
+
+- 🎯 TypeScript support with full type definitions
+- 🔗 Supports both Vue Router links and HTML anchor links
+- 🌐 External link icon support via `isExternal` prop
+- 🎨 Multiple variants and sizes
+- ♿ Full accessibility support
+- 🎭 Icon support (left, right, or icon-only)
+
+## Installation
+
+```bash
+npm install @phila/phila-ui-link
+# or
+yarn add @phila/phila-ui-link
+# or
+pnpm add @phila/phila-ui-link
+```
+
+## Usage
+
+### Basic HTML Link
+
+```vue
+<script setup lang="ts">
+import { PhilaLink } from "@phila/phila-ui-link";
+</script>
+
+<template>
+  <PhilaLink href="https://www.phila.gov" text="Visit Philadelphia" />
+</template>
+```
+
+### Vue Router Link
+
+```vue
+<template>
+  <PhilaLink to="/dashboard" text="Go to Dashboard" />
+</template>
+```
+
+### Links with External Icon
+
+Add an external link icon to links that go to external domains by setting the `isExternal` prop:
+
+```vue
+<template>
+  <!-- Link to external domain with icon -->
+  <PhilaLink href="https://www.google.com" text="Visit Google" isExternal />
+
+  <!-- Link to same domain without icon -->
+  <PhilaLink href="/about" text="About Us" />
+</template>
+```
+
+## Props
+
+| Prop             | Type                        | Default     | Description                                                  |
+| ---------------- | --------------------------- | ----------- | ------------------------------------------------------------ |
+| `to`             | `RouteLocationRaw`          | -           | Vue Router route destination. Mutually exclusive with `href` |
+| `href`           | `string`                    | -           | HTML anchor href attribute. Mutually exclusive with `to`     |
+| `text`           | `string`                    | -           | Link text content                                            |
+| `variant`        | `'default' \| 'on-primary'` | `'default'` | Link variant style                                           |
+| `size`           | `ComponentSize`             | -           | Link size                                                    |
+| `disabled`       | `boolean`                   | `false`     | Whether the link is disabled                                 |
+| `target`         | `string`                    | -           | Link target (e.g., `_blank`)                                 |
+| `rel`            | `string`                    | -           | Link rel attribute                                           |
+| `iconDefinition` | `IconDefinition`            | -           | FontAwesome icon definition                                  |
+| `iconClass`      | `string`                    | -           | FontAwesome icon class name                                  |
+| `iconRight`      | `boolean`                   | `false`     | Position icon on the right                                   |
+| `iconOnly`       | `boolean`                   | `false`     | Show only icon (no text)                                     |
+| `isExternal`     | `boolean`                   | `false`     | Show external link icon                                      |
+| `ariaLabel`      | `string`                    | -           | Accessible label for screen readers (required for icon-only) |
+| `className`      | `string`                    | -           | Additional CSS classes (from `BaseProps`)                    |
+
+## Examples
+
+### With Icons
+
+```vue
+<template>
+  <!-- Icon on the left -->
+  <PhilaLink href="/" text="Home" :iconDefinition="faHome" />
+
+  <!-- Icon on the right -->
+  <PhilaLink href="/next" text="Continue" :iconDefinition="faArrowRight" iconRight />
+
+  <!-- Icon only (requires ariaLabel for accessibility) -->
+  <PhilaLink href="/settings" :iconDefinition="faGear" iconOnly ariaLabel="Settings" />
+</template>
+```
+
+### Links with Target Attribute
+
+```vue
+<template>
+  <PhilaLink href="https://example.com" text="Open in New Tab" target="_blank" rel="noopener noreferrer" />
+</template>
+```
+
+### Different Sizes
+
+```vue
+<template>
+  <PhilaLink href="/" text="Large Link" size="large" />
+  <PhilaLink href="/" text="Small Link" size="small" />
+</template>
+```
+
+### Disabled State
+
+```vue
+<template>
+  <PhilaLink href="/" text="Disabled Link" disabled />
+</template>
+```
+
+## Development
+
+### Install Dependencies
+
+```bash
+pnpm install
+```
+
+### Run Demo
+
+```bash
+pnpm dev
+```
+
+### Build Library
+
+```bash
+pnpm build
+```
+
+### Type Check
+
+```bash
+pnpm type-check
+```
+
+## License
+
+MIT

package/dist/Link.vue.d.ts

@@ -0,0 +1,18 @@
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, import('vue').PublicProps>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=Link.vue.d.ts.map

package/dist/Link.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Link.vue.d.ts","sourceRoot":"","sources":["../src/Link.vue"],"names":[],"mappings":"AAoLA,iBAAS,cAAc;WA4CT,OAAO,IAA6B;;yBAVpB,GAAG;;;;EAehC;AAaD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe,wHAOnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAapG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,17 @@
+import { ActionContentProps, RouterLinkProps as BaseRouterLinkProps, HtmlLinkProps as BaseHtmlLinkProps } from '@phila/phila-ui-core';
+export { default as PhilaLink } from './Link.vue';
+export type LinkProps = RouterLinkProps | HtmlLinkProps;
+export type LinkVariant = "default" | "on-primary";
+interface LinkSpecificProps {
+    /** Link variant type */
+    variant?: LinkVariant;
+    /** Show external link icon (for links to external sites) */
+    isExternal?: boolean;
+    /** Accessible label for screen readers (required for icon-only links) */
+    ariaLabel?: string;
+}
+export interface RouterLinkProps extends BaseRouterLinkProps, ActionContentProps, LinkSpecificProps {
+}
+export interface HtmlLinkProps extends BaseHtmlLinkProps, ActionContentProps, LinkSpecificProps {
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,kBAAkB,EAClB,eAAe,IAAI,mBAAmB,EACtC,aAAa,IAAI,iBAAiB,EACnC,MAAM,sBAAsB,CAAC;AAE9B,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,YAAY,CAAC;AAElD,MAAM,MAAM,SAAS,GAAG,eAAe,GAAG,aAAa,CAAC;AAExD,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,YAAY,CAAC;AAEnD,UAAU,iBAAiB;IACzB,wBAAwB;IACxB,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,4DAA4D;IAC5D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,yEAAyE;IACzE,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,eAAgB,SAAQ,mBAAmB,EAAE,kBAAkB,EAAE,iBAAiB;CAAG;AAEtG,MAAM,WAAW,aAAc,SAAQ,iBAAiB,EAAE,kBAAkB,EAAE,iBAAiB;CAAG"}

package/dist/index.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("vue"),a=require("@phila/phila-ui-core"),c=t.defineComponent({inheritAttrs:!1,__name:"Link",props:{to:{},href:{},target:{},rel:{},disabled:{type:Boolean,default:!1},ariaLabel:{},className:{},iconRight:{type:Boolean},iconOnly:{type:Boolean,default:!1},text:{},size:{},iconDefinition:{},iconClass:{},src:{},svgRaw:{},variant:{default:"default"},isExternal:{type:Boolean,default:!1}},setup(o){const e=o,n=t.computed(()=>!(!e.isExternal||e.iconDefinition||e.iconClass||e.src||e.svgRaw)),s=t.computed(()=>a.cn("phila-link",e.variant&&`phila-link--${e.variant}`,e.size&&`is-${e.size}`,e.iconOnly&&"icon-link",e.disabled&&"is-disabled",e.className)),r=t.computed(()=>{const i={disabled:e.disabled,ariaLabel:e.ariaLabel,className:s.value};return a.isRouterLink(e)?{to:e.to,...i}:{href:e.href,target:e.target,rel:e.rel,...i}}),l=t.computed(()=>({iconDefinition:e.iconDefinition,iconClass:e.iconClass||(n.value?"external-link":void 0),src:e.src,svgRaw:e.svgRaw,iconRight:n.value?!0:e.iconRight,iconOnly:e.iconOnly,text:e.text,size:e.size}));return(i,u)=>(t.openBlock(),t.createBlock(t.unref(a.BaseLink),t.normalizeProps(t.guardReactiveProps({...r.value,...i.$attrs})),{default:t.withCtx(()=>[t.createVNode(t.unref(a.ActionContent),t.normalizeProps(t.guardReactiveProps(l.value)),{default:t.withCtx(()=>[t.renderSlot(i.$slots,"default",{},()=>[t.createTextVNode(t.toDisplayString(e.text),1)])]),_:3},16)]),_:3},16))}});exports.PhilaLink=c;

package/dist/index.mjs

@@ -0,0 +1,77 @@
+import { defineComponent as d, computed as a, createBlock as p, openBlock as h, unref as i, normalizeProps as s, guardReactiveProps as o, withCtx as l, createVNode as v, renderSlot as g, createTextVNode as k, toDisplayString as m } from "vue";
+import { cn as b, isRouterLink as x, BaseLink as y, ActionContent as R } from "@phila/phila-ui-core";
+const w = /* @__PURE__ */ d({
+  inheritAttrs: !1,
+  __name: "Link",
+  props: {
+    to: {},
+    href: {},
+    target: {},
+    rel: {},
+    disabled: { type: Boolean, default: !1 },
+    ariaLabel: {},
+    className: {},
+    iconRight: { type: Boolean },
+    iconOnly: { type: Boolean, default: !1 },
+    text: {},
+    size: {},
+    iconDefinition: {},
+    iconClass: {},
+    src: {},
+    svgRaw: {},
+    variant: { default: "default" },
+    isExternal: { type: Boolean, default: !1 }
+  },
+  setup(r) {
+    const e = r, n = a(() => !(!e.isExternal || e.iconDefinition || e.iconClass || e.src || e.svgRaw)), c = a(() => b(
+      "phila-link",
+      e.variant && `phila-link--${e.variant}`,
+      e.size && `is-${e.size}`,
+      e.iconOnly && "icon-link",
+      e.disabled && "is-disabled",
+      e.className
+    )), f = a(() => {
+      const t = {
+        disabled: e.disabled,
+        ariaLabel: e.ariaLabel,
+        className: c.value
+      };
+      return x(e) ? {
+        to: e.to,
+        ...t
+      } : {
+        href: e.href,
+        target: e.target,
+        rel: e.rel,
+        ...t
+      };
+    }), u = a(
+      () => ({
+        iconDefinition: e.iconDefinition,
+        iconClass: e.iconClass || (n.value ? "external-link" : void 0),
+        src: e.src,
+        svgRaw: e.svgRaw,
+        iconRight: n.value ? !0 : e.iconRight,
+        iconOnly: e.iconOnly,
+        text: e.text,
+        size: e.size
+      })
+    );
+    return (t, C) => (h(), p(i(y), s(o({ ...f.value, ...t.$attrs })), {
+      default: l(() => [
+        v(i(R), s(o(u.value)), {
+          default: l(() => [
+            g(t.$slots, "default", {}, () => [
+              k(m(e.text), 1)
+            ])
+          ]),
+          _: 3
+        }, 16)
+      ]),
+      _: 3
+    }, 16));
+  }
+});
+export {
+  w as PhilaLink
+};

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@phila/phila-ui-link",
+  "version": "1.0.0-beta.0",
+  "type": "module",
+  "description": "Link component with suppport for Vue Router",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "ui",
+    "link",
+    "vue",
+    "component"
+  ],
+  "author": "",
+  "license": "MIT",
+  "peerDependencies": {
+    "vue": "^3.0.0",
+    "vue-router": "^4.0.0",
+    "@fortawesome/fontawesome-svg-core": "^7.1.0",
+    "@fortawesome/vue-fontawesome": "^3.1.2"
+  },
+  "peerDependenciesMeta": {
+    "vue-router": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "@phila/phila-ui-core": "2.2.0-beta.2"
+  },
+  "devDependencies": {
+    "@types/node": "^24.0.0",
+    "@vitejs/plugin-vue": "^6.0.1",
+    "eslint": "^9.0.0",
+    "typescript": "^5.8.3",
+    "vite": "^7.0.6",
+    "vite-plugin-dts": "^4.5.4",
+    "vite-plugin-lib-inject-css": "^2.2.2"
+  },
+  "scripts": {
+    "build": "vite build",
+    "build-win": "vite build",
+    "dev": "vite build --watch",
+    "lint": "eslint src --ext .ts,.tsx,.vue",
+    "lint:fix": "eslint src --ext .ts,.tsx,.vue --fix",
+    "type-check": "tsc --noEmit",
+    "clean": "rm -rf dist",
+    "format": "prettier --write .",
+    "format:check": "prettier --check ."
+  }
+}