@phila/phila-ui-link 1.0.4-beta.6 → 1.1.0-beta.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +24 -20
- package/dist/index.js +1 -1
- package/dist/index.mjs +21 -22
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -65,38 +65,42 @@ Add an external link icon to links that go to external domains by setting the `i
|
|
|
65
65
|
|
|
66
66
|
## Props
|
|
67
67
|
|
|
68
|
-
| Prop
|
|
69
|
-
|
|
|
70
|
-
| `to`
|
|
71
|
-
| `href`
|
|
72
|
-
| `text`
|
|
73
|
-
| `variant`
|
|
74
|
-
| `size`
|
|
75
|
-
| `disabled`
|
|
76
|
-
| `target`
|
|
77
|
-
| `rel`
|
|
78
|
-
| `
|
|
79
|
-
| `
|
|
80
|
-
| `
|
|
81
|
-
| `
|
|
82
|
-
| `
|
|
83
|
-
| `
|
|
84
|
-
| `className` | `string` | - | Additional CSS classes (from `BaseProps`) |
|
|
68
|
+
| Prop | Type | Default | Description |
|
|
69
|
+
| ------------ | --------------------------- | ----------- | ------------------------------------------------------------ |
|
|
70
|
+
| `to` | `RouteLocationRaw` | - | Vue Router route destination. Mutually exclusive with `href` |
|
|
71
|
+
| `href` | `string` | - | HTML anchor href attribute. Mutually exclusive with `to` |
|
|
72
|
+
| `text` | `string` | - | Link text content |
|
|
73
|
+
| `variant` | `'default' \| 'on-primary'` | `'default'` | Link variant style |
|
|
74
|
+
| `size` | `ComponentSize` | - | Link size |
|
|
75
|
+
| `disabled` | `boolean` | `false` | Whether the link is disabled |
|
|
76
|
+
| `target` | `string` | - | Link target (e.g., `_blank`) |
|
|
77
|
+
| `rel` | `string` | - | Link rel attribute |
|
|
78
|
+
| `icon` | `IconComponent` | - | Icon component from `@phila/phila-ui-core/icons` |
|
|
79
|
+
| `iconRight` | `boolean` | `false` | Position icon on the right |
|
|
80
|
+
| `iconOnly` | `boolean` | `false` | Show only icon (no text) |
|
|
81
|
+
| `isExternal` | `boolean` | `false` | Show external link icon |
|
|
82
|
+
| `ariaLabel` | `string` | - | Accessible label for screen readers (required for icon-only) |
|
|
83
|
+
| `className` | `string` | - | Additional CSS classes (from `BaseProps`) |
|
|
85
84
|
|
|
86
85
|
## Examples
|
|
87
86
|
|
|
88
87
|
### With Icons
|
|
89
88
|
|
|
90
89
|
```vue
|
|
90
|
+
<script setup lang="ts">
|
|
91
|
+
import { PhilaLink } from "@phila/phila-ui-link";
|
|
92
|
+
import { IconHouse, IconArrowRight, IconGear } from "@phila/phila-ui-core/icons";
|
|
93
|
+
</script>
|
|
94
|
+
|
|
91
95
|
<template>
|
|
92
96
|
<!-- Icon on the left -->
|
|
93
|
-
<PhilaLink href="/" text="Home" :
|
|
97
|
+
<PhilaLink href="/" text="Home" :icon="IconHouse" />
|
|
94
98
|
|
|
95
99
|
<!-- Icon on the right -->
|
|
96
|
-
<PhilaLink href="/next" text="Continue" :
|
|
100
|
+
<PhilaLink href="/next" text="Continue" :icon="IconArrowRight" iconRight />
|
|
97
101
|
|
|
98
102
|
<!-- Icon only (requires ariaLabel for accessibility) -->
|
|
99
|
-
<PhilaLink href="/settings" :
|
|
103
|
+
<PhilaLink href="/settings" :icon="IconGear" iconOnly ariaLabel="Settings" />
|
|
100
104
|
</template>
|
|
101
105
|
```
|
|
102
106
|
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("vue"),n=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},inline:{type:Boolean},text:{},size:{},shadow:{type:Boolean},iconSize:{},
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("vue"),n=require("@phila/phila-ui-core"),c=require("@phila/phila-ui-core/icons"),u=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},inline:{type:Boolean},text:{},size:{},shadow:{type:Boolean},iconSize:{},icon:{},src:{},svgRaw:{},variant:{default:"default"},isExternal:{type:Boolean,default:!1}},setup(o){const e=o,i=t.computed(()=>!(!e.isExternal||e.icon||e.src||e.svgRaw)),r=t.computed(()=>n.cn("phila-link",e.variant&&`phila-link--${e.variant}`,e.size&&`is-${e.size}`,e.iconOnly&&"icon-link",e.disabled&&"is-disabled",e.className)),s=t.computed(()=>{const a={disabled:e.disabled,ariaLabel:e.ariaLabel,className:r.value};return n.isRouterLink(e)?{to:e.to,...a}:{href:e.href,target:e.target,rel:e.rel,...a}}),l=t.computed(()=>({icon:e.icon??(i.value?c.IconUpRightFromSquare:void 0),src:e.src,svgRaw:e.svgRaw,iconRight:i.value?!0:e.iconRight,iconOnly:e.iconOnly,inline:e.inline,text:e.text,size:e.size}));return(a,d)=>(t.openBlock(),t.createBlock(t.unref(n.BaseLink),t.normalizeProps(t.guardReactiveProps({...s.value,...a.$attrs})),{default:t.withCtx(()=>[t.createVNode(t.unref(n.ActionContent),t.normalizeProps(t.guardReactiveProps(l.value)),{default:t.withCtx(()=>[t.renderSlot(a.$slots,"default",{},()=>[t.createTextVNode(t.toDisplayString(e.text),1)])]),_:3},16)]),_:3},16))}});exports.PhilaLink=u;
|
package/dist/index.mjs
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
import { cn as y, isRouterLink as b, BaseLink as
|
|
3
|
-
|
|
1
|
+
import { defineComponent as p, computed as a, createBlock as f, openBlock as h, unref as i, normalizeProps as o, guardReactiveProps as r, withCtx as s, createVNode as m, renderSlot as v, createTextVNode as g, toDisplayString as k } from "vue";
|
|
2
|
+
import { cn as y, isRouterLink as b, BaseLink as R, ActionContent as x } from "@phila/phila-ui-core";
|
|
3
|
+
import { IconUpRightFromSquare as B } from "@phila/phila-ui-core/icons";
|
|
4
|
+
const _ = /* @__PURE__ */ p({
|
|
4
5
|
inheritAttrs: !1,
|
|
5
6
|
__name: "Link",
|
|
6
7
|
props: {
|
|
@@ -18,55 +19,53 @@ const w = /* @__PURE__ */ d({
|
|
|
18
19
|
size: {},
|
|
19
20
|
shadow: { type: Boolean },
|
|
20
21
|
iconSize: {},
|
|
21
|
-
|
|
22
|
-
iconClass: {},
|
|
22
|
+
icon: {},
|
|
23
23
|
src: {},
|
|
24
24
|
svgRaw: {},
|
|
25
25
|
variant: { default: "default" },
|
|
26
26
|
isExternal: { type: Boolean, default: !1 }
|
|
27
27
|
},
|
|
28
|
-
setup(
|
|
29
|
-
const e =
|
|
28
|
+
setup(l) {
|
|
29
|
+
const e = l, n = a(() => !(!e.isExternal || e.icon || e.src || e.svgRaw)), c = a(() => y(
|
|
30
30
|
"phila-link",
|
|
31
31
|
e.variant && `phila-link--${e.variant}`,
|
|
32
32
|
e.size && `is-${e.size}`,
|
|
33
33
|
e.iconOnly && "icon-link",
|
|
34
34
|
e.disabled && "is-disabled",
|
|
35
35
|
e.className
|
|
36
|
-
)),
|
|
37
|
-
const
|
|
36
|
+
)), u = a(() => {
|
|
37
|
+
const t = {
|
|
38
38
|
disabled: e.disabled,
|
|
39
39
|
ariaLabel: e.ariaLabel,
|
|
40
40
|
className: c.value
|
|
41
41
|
};
|
|
42
42
|
return b(e) ? {
|
|
43
43
|
to: e.to,
|
|
44
|
-
...
|
|
44
|
+
...t
|
|
45
45
|
} : {
|
|
46
46
|
href: e.href,
|
|
47
47
|
target: e.target,
|
|
48
48
|
rel: e.rel,
|
|
49
|
-
...
|
|
49
|
+
...t
|
|
50
50
|
};
|
|
51
|
-
}),
|
|
51
|
+
}), d = a(
|
|
52
52
|
() => ({
|
|
53
|
-
|
|
54
|
-
iconClass: e.iconClass || (t.value ? "external-link" : void 0),
|
|
53
|
+
icon: e.icon ?? (n.value ? B : void 0),
|
|
55
54
|
src: e.src,
|
|
56
55
|
svgRaw: e.svgRaw,
|
|
57
|
-
iconRight:
|
|
56
|
+
iconRight: n.value ? !0 : e.iconRight,
|
|
58
57
|
iconOnly: e.iconOnly,
|
|
59
58
|
inline: e.inline,
|
|
60
59
|
text: e.text,
|
|
61
60
|
size: e.size
|
|
62
61
|
})
|
|
63
62
|
);
|
|
64
|
-
return (
|
|
65
|
-
default:
|
|
66
|
-
|
|
67
|
-
default:
|
|
68
|
-
|
|
69
|
-
k(
|
|
63
|
+
return (t, L) => (h(), f(i(R), o(r({ ...u.value, ...t.$attrs })), {
|
|
64
|
+
default: s(() => [
|
|
65
|
+
m(i(x), o(r(d.value)), {
|
|
66
|
+
default: s(() => [
|
|
67
|
+
v(t.$slots, "default", {}, () => [
|
|
68
|
+
g(k(e.text), 1)
|
|
70
69
|
])
|
|
71
70
|
]),
|
|
72
71
|
_: 3
|
|
@@ -77,5 +76,5 @@ const w = /* @__PURE__ */ d({
|
|
|
77
76
|
}
|
|
78
77
|
});
|
|
79
78
|
export {
|
|
80
|
-
|
|
79
|
+
_ as PhilaLink
|
|
81
80
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@phila/phila-ui-link",
|
|
3
|
-
"version": "1.0
|
|
3
|
+
"version": "1.1.0-beta.7",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "Link component with suppport for Vue Router",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
}
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@phila/phila-ui-core": "3.0.0-beta.
|
|
39
|
+
"@phila/phila-ui-core": "3.0.0-beta.7"
|
|
40
40
|
},
|
|
41
41
|
"devDependencies": {
|
|
42
42
|
"@types/node": "^24.0.0",
|