@oslokommune/punkt-vue 11.1.1 → 11.2.1
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/CHANGELOG.md +18 -0
- package/dist/Tag-RznZVoXr.cjs +1 -0
- package/dist/Tag-Tuksu2Zp.js +140 -0
- package/dist/punkt-vue-index.cjs +1 -1
- package/dist/punkt-vue-index.js +60 -55
- package/dist/punkt-vue-tabs.cjs +1 -0
- package/dist/punkt-vue-tabs.js +130 -0
- package/dist/punkt-vue-tag.cjs +1 -1
- package/dist/punkt-vue-tag.js +9 -141
- package/package.json +3 -3
- package/src/components/tabs/Tabs.vue +119 -0
package/CHANGELOG.md
CHANGED
|
@@ -5,6 +5,24 @@ og skriver commits ca etter [Conventional Commits](https://conventionalcommits.o
|
|
|
5
5
|
|
|
6
6
|
---
|
|
7
7
|
|
|
8
|
+
## [11.2.0](https://github.com/oslokommune/punkt/compare/11.1.1...11.2.0) (2024-01-25)
|
|
9
|
+
|
|
10
|
+
### ⚠ BREAKING CHANGES
|
|
11
|
+
Ingen
|
|
12
|
+
|
|
13
|
+
### Features
|
|
14
|
+
* Tabs (#1435).
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
### Bug Fixes
|
|
18
|
+
Ingen
|
|
19
|
+
|
|
20
|
+
### Chores
|
|
21
|
+
Ingen
|
|
22
|
+
|
|
23
|
+
---
|
|
24
|
+
|
|
25
|
+
|
|
8
26
|
## [11.0.0](https://github.com/oslokommune/punkt/compare/10.0.0...11.0.0) (2023-12-20)
|
|
9
27
|
|
|
10
28
|
### ⚠ BREAKING CHANGES
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";const c=require("./Icon-Q_SkpRJa.cjs"),e=require("vue"),i=require("./plugins-AiK__HqQ.cjs"),o={name:"PktTag",components:{PktIcon:c.PktIcon},props:{skin:{type:String,default:"blue",validator(l){return["blue","green","red","beige","yellow","grey","blue-light"].includes(l)}},textStyle:{type:String,default:"normal-text",validator(l){return["thin-text","normal-text"].includes(l)}},size:{type:String,default:"medium",validator(l){return["small","medium","large"].includes(l)}},closeTag:{type:Boolean,default:!1},iconName:{type:String,default:""},type:{type:String,default:"button",validator:l=>["button","submit","reset"].includes(l)},ariaLabel:{type:String,default:"close"}},data:()=>({closed:!1}),methods:{close(){this.closed=!0,this.$emit("on-close",this.closed)}},computed:{skinClass(){return[`pkt-tag--${this.skin}`]},sizeClass(){return[`pkt-tag--${this.size}`]},textStyleClass(){return[`pkt-tag--${this.textStyle}`]},buttonClass(){return["pkt-tag","pkt-btn","pkt-btn--tertiary",{"pkt-btn--icons-right-and-left":this.iconName&&this.closeTag,"pkt-btn--icon-right":this.closeTag&&!this.iconName}]},open(){return!this.closed}}},u=["type","aria-label"],d=["type","aria-label"];function k(l,s,a,g,y,t){const r=e.resolveComponent("pkt-icon");return e.openBlock(),e.createElementBlock("span",null,[a.closeTag&&a.iconName?e.withDirectives((e.openBlock(),e.createElementBlock("button",{key:0,class:e.normalizeClass([t.buttonClass,t.skinClass,t.sizeClass,t.textStyleClass]),type:a.type,role:"button","aria-label":a.ariaLabel,onKeyup:s[0]||(s[0]=e.withKeys((...n)=>t.close&&t.close(...n),["enter"])),onClick:s[1]||(s[1]=(...n)=>t.close&&t.close(...n))},[e.createVNode(r,{class:"pkt-tag__icon",name:a.iconName},null,8,["name"]),e.renderSlot(l.$slots,"default"),e.createVNode(r,{class:"pkt-tag__close-btn",name:"close"})],42,u)),[[e.vShow,t.open]]):a.closeTag?e.withDirectives((e.openBlock(),e.createElementBlock("button",{key:1,class:e.normalizeClass([t.buttonClass,t.skinClass,t.sizeClass,t.textStyleClass]),type:a.type,role:"button","aria-label":a.ariaLabel,onKeyup:s[2]||(s[2]=e.withKeys((...n)=>t.close&&t.close(...n),["enter"])),onClick:s[3]||(s[3]=(...n)=>t.close&&t.close(...n))},[e.createVNode(r,{class:"pkt-tag__close-btn",name:"close"}),e.renderSlot(l.$slots,"default")],42,d)),[[e.vShow,t.open]]):a.iconName?(e.openBlock(),e.createElementBlock("span",{key:2,class:e.normalizeClass(["pkt-tag",[t.skinClass,t.sizeClass,t.textStyleClass]])},[e.createVNode(r,{class:"pkt-tag__icon",name:a.iconName},null,8,["name"]),e.renderSlot(l.$slots,"default")],2)):(e.openBlock(),e.createElementBlock("span",{key:3,class:e.normalizeClass(["pkt-tag",[t.skinClass,t.sizeClass,t.textStyleClass]])},[e.renderSlot(l.$slots,"default")],2))])}const m=i._export_sfc(o,[["render",k]]);exports.Tag=m;
|
|
@@ -0,0 +1,140 @@
|
|
|
1
|
+
import { P as y } from "./Icon-s3ZNrtl-.js";
|
|
2
|
+
import { resolveComponent as g, openBlock as n, createElementBlock as r, withDirectives as d, normalizeClass as c, withKeys as m, createVNode as o, renderSlot as u, vShow as k } from "vue";
|
|
3
|
+
import { _ as b } from "./plugins-IeJb3XDX.js";
|
|
4
|
+
const C = {
|
|
5
|
+
name: "PktTag",
|
|
6
|
+
components: { PktIcon: y },
|
|
7
|
+
props: {
|
|
8
|
+
skin: {
|
|
9
|
+
type: String,
|
|
10
|
+
default: "blue",
|
|
11
|
+
validator(t) {
|
|
12
|
+
return ["blue", "green", "red", "beige", "yellow", "grey", "blue-light"].includes(t);
|
|
13
|
+
}
|
|
14
|
+
},
|
|
15
|
+
textStyle: {
|
|
16
|
+
type: String,
|
|
17
|
+
default: "normal-text",
|
|
18
|
+
validator(t) {
|
|
19
|
+
return ["thin-text", "normal-text"].includes(t);
|
|
20
|
+
}
|
|
21
|
+
},
|
|
22
|
+
size: {
|
|
23
|
+
type: String,
|
|
24
|
+
default: "medium",
|
|
25
|
+
validator(t) {
|
|
26
|
+
return ["small", "medium", "large"].includes(t);
|
|
27
|
+
}
|
|
28
|
+
},
|
|
29
|
+
closeTag: {
|
|
30
|
+
type: Boolean,
|
|
31
|
+
default: !1
|
|
32
|
+
},
|
|
33
|
+
iconName: {
|
|
34
|
+
type: String,
|
|
35
|
+
default: ""
|
|
36
|
+
},
|
|
37
|
+
type: {
|
|
38
|
+
type: String,
|
|
39
|
+
default: "button",
|
|
40
|
+
validator: (t) => ["button", "submit", "reset"].includes(t)
|
|
41
|
+
},
|
|
42
|
+
ariaLabel: {
|
|
43
|
+
type: String,
|
|
44
|
+
default: "close"
|
|
45
|
+
}
|
|
46
|
+
},
|
|
47
|
+
data: () => ({
|
|
48
|
+
closed: !1
|
|
49
|
+
}),
|
|
50
|
+
methods: {
|
|
51
|
+
close() {
|
|
52
|
+
this.closed = !0, this.$emit("on-close", this.closed);
|
|
53
|
+
}
|
|
54
|
+
},
|
|
55
|
+
computed: {
|
|
56
|
+
skinClass() {
|
|
57
|
+
return [`pkt-tag--${this.skin}`];
|
|
58
|
+
},
|
|
59
|
+
sizeClass() {
|
|
60
|
+
return [`pkt-tag--${this.size}`];
|
|
61
|
+
},
|
|
62
|
+
textStyleClass() {
|
|
63
|
+
return [`pkt-tag--${this.textStyle}`];
|
|
64
|
+
},
|
|
65
|
+
buttonClass() {
|
|
66
|
+
return [
|
|
67
|
+
"pkt-tag",
|
|
68
|
+
"pkt-btn",
|
|
69
|
+
"pkt-btn--tertiary",
|
|
70
|
+
{
|
|
71
|
+
"pkt-btn--icons-right-and-left": this.iconName && this.closeTag,
|
|
72
|
+
"pkt-btn--icon-right": this.closeTag && !this.iconName
|
|
73
|
+
}
|
|
74
|
+
];
|
|
75
|
+
},
|
|
76
|
+
open() {
|
|
77
|
+
return !this.closed;
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
}, f = ["type", "aria-label"], S = ["type", "aria-label"];
|
|
81
|
+
function h(t, a, l, _, p, e) {
|
|
82
|
+
const i = g("pkt-icon");
|
|
83
|
+
return n(), r("span", null, [
|
|
84
|
+
l.closeTag && l.iconName ? d((n(), r("button", {
|
|
85
|
+
key: 0,
|
|
86
|
+
class: c([e.buttonClass, e.skinClass, e.sizeClass, e.textStyleClass]),
|
|
87
|
+
type: l.type,
|
|
88
|
+
role: "button",
|
|
89
|
+
"aria-label": l.ariaLabel,
|
|
90
|
+
onKeyup: a[0] || (a[0] = m((...s) => e.close && e.close(...s), ["enter"])),
|
|
91
|
+
onClick: a[1] || (a[1] = (...s) => e.close && e.close(...s))
|
|
92
|
+
}, [
|
|
93
|
+
o(i, {
|
|
94
|
+
class: "pkt-tag__icon",
|
|
95
|
+
name: l.iconName
|
|
96
|
+
}, null, 8, ["name"]),
|
|
97
|
+
u(t.$slots, "default"),
|
|
98
|
+
o(i, {
|
|
99
|
+
class: "pkt-tag__close-btn",
|
|
100
|
+
name: "close"
|
|
101
|
+
})
|
|
102
|
+
], 42, f)), [
|
|
103
|
+
[k, e.open]
|
|
104
|
+
]) : l.closeTag ? d((n(), r("button", {
|
|
105
|
+
key: 1,
|
|
106
|
+
class: c([e.buttonClass, e.skinClass, e.sizeClass, e.textStyleClass]),
|
|
107
|
+
type: l.type,
|
|
108
|
+
role: "button",
|
|
109
|
+
"aria-label": l.ariaLabel,
|
|
110
|
+
onKeyup: a[2] || (a[2] = m((...s) => e.close && e.close(...s), ["enter"])),
|
|
111
|
+
onClick: a[3] || (a[3] = (...s) => e.close && e.close(...s))
|
|
112
|
+
}, [
|
|
113
|
+
o(i, {
|
|
114
|
+
class: "pkt-tag__close-btn",
|
|
115
|
+
name: "close"
|
|
116
|
+
}),
|
|
117
|
+
u(t.$slots, "default")
|
|
118
|
+
], 42, S)), [
|
|
119
|
+
[k, e.open]
|
|
120
|
+
]) : l.iconName ? (n(), r("span", {
|
|
121
|
+
key: 2,
|
|
122
|
+
class: c(["pkt-tag", [e.skinClass, e.sizeClass, e.textStyleClass]])
|
|
123
|
+
}, [
|
|
124
|
+
o(i, {
|
|
125
|
+
class: "pkt-tag__icon",
|
|
126
|
+
name: l.iconName
|
|
127
|
+
}, null, 8, ["name"]),
|
|
128
|
+
u(t.$slots, "default")
|
|
129
|
+
], 2)) : (n(), r("span", {
|
|
130
|
+
key: 3,
|
|
131
|
+
class: c(["pkt-tag", [e.skinClass, e.sizeClass, e.textStyleClass]])
|
|
132
|
+
}, [
|
|
133
|
+
u(t.$slots, "default")
|
|
134
|
+
], 2))
|
|
135
|
+
]);
|
|
136
|
+
}
|
|
137
|
+
const T = /* @__PURE__ */ b(C, [["render", h]]);
|
|
138
|
+
export {
|
|
139
|
+
T
|
|
140
|
+
};
|
package/dist/punkt-vue-index.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const P=require("./punkt-vue-alert.cjs"),e=require("./punkt-vue-backlink.cjs"),t=require("./punkt-vue-breadcrumbs.cjs"),p=require("./punkt-vue-button.cjs"),r=require("./punkt-vue-checkbox.cjs"),u=require("./punkt-vue-footer.cjs"),a=require("./punkt-vue-footersimple.cjs"),o=require("./punkt-vue-header.cjs"),b=require("./punkt-vue-icon.cjs"),q=require("./punkt-vue-inputwrapper.cjs"),n=require("./punkt-vue-messagebox.cjs"),l=require("./punkt-vue-linkcard.cjs"),i=require("./punkt-vue-radiobutton.cjs"),c=require("./punkt-vue-select.cjs"),d=require("./punkt-vue-tag.cjs"),
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const P=require("./punkt-vue-alert.cjs"),e=require("./punkt-vue-backlink.cjs"),t=require("./punkt-vue-breadcrumbs.cjs"),p=require("./punkt-vue-button.cjs"),r=require("./punkt-vue-checkbox.cjs"),u=require("./punkt-vue-footer.cjs"),a=require("./punkt-vue-footersimple.cjs"),o=require("./punkt-vue-header.cjs"),b=require("./punkt-vue-icon.cjs"),q=require("./punkt-vue-inputwrapper.cjs"),n=require("./punkt-vue-messagebox.cjs"),l=require("./punkt-vue-linkcard.cjs"),i=require("./punkt-vue-radiobutton.cjs"),c=require("./punkt-vue-select.cjs"),d=require("./punkt-vue-tabs.cjs"),x=require("./punkt-vue-tag.cjs"),s=require("./punkt-vue-textarea.cjs"),k=require("./punkt-vue-textinput.cjs"),g=require("./plugins-AiK__HqQ.cjs"),S=require("./Alert-CShkNLKz.cjs"),I=require("./Button-h1iXT3rO.cjs"),F=require("./Icon-Q_SkpRJa.cjs"),L=require("./InputWrapper-Av69cWnN.cjs"),M=require("./Tag-RznZVoXr.cjs");require("vue");const f=Object.freeze(Object.defineProperty({__proto__:null,Alert:P.default,BackLink:e.default,Breadcrumbs:t.default,Button:p.default,Checkbox:r.default,Footer:u.default,FooterSimple:a.default,Header:o.default,Icon:b.default,InputWrapper:q.default,Linkcard:l.default,Messagebox:n.default,Radiobutton:i.default,Select:c.default,Tabs:d.default,Tag:x.default,Textarea:s.default,Textinput:k.default},Symbol.toStringTag,{value:"Module"})),T={install(m,h={}){for(const B in f)g.registerPlugin(m,f[B])}};g.use(T);exports.Alert=P.default;exports.BackLink=e.default;exports.PktBackLink=e.PktBackLink;exports.Breadcrumbs=t.default;exports.PktBreadcrumbs=t.PktBreadcrumbs;exports.Button=p.default;exports.Checkbox=r.default;exports.PktCheckbox=r.PktCheckbox;exports.Footer=u.default;exports.PktFooter=u.PktFooter;exports.FooterSimple=a.default;exports.PktFooterSimple=a.PktFooterSimple;exports.Header=o.default;exports.PktHeader=o.PktHeader;exports.Icon=b.default;exports.InputWrapper=q.default;exports.Messagebox=n.default;exports.PktMessagebox=n.PktMessagebox;exports.Linkcard=l.default;exports.PktLinkcard=l.PktLinkcard;exports.PktRadiobutton=i.PktRadiobutton;exports.Radiobutton=i.default;exports.PktSelect=c.PktSelect;exports.Select=c.default;exports.PktTabs=d.PktTabs;exports.Tabs=d.default;exports.Tag=x.default;exports.PktTextarea=s.PktTextarea;exports.Textarea=s.default;exports.PktTextinput=k.PktTextinput;exports.Textinput=k.default;exports.PktAlert=S.PktAlert;exports.PktButton=I.PktButton;exports.PktIcon=F.PktIcon;exports.PktInputWrapper=L.PktInputWrapper;exports.PktTag=M.Tag;exports.default=T;
|
package/dist/punkt-vue-index.js
CHANGED
|
@@ -1,38 +1,40 @@
|
|
|
1
1
|
import e from "./punkt-vue-alert.js";
|
|
2
2
|
import m from "./punkt-vue-backlink.js";
|
|
3
|
-
import { PktBackLink as
|
|
3
|
+
import { PktBackLink as N } from "./punkt-vue-backlink.js";
|
|
4
4
|
import a from "./punkt-vue-breadcrumbs.js";
|
|
5
|
-
import { PktBreadcrumbs as
|
|
5
|
+
import { PktBreadcrumbs as U } from "./punkt-vue-breadcrumbs.js";
|
|
6
6
|
import i from "./punkt-vue-button.js";
|
|
7
7
|
import p from "./punkt-vue-checkbox.js";
|
|
8
|
-
import { PktCheckbox as
|
|
8
|
+
import { PktCheckbox as X } from "./punkt-vue-checkbox.js";
|
|
9
9
|
import n from "./punkt-vue-footer.js";
|
|
10
|
-
import { PktFooter as
|
|
10
|
+
import { PktFooter as Z } from "./punkt-vue-footer.js";
|
|
11
11
|
import s from "./punkt-vue-footersimple.js";
|
|
12
|
-
import { PktFooterSimple as
|
|
13
|
-
import
|
|
14
|
-
import { PktHeader as
|
|
15
|
-
import
|
|
16
|
-
import
|
|
12
|
+
import { PktFooterSimple as ro } from "./punkt-vue-footersimple.js";
|
|
13
|
+
import P from "./punkt-vue-header.js";
|
|
14
|
+
import { PktHeader as eo } from "./punkt-vue-header.js";
|
|
15
|
+
import f from "./punkt-vue-icon.js";
|
|
16
|
+
import u from "./punkt-vue-inputwrapper.js";
|
|
17
17
|
import l from "./punkt-vue-messagebox.js";
|
|
18
|
-
import { PktMessagebox as
|
|
18
|
+
import { PktMessagebox as ao } from "./punkt-vue-messagebox.js";
|
|
19
19
|
import k from "./punkt-vue-linkcard.js";
|
|
20
|
-
import { PktLinkcard as
|
|
20
|
+
import { PktLinkcard as po } from "./punkt-vue-linkcard.js";
|
|
21
21
|
import x from "./punkt-vue-radiobutton.js";
|
|
22
|
-
import { PktRadiobutton as
|
|
22
|
+
import { PktRadiobutton as so } from "./punkt-vue-radiobutton.js";
|
|
23
23
|
import g from "./punkt-vue-select.js";
|
|
24
|
-
import { PktSelect as
|
|
25
|
-
import c from "./punkt-vue-
|
|
26
|
-
import {
|
|
27
|
-
import b from "./punkt-vue-
|
|
28
|
-
import
|
|
24
|
+
import { PktSelect as fo } from "./punkt-vue-select.js";
|
|
25
|
+
import c from "./punkt-vue-tabs.js";
|
|
26
|
+
import { PktTabs as lo } from "./punkt-vue-tabs.js";
|
|
27
|
+
import b from "./punkt-vue-tag.js";
|
|
28
|
+
import $ from "./punkt-vue-textarea.js";
|
|
29
|
+
import { PktTextarea as xo } from "./punkt-vue-textarea.js";
|
|
29
30
|
import d from "./punkt-vue-textinput.js";
|
|
30
|
-
import { PktTextinput as
|
|
31
|
-
import { u as
|
|
32
|
-
import { P as
|
|
33
|
-
import { P as
|
|
34
|
-
import { P as
|
|
35
|
-
import { P as
|
|
31
|
+
import { PktTextinput as co } from "./punkt-vue-textinput.js";
|
|
32
|
+
import { u as T, r as B } from "./plugins-IeJb3XDX.js";
|
|
33
|
+
import { P as $o } from "./Alert-eoZOqLMh.js";
|
|
34
|
+
import { P as Bo } from "./Button-oFCw2kbo.js";
|
|
35
|
+
import { P as Fo } from "./Icon-s3ZNrtl-.js";
|
|
36
|
+
import { P as Lo } from "./InputWrapper--d9sdKAg.js";
|
|
37
|
+
import { T as Mo } from "./Tag-Tuksu2Zp.js";
|
|
36
38
|
import "vue";
|
|
37
39
|
const o = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
38
40
|
__proto__: null,
|
|
@@ -43,23 +45,24 @@ const o = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
|
43
45
|
Checkbox: p,
|
|
44
46
|
Footer: n,
|
|
45
47
|
FooterSimple: s,
|
|
46
|
-
Header:
|
|
47
|
-
Icon:
|
|
48
|
-
InputWrapper:
|
|
48
|
+
Header: P,
|
|
49
|
+
Icon: f,
|
|
50
|
+
InputWrapper: u,
|
|
49
51
|
Linkcard: k,
|
|
50
52
|
Messagebox: l,
|
|
51
53
|
Radiobutton: x,
|
|
52
54
|
Select: g,
|
|
53
|
-
|
|
54
|
-
|
|
55
|
+
Tabs: c,
|
|
56
|
+
Tag: b,
|
|
57
|
+
Textarea: $,
|
|
55
58
|
Textinput: d
|
|
56
|
-
}, Symbol.toStringTag, { value: "Module" })),
|
|
57
|
-
install(r,
|
|
59
|
+
}, Symbol.toStringTag, { value: "Module" })), S = {
|
|
60
|
+
install(r, F = {}) {
|
|
58
61
|
for (const t in o)
|
|
59
|
-
|
|
62
|
+
B(r, o[t]);
|
|
60
63
|
}
|
|
61
64
|
};
|
|
62
|
-
|
|
65
|
+
T(S);
|
|
63
66
|
export {
|
|
64
67
|
e as Alert,
|
|
65
68
|
m as BackLink,
|
|
@@ -68,32 +71,34 @@ export {
|
|
|
68
71
|
p as Checkbox,
|
|
69
72
|
n as Footer,
|
|
70
73
|
s as FooterSimple,
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
+
P as Header,
|
|
75
|
+
f as Icon,
|
|
76
|
+
u as InputWrapper,
|
|
74
77
|
k as Linkcard,
|
|
75
78
|
l as Messagebox,
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
xo as
|
|
79
|
+
$o as PktAlert,
|
|
80
|
+
N as PktBackLink,
|
|
81
|
+
U as PktBreadcrumbs,
|
|
82
|
+
Bo as PktButton,
|
|
83
|
+
X as PktCheckbox,
|
|
84
|
+
Z as PktFooter,
|
|
85
|
+
ro as PktFooterSimple,
|
|
86
|
+
eo as PktHeader,
|
|
87
|
+
Fo as PktIcon,
|
|
88
|
+
Lo as PktInputWrapper,
|
|
89
|
+
po as PktLinkcard,
|
|
90
|
+
ao as PktMessagebox,
|
|
91
|
+
so as PktRadiobutton,
|
|
92
|
+
fo as PktSelect,
|
|
93
|
+
lo as PktTabs,
|
|
94
|
+
Mo as PktTag,
|
|
95
|
+
xo as PktTextarea,
|
|
96
|
+
co as PktTextinput,
|
|
93
97
|
x as Radiobutton,
|
|
94
98
|
g as Select,
|
|
95
|
-
c as
|
|
96
|
-
b as
|
|
99
|
+
c as Tabs,
|
|
100
|
+
b as Tag,
|
|
101
|
+
$ as Textarea,
|
|
97
102
|
d as Textinput,
|
|
98
|
-
|
|
103
|
+
S as default
|
|
99
104
|
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),g=require("./Tag-RznZVoXr.cjs"),v=require("./Icon-Q_SkpRJa.cjs"),k=require("./plugins-AiK__HqQ.cjs"),b={class:"pkt-tabs"},h=["role"],d={__name:"Tabs",props:{arrowNav:{type:Boolean,default:!0},tabs:{type:Array,default:[],validator(o){for(const l in o){const c=o[l];if(!c.text)return!1;for(const[s,a]of Object.entries(c))switch(s){case"action":if(typeof a!="function")return!1;break;case"tag":if(typeof a!="object")return!1;break;case"active":if(typeof a!="boolean")return!1;break;case"controls":case"text":case"href":case"icon":if(typeof a!="string")return!1;break;default:return console.warn("Tab object can only contain text, href, action, icon, tag and active keys"),!1}}return!0}}},emits:["onTabSelected"],setup(o,{emit:l}){const{arrowNav:c,tabs:s}=o,a=e.ref([]),m=l,f=(r,n)=>{n.action&&n.action(r),m("onTabSelected",r)},y=(r,n)=>{c&&(n.code==="ArrowLeft"&&r!==0&&a.value[r-1].focus(),n.code==="ArrowRight"&&r<s.length-1&&a.value[r+1].focus(),(n.code==="ArrowDown"||n.code==="Space")&&f(r,s[r]))};return(r,n)=>(e.openBlock(),e.createElementBlock("div",b,[e.createElementVNode("div",{class:"pkt-tabs__list",role:o.arrowNav?"tablist":"navigation"},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.tabs,(t,i)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.href?"a":"button"),{role:o.arrowNav?"tab":void 0,"aria-selected":!!t.active,href:t.href||void 0,type:t.href?void 0:"button","aria-controls":t.controls,class:e.normalizeClass({"pkt-tabs__link":t.href,"pkt-tabs__button pkt-link-button":!t.href,active:t.active}),tabindex:o.arrowNav?t.active?0:-1:void 0,key:i,ref_for:!0,ref_key:"tabRefs",ref:a,onClick:u=>f(i,t),onKeyup:u=>y(i,u)},{default:e.withCtx(()=>[t.icon?(e.openBlock(),e.createBlock(v.PktIcon,{key:0,name:t.icon,class:"pkt-icon--small"},null,8,["name"])):e.createCommentVNode("",!0),e.createTextVNode(" "+e.toDisplayString(t.text)+" ",1),t.tag?(e.openBlock(),e.createBlock(g.Tag,{key:1,skin:t.tag.skin,size:"small"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.tag.text),1)]),_:2},1032,["skin"])):e.createCommentVNode("",!0)]),_:2},1064,["role","aria-selected","href","type","aria-controls","class","tabindex","onClick","onKeyup"]))),128))],8,h)]))}},p={install(o){k.registerComponent(o,d)}};k.use(p);exports.PktTabs=d;exports.default=p;
|
|
@@ -0,0 +1,130 @@
|
|
|
1
|
+
import { ref as g, openBlock as n, createElementBlock as d, createElementVNode as w, Fragment as _, renderList as T, createBlock as f, resolveDynamicComponent as N, normalizeClass as C, withCtx as m, createCommentVNode as p, createTextVNode as y, toDisplayString as h } from "vue";
|
|
2
|
+
import { T as P } from "./Tag-Tuksu2Zp.js";
|
|
3
|
+
import { P as A } from "./Icon-s3ZNrtl-.js";
|
|
4
|
+
import { u as B, a as S } from "./plugins-IeJb3XDX.js";
|
|
5
|
+
const j = { class: "pkt-tabs" }, x = ["role"], D = {
|
|
6
|
+
__name: "Tabs",
|
|
7
|
+
props: {
|
|
8
|
+
/*
|
|
9
|
+
Normal tabs with inline content change should use arrow keys to navigate.
|
|
10
|
+
If used for page navigation, this prop should be false
|
|
11
|
+
*/
|
|
12
|
+
arrowNav: {
|
|
13
|
+
type: Boolean,
|
|
14
|
+
default: !0
|
|
15
|
+
},
|
|
16
|
+
/* `tabs` is an array of objects that make up the tabs
|
|
17
|
+
[{
|
|
18
|
+
text: 'Tab 1', // Required, text for tab
|
|
19
|
+
href: '/page1', // Optional, creates a link for the tab
|
|
20
|
+
active: true, // Optional, sets active tab
|
|
21
|
+
action: doThis, // Optional, triggers a function when clicking the link
|
|
22
|
+
controls: 'tab1panel', // Optional, adds `aria-controls` attribute to tab
|
|
23
|
+
icon: 'user', // Optional, icon for the tab, uses PktIcon
|
|
24
|
+
tag: { // Optional, tag for the tab, uses PktTag
|
|
25
|
+
text: 'Tag',
|
|
26
|
+
skin: 'green',
|
|
27
|
+
},
|
|
28
|
+
}]
|
|
29
|
+
*/
|
|
30
|
+
tabs: {
|
|
31
|
+
type: Array,
|
|
32
|
+
default: [],
|
|
33
|
+
validator(t) {
|
|
34
|
+
for (const i in t) {
|
|
35
|
+
const s = t[i];
|
|
36
|
+
if (!s.text)
|
|
37
|
+
return !1;
|
|
38
|
+
for (const [c, o] of Object.entries(s))
|
|
39
|
+
switch (c) {
|
|
40
|
+
case "action":
|
|
41
|
+
if (typeof o != "function")
|
|
42
|
+
return !1;
|
|
43
|
+
break;
|
|
44
|
+
case "tag":
|
|
45
|
+
if (typeof o != "object")
|
|
46
|
+
return !1;
|
|
47
|
+
break;
|
|
48
|
+
case "active":
|
|
49
|
+
if (typeof o != "boolean")
|
|
50
|
+
return !1;
|
|
51
|
+
break;
|
|
52
|
+
case "controls":
|
|
53
|
+
case "text":
|
|
54
|
+
case "href":
|
|
55
|
+
case "icon":
|
|
56
|
+
if (typeof o != "string")
|
|
57
|
+
return !1;
|
|
58
|
+
break;
|
|
59
|
+
default:
|
|
60
|
+
return console.warn("Tab object can only contain text, href, action, icon, tag and active keys"), !1;
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
return !0;
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
},
|
|
67
|
+
emits: ["onTabSelected"],
|
|
68
|
+
setup(t, { emit: i }) {
|
|
69
|
+
const { arrowNav: s, tabs: c } = t, o = g([]), b = i, u = (a, r) => {
|
|
70
|
+
r.action && r.action(a), b("onTabSelected", a);
|
|
71
|
+
}, v = (a, r) => {
|
|
72
|
+
s && (r.code === "ArrowLeft" && a !== 0 && o.value[a - 1].focus(), r.code === "ArrowRight" && a < c.length - 1 && o.value[a + 1].focus(), (r.code === "ArrowDown" || r.code === "Space") && u(a, c[a]));
|
|
73
|
+
};
|
|
74
|
+
return (a, r) => (n(), d("div", j, [
|
|
75
|
+
w("div", {
|
|
76
|
+
class: "pkt-tabs__list",
|
|
77
|
+
role: t.arrowNav ? "tablist" : "navigation"
|
|
78
|
+
}, [
|
|
79
|
+
(n(!0), d(_, null, T(t.tabs, (e, l) => (n(), f(N(e.href ? "a" : "button"), {
|
|
80
|
+
role: t.arrowNav ? "tab" : void 0,
|
|
81
|
+
"aria-selected": !!e.active,
|
|
82
|
+
href: e.href || void 0,
|
|
83
|
+
type: e.href ? void 0 : "button",
|
|
84
|
+
"aria-controls": e.controls,
|
|
85
|
+
class: C({
|
|
86
|
+
"pkt-tabs__link": e.href,
|
|
87
|
+
"pkt-tabs__button pkt-link-button": !e.href,
|
|
88
|
+
active: e.active
|
|
89
|
+
}),
|
|
90
|
+
tabindex: t.arrowNav ? e.active ? 0 : -1 : void 0,
|
|
91
|
+
key: l,
|
|
92
|
+
ref_for: !0,
|
|
93
|
+
ref_key: "tabRefs",
|
|
94
|
+
ref: o,
|
|
95
|
+
onClick: (k) => u(l, e),
|
|
96
|
+
onKeyup: (k) => v(l, k)
|
|
97
|
+
}, {
|
|
98
|
+
default: m(() => [
|
|
99
|
+
e.icon ? (n(), f(A, {
|
|
100
|
+
key: 0,
|
|
101
|
+
name: e.icon,
|
|
102
|
+
class: "pkt-icon--small"
|
|
103
|
+
}, null, 8, ["name"])) : p("", !0),
|
|
104
|
+
y(" " + h(e.text) + " ", 1),
|
|
105
|
+
e.tag ? (n(), f(P, {
|
|
106
|
+
key: 1,
|
|
107
|
+
skin: e.tag.skin,
|
|
108
|
+
size: "small"
|
|
109
|
+
}, {
|
|
110
|
+
default: m(() => [
|
|
111
|
+
y(h(e.tag.text), 1)
|
|
112
|
+
]),
|
|
113
|
+
_: 2
|
|
114
|
+
}, 1032, ["skin"])) : p("", !0)
|
|
115
|
+
]),
|
|
116
|
+
_: 2
|
|
117
|
+
}, 1064, ["role", "aria-selected", "href", "type", "aria-controls", "class", "tabindex", "onClick", "onKeyup"]))), 128))
|
|
118
|
+
], 8, x)
|
|
119
|
+
]));
|
|
120
|
+
}
|
|
121
|
+
}, K = {
|
|
122
|
+
install(t) {
|
|
123
|
+
S(t, D);
|
|
124
|
+
}
|
|
125
|
+
};
|
|
126
|
+
B(K);
|
|
127
|
+
export {
|
|
128
|
+
D as PktTabs,
|
|
129
|
+
K as default
|
|
130
|
+
};
|
package/dist/punkt-vue-tag.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./Tag-RznZVoXr.cjs"),r=require("./plugins-AiK__HqQ.cjs");require("./Icon-Q_SkpRJa.cjs");require("vue");const t={install(u){r.registerComponent(u,e.Tag)}};r.use(t);exports.PktTag=e.Tag;exports.default=t;
|
package/dist/punkt-vue-tag.js
CHANGED
|
@@ -1,146 +1,14 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
components: { PktIcon: g },
|
|
7
|
-
props: {
|
|
8
|
-
skin: {
|
|
9
|
-
type: String,
|
|
10
|
-
default: "blue",
|
|
11
|
-
validator(t) {
|
|
12
|
-
return ["blue", "green", "red", "beige", "yellow", "grey", "blue-light"].includes(t);
|
|
13
|
-
}
|
|
14
|
-
},
|
|
15
|
-
textStyle: {
|
|
16
|
-
type: String,
|
|
17
|
-
default: "normal-text",
|
|
18
|
-
validator(t) {
|
|
19
|
-
return ["thin-text", "normal-text"].includes(t);
|
|
20
|
-
}
|
|
21
|
-
},
|
|
22
|
-
size: {
|
|
23
|
-
type: String,
|
|
24
|
-
default: "medium",
|
|
25
|
-
validator(t) {
|
|
26
|
-
return ["small", "medium", "large"].includes(t);
|
|
27
|
-
}
|
|
28
|
-
},
|
|
29
|
-
closeTag: {
|
|
30
|
-
type: Boolean,
|
|
31
|
-
default: !1
|
|
32
|
-
},
|
|
33
|
-
iconName: {
|
|
34
|
-
type: String,
|
|
35
|
-
default: ""
|
|
36
|
-
},
|
|
37
|
-
type: {
|
|
38
|
-
type: String,
|
|
39
|
-
default: "button",
|
|
40
|
-
validator: (t) => ["button", "submit", "reset"].includes(t)
|
|
41
|
-
},
|
|
42
|
-
ariaLabel: {
|
|
43
|
-
type: String,
|
|
44
|
-
default: "close"
|
|
45
|
-
}
|
|
46
|
-
},
|
|
47
|
-
data: () => ({
|
|
48
|
-
closed: !1
|
|
49
|
-
}),
|
|
50
|
-
methods: {
|
|
51
|
-
close() {
|
|
52
|
-
this.closed = !0, this.$emit("on-close", this.closed);
|
|
53
|
-
}
|
|
54
|
-
},
|
|
55
|
-
computed: {
|
|
56
|
-
skinClass() {
|
|
57
|
-
return [`pkt-tag--${this.skin}`];
|
|
58
|
-
},
|
|
59
|
-
sizeClass() {
|
|
60
|
-
return [`pkt-tag--${this.size}`];
|
|
61
|
-
},
|
|
62
|
-
textStyleClass() {
|
|
63
|
-
return [`pkt-tag--${this.textStyle}`];
|
|
64
|
-
},
|
|
65
|
-
buttonClass() {
|
|
66
|
-
return [
|
|
67
|
-
"pkt-tag",
|
|
68
|
-
"pkt-btn",
|
|
69
|
-
"pkt-btn--tertiary",
|
|
70
|
-
{
|
|
71
|
-
"pkt-btn--icons-right-and-left": this.iconName && this.closeTag,
|
|
72
|
-
"pkt-btn--icon-right": this.closeTag && !this.iconName
|
|
73
|
-
}
|
|
74
|
-
];
|
|
75
|
-
},
|
|
76
|
-
open() {
|
|
77
|
-
return !this.closed;
|
|
78
|
-
}
|
|
79
|
-
}
|
|
80
|
-
}, h = ["type", "aria-label"], _ = ["type", "aria-label"];
|
|
81
|
-
function p(t, a, l, N, T, e) {
|
|
82
|
-
const i = y("pkt-icon");
|
|
83
|
-
return n(), r("span", null, [
|
|
84
|
-
l.closeTag && l.iconName ? d((n(), r("button", {
|
|
85
|
-
key: 0,
|
|
86
|
-
class: c([e.buttonClass, e.skinClass, e.sizeClass, e.textStyleClass]),
|
|
87
|
-
type: l.type,
|
|
88
|
-
role: "button",
|
|
89
|
-
"aria-label": l.ariaLabel,
|
|
90
|
-
onKeyup: a[0] || (a[0] = m((...s) => e.close && e.close(...s), ["enter"])),
|
|
91
|
-
onClick: a[1] || (a[1] = (...s) => e.close && e.close(...s))
|
|
92
|
-
}, [
|
|
93
|
-
u(i, {
|
|
94
|
-
class: "pkt-tag__icon",
|
|
95
|
-
name: l.iconName
|
|
96
|
-
}, null, 8, ["name"]),
|
|
97
|
-
o(t.$slots, "default"),
|
|
98
|
-
u(i, {
|
|
99
|
-
class: "pkt-tag__close-btn",
|
|
100
|
-
name: "close"
|
|
101
|
-
})
|
|
102
|
-
], 42, h)), [
|
|
103
|
-
[k, e.open]
|
|
104
|
-
]) : l.closeTag ? d((n(), r("button", {
|
|
105
|
-
key: 1,
|
|
106
|
-
class: c([e.buttonClass, e.skinClass, e.sizeClass, e.textStyleClass]),
|
|
107
|
-
type: l.type,
|
|
108
|
-
role: "button",
|
|
109
|
-
"aria-label": l.ariaLabel,
|
|
110
|
-
onKeyup: a[2] || (a[2] = m((...s) => e.close && e.close(...s), ["enter"])),
|
|
111
|
-
onClick: a[3] || (a[3] = (...s) => e.close && e.close(...s))
|
|
112
|
-
}, [
|
|
113
|
-
u(i, {
|
|
114
|
-
class: "pkt-tag__close-btn",
|
|
115
|
-
name: "close"
|
|
116
|
-
}),
|
|
117
|
-
o(t.$slots, "default")
|
|
118
|
-
], 42, _)), [
|
|
119
|
-
[k, e.open]
|
|
120
|
-
]) : l.iconName ? (n(), r("span", {
|
|
121
|
-
key: 2,
|
|
122
|
-
class: c(["pkt-tag", [e.skinClass, e.sizeClass, e.textStyleClass]])
|
|
123
|
-
}, [
|
|
124
|
-
u(i, {
|
|
125
|
-
class: "pkt-tag__icon",
|
|
126
|
-
name: l.iconName
|
|
127
|
-
}, null, 8, ["name"]),
|
|
128
|
-
o(t.$slots, "default")
|
|
129
|
-
], 2)) : (n(), r("span", {
|
|
130
|
-
key: 3,
|
|
131
|
-
class: c(["pkt-tag", [e.skinClass, e.sizeClass, e.textStyleClass]])
|
|
132
|
-
}, [
|
|
133
|
-
o(t.$slots, "default")
|
|
134
|
-
], 2))
|
|
135
|
-
]);
|
|
136
|
-
}
|
|
137
|
-
const x = /* @__PURE__ */ b(S, [["render", p]]), z = {
|
|
1
|
+
import { T as a } from "./Tag-Tuksu2Zp.js";
|
|
2
|
+
import { u as o, a as r } from "./plugins-IeJb3XDX.js";
|
|
3
|
+
import "./Icon-s3ZNrtl-.js";
|
|
4
|
+
import "vue";
|
|
5
|
+
const s = {
|
|
138
6
|
install(t) {
|
|
139
|
-
|
|
7
|
+
r(t, a);
|
|
140
8
|
}
|
|
141
9
|
};
|
|
142
|
-
|
|
10
|
+
o(s);
|
|
143
11
|
export {
|
|
144
|
-
|
|
145
|
-
|
|
12
|
+
a as PktTag,
|
|
13
|
+
s as default
|
|
146
14
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@oslokommune/punkt-vue",
|
|
3
|
-
"version": "11.
|
|
3
|
+
"version": "11.2.1",
|
|
4
4
|
"description": "Vue komponentbibliotek til Punkt, et designsystem laget av Oslo Origo",
|
|
5
5
|
"homepage": "https://punkt.oslo.kommune.no",
|
|
6
6
|
"author": "Team Designsystem, Oslo Origo",
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
},
|
|
28
28
|
"devDependencies": {
|
|
29
29
|
"@oslokommune/punkt-assets": "^11.0.0",
|
|
30
|
-
"@oslokommune/punkt-css": "^11.
|
|
30
|
+
"@oslokommune/punkt-css": "^11.2.1",
|
|
31
31
|
"@vitejs/plugin-vue": "^4.5.2",
|
|
32
32
|
"edit-json-file": "^1.7.0",
|
|
33
33
|
"sass": "^1.69.5",
|
|
@@ -65,5 +65,5 @@
|
|
|
65
65
|
"url": "https://github.com/oslokommune/punkt/issues"
|
|
66
66
|
},
|
|
67
67
|
"license": "MIT",
|
|
68
|
-
"gitHead": "
|
|
68
|
+
"gitHead": "02457b5ee64acaed11aaa48c55c11f5c75ecd302"
|
|
69
69
|
}
|
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="pkt-tabs">
|
|
3
|
+
<div class="pkt-tabs__list" :role="arrowNav ? 'tablist' : 'navigation'">
|
|
4
|
+
<component
|
|
5
|
+
v-for="(tab, index) in tabs"
|
|
6
|
+
:role="arrowNav ? 'tab' : undefined"
|
|
7
|
+
:aria-selected="!!tab.active"
|
|
8
|
+
:is="tab.href ? 'a' : 'button'"
|
|
9
|
+
:href="tab.href || undefined"
|
|
10
|
+
:type="!tab.href ? 'button' : undefined"
|
|
11
|
+
:aria-controls="tab.controls"
|
|
12
|
+
:class="{
|
|
13
|
+
'pkt-tabs__link': tab.href,
|
|
14
|
+
'pkt-tabs__button pkt-link-button': !tab.href,
|
|
15
|
+
active: tab.active,
|
|
16
|
+
}"
|
|
17
|
+
:tabindex="!arrowNav ? undefined : tab.active ? 0 : -1"
|
|
18
|
+
:key="index"
|
|
19
|
+
ref="tabRefs"
|
|
20
|
+
@click="selectTab(index, tab)"
|
|
21
|
+
@keyup="handleKeyPress(index, $event)"
|
|
22
|
+
>
|
|
23
|
+
<PktIcon :name="tab.icon" class="pkt-icon--small" v-if="tab.icon" />
|
|
24
|
+
{{ tab.text }}
|
|
25
|
+
<PktTag :skin="tab.tag.skin" size="small" v-if="tab.tag">{{ tab.tag.text }}</PktTag>
|
|
26
|
+
</component>
|
|
27
|
+
</div>
|
|
28
|
+
</div>
|
|
29
|
+
</template>
|
|
30
|
+
|
|
31
|
+
<script setup>
|
|
32
|
+
import PktTag from '../tag/Tag.vue'
|
|
33
|
+
import PktIcon from '../icon/Icon.vue'
|
|
34
|
+
import { ref } from 'vue'
|
|
35
|
+
|
|
36
|
+
const { arrowNav, tabs } = defineProps({
|
|
37
|
+
/*
|
|
38
|
+
Normal tabs with inline content change should use arrow keys to navigate.
|
|
39
|
+
If used for page navigation, this prop should be false
|
|
40
|
+
*/
|
|
41
|
+
arrowNav: {
|
|
42
|
+
type: Boolean,
|
|
43
|
+
default: true,
|
|
44
|
+
},
|
|
45
|
+
/* `tabs` is an array of objects that make up the tabs
|
|
46
|
+
[{
|
|
47
|
+
text: 'Tab 1', // Required, text for tab
|
|
48
|
+
href: '/page1', // Optional, creates a link for the tab
|
|
49
|
+
active: true, // Optional, sets active tab
|
|
50
|
+
action: doThis, // Optional, triggers a function when clicking the link
|
|
51
|
+
controls: 'tab1panel', // Optional, adds `aria-controls` attribute to tab
|
|
52
|
+
icon: 'user', // Optional, icon for the tab, uses PktIcon
|
|
53
|
+
tag: { // Optional, tag for the tab, uses PktTag
|
|
54
|
+
text: 'Tag',
|
|
55
|
+
skin: 'green',
|
|
56
|
+
},
|
|
57
|
+
}]
|
|
58
|
+
*/
|
|
59
|
+
tabs: {
|
|
60
|
+
type: Array,
|
|
61
|
+
default: [],
|
|
62
|
+
validator(value) {
|
|
63
|
+
for (const t in value) {
|
|
64
|
+
const tab = value[t]
|
|
65
|
+
if (!tab.text) return false
|
|
66
|
+
for (const [k, v] of Object.entries(tab)) {
|
|
67
|
+
switch (k) {
|
|
68
|
+
case 'action':
|
|
69
|
+
if (typeof v !== 'function') return false
|
|
70
|
+
break
|
|
71
|
+
case 'tag':
|
|
72
|
+
if (typeof v !== 'object') return false
|
|
73
|
+
break
|
|
74
|
+
case 'active':
|
|
75
|
+
if (typeof v !== 'boolean') return false
|
|
76
|
+
break
|
|
77
|
+
case 'controls':
|
|
78
|
+
case 'text':
|
|
79
|
+
case 'href':
|
|
80
|
+
case 'icon':
|
|
81
|
+
if (typeof v !== 'string') return false
|
|
82
|
+
break
|
|
83
|
+
default:
|
|
84
|
+
// If none of the above hits, we're receiving invalid props
|
|
85
|
+
console.warn('Tab object can only contain text, href, action, icon, tag and active keys')
|
|
86
|
+
return false
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
return true
|
|
91
|
+
},
|
|
92
|
+
},
|
|
93
|
+
})
|
|
94
|
+
|
|
95
|
+
const tabRefs = ref([])
|
|
96
|
+
|
|
97
|
+
const emit = defineEmits(['onTabSelected'])
|
|
98
|
+
|
|
99
|
+
const selectTab = (index, tab) => {
|
|
100
|
+
// If the tag has an `action` function: trigger it
|
|
101
|
+
if (tab.action) tab.action(index)
|
|
102
|
+
// But always emit `onTabSelected` though
|
|
103
|
+
emit('onTabSelected', index)
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
const handleKeyPress = (index, event) => {
|
|
107
|
+
if (arrowNav) {
|
|
108
|
+
if (event.code === 'ArrowLeft' && index !== 0) {
|
|
109
|
+
tabRefs.value[index - 1].focus()
|
|
110
|
+
}
|
|
111
|
+
if (event.code === 'ArrowRight' && index < tabs.length - 1) {
|
|
112
|
+
tabRefs.value[index + 1].focus()
|
|
113
|
+
}
|
|
114
|
+
if (event.code === 'ArrowDown' || event.code === 'Space') {
|
|
115
|
+
selectTab(index, tabs[index])
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
</script>
|