@oslokommune/punkt-vue 11.4.8 → 11.5.0
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 +81 -0
- package/dist/punkt-vue-index.cjs +1 -1
- package/dist/punkt-vue-index.js +65 -60
- package/dist/punkt-vue-loader.cjs +1 -0
- package/dist/punkt-vue-loader.js +59 -0
- package/package.json +4 -4
- package/src/components/loader/Loader.vue +48 -0
package/CHANGELOG.md
CHANGED
|
@@ -5,6 +5,87 @@ og skriver commits ca etter [Conventional Commits](https://conventionalcommits.o
|
|
|
5
5
|
|
|
6
6
|
---
|
|
7
7
|
|
|
8
|
+
## [11.5.0](https://github.com/oslokommune/punkt/compare/11.4.9...11.5.0) (2024-02-14)
|
|
9
|
+
|
|
10
|
+
### ⚠ BREAKING CHANGES
|
|
11
|
+
Ingen
|
|
12
|
+
|
|
13
|
+
### Features
|
|
14
|
+
* Loader, tre varianter (#1490). * feat(react): loader with variants (#1489)
|
|
15
|
+
- add react loader
|
|
16
|
+
- add size options: "small", "medium" and "large"
|
|
17
|
+
- add text option
|
|
18
|
+
- add accessibility labels
|
|
19
|
+
- add variants
|
|
20
|
+
- Note to self: always re-run the server when changing css (no hot reloading on the css)
|
|
21
|
+
|
|
22
|
+
* feat(react): loader
|
|
23
|
+
- Fix svg fetching
|
|
24
|
+
|
|
25
|
+
* feat(react): add tests and specs
|
|
26
|
+
- NB! Consider adding some test for checking if the svg is fetched properly if that is relevant
|
|
27
|
+
|
|
28
|
+
* La til inline, ryddet litt, fikset tester
|
|
29
|
+
|
|
30
|
+
* Branch heter "react" men jeg legger med Vue-versjonen også…
|
|
31
|
+
|
|
32
|
+
* Laget CSS-testview og ryddet litt i Vue-komponent
|
|
33
|
+
|
|
34
|
+
---------
|
|
35
|
+
|
|
36
|
+
Co-authored-by: Jan Schjetne <jan.schjetne@origo.oslo.kommune.no>
|
|
37
|
+
|
|
38
|
+
* Oppdatere Loader-specs
|
|
39
|
+
|
|
40
|
+
* Dokumentasjon-ressurser
|
|
41
|
+
|
|
42
|
+
* Fjernet innhold
|
|
43
|
+
|
|
44
|
+
* Aria-live burde ikke forsvinne selv om det ikke loades
|
|
45
|
+
|
|
46
|
+
* docs:#1473 loader dokumentasjon (#1492)
|
|
47
|
+
|
|
48
|
+
* docs:#1473 Lagt til bilder
|
|
49
|
+
|
|
50
|
+
* docs:#1473 Lagt til innhold
|
|
51
|
+
|
|
52
|
+
* docs:#1473 Oppdatert bildenavn
|
|
53
|
+
|
|
54
|
+
* docs:#1473 Tester GIF
|
|
55
|
+
|
|
56
|
+
* docs:#1473 Lagt til GIF
|
|
57
|
+
|
|
58
|
+
* docs:#1473 Oppdaterte bilder
|
|
59
|
+
|
|
60
|
+
* chore(docs): legg til kode dokumentasjon
|
|
61
|
+
|
|
62
|
+
* chore(docs): svg importering og UU docs
|
|
63
|
+
|
|
64
|
+
- Importerer spinner og loader SVGene slik at vi kan bruke de med <use>
|
|
65
|
+
- Oppdaterer UU docs
|
|
66
|
+
- Legger til CodeExample i loader index docs
|
|
67
|
+
|
|
68
|
+
* chore(docs): add doc about comp usage as wrapper
|
|
69
|
+
|
|
70
|
+
---------
|
|
71
|
+
|
|
72
|
+
Co-authored-by: My Thao Nguyen <my.nguyen@origo.oslo.kommune.no>
|
|
73
|
+
|
|
74
|
+
---------
|
|
75
|
+
|
|
76
|
+
Co-authored-by: My T. Nguyen <my.nguyen@origo.oslo.kommune.no>
|
|
77
|
+
Co-authored-by: Victoria Nerem <118815886+vicnerem@users.noreply.github.com>
|
|
78
|
+
|
|
79
|
+
|
|
80
|
+
### Bug Fixes
|
|
81
|
+
Ingen
|
|
82
|
+
|
|
83
|
+
### Chores
|
|
84
|
+
Ingen
|
|
85
|
+
|
|
86
|
+
---
|
|
87
|
+
|
|
88
|
+
|
|
8
89
|
## [11.4.0](https://github.com/oslokommune/punkt/compare/11.3.0...11.4.0) (2024-01-31)
|
|
9
90
|
|
|
10
91
|
### ⚠ BREAKING CHANGES
|
package/dist/punkt-vue-index.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 p=require("./punkt-vue-alert.cjs"),e=require("./punkt-vue-backlink.cjs"),t=require("./punkt-vue-breadcrumbs.cjs"),b=require("./punkt-vue-button.cjs"),r=require("./punkt-vue-checkbox.cjs"),a=require("./punkt-vue-footer.cjs"),u=require("./punkt-vue-footersimple.cjs"),o=require("./punkt-vue-header.cjs"),q=require("./punkt-vue-icon.cjs"),x=require("./punkt-vue-inputwrapper.cjs"),n=require("./punkt-vue-messagebox.cjs"),l=require("./punkt-vue-linkcard.cjs"),d=require("./punkt-vue-loader.cjs"),i=require("./punkt-vue-radiobutton.cjs"),c=require("./punkt-vue-select.cjs"),s=require("./punkt-vue-tabs.cjs"),g=require("./punkt-vue-tag.cjs"),k=require("./punkt-vue-textarea.cjs"),f=require("./punkt-vue-textinput.cjs"),T=require("./plugins-AiK__HqQ.cjs"),S=require("./Alert-E884mTfP.cjs"),I=require("./Button-h1iXT3rO.cjs"),F=require("./Icon-Q_SkpRJa.cjs"),M=require("./InputWrapper-ye0g5G2b.cjs"),h=require("./Tag-RznZVoXr.cjs");require("vue");const P=Object.freeze(Object.defineProperty({__proto__:null,Alert:p.default,BackLink:e.default,Breadcrumbs:t.default,Button:b.default,Checkbox:r.default,Footer:a.default,FooterSimple:u.default,Header:o.default,Icon:q.default,InputWrapper:x.default,Linkcard:l.default,Loader:d.default,Messagebox:n.default,Radiobutton:i.default,Select:c.default,Tabs:s.default,Tag:g.default,Textarea:k.default,Textinput:f.default},Symbol.toStringTag,{value:"Module"})),m={install(B,_={}){for(const L in P)T.registerPlugin(B,P[L])}};T.use(m);exports.Alert=p.default;exports.BackLink=e.default;exports.PktBackLink=e.PktBackLink;exports.Breadcrumbs=t.default;exports.PktBreadcrumbs=t.PktBreadcrumbs;exports.Button=b.default;exports.Checkbox=r.default;exports.PktCheckbox=r.PktCheckbox;exports.Footer=a.default;exports.PktFooter=a.PktFooter;exports.FooterSimple=u.default;exports.PktFooterSimple=u.PktFooterSimple;exports.Header=o.default;exports.PktHeader=o.PktHeader;exports.Icon=q.default;exports.InputWrapper=x.default;exports.Messagebox=n.default;exports.PktMessagebox=n.PktMessagebox;exports.Linkcard=l.default;exports.PktLinkcard=l.PktLinkcard;exports.Loader=d.default;exports.PktLoader=d.PktLoader;exports.PktRadiobutton=i.PktRadiobutton;exports.Radiobutton=i.default;exports.PktSelect=c.PktSelect;exports.Select=c.default;exports.PktTabs=s.PktTabs;exports.Tabs=s.default;exports.Tag=g.default;exports.PktTextarea=k.PktTextarea;exports.Textarea=k.default;exports.PktTextinput=f.PktTextinput;exports.Textinput=f.default;exports.PktAlert=S.PktAlert;exports.PktButton=I.PktButton;exports.PktIcon=F.PktIcon;exports.PktInputWrapper=M.PktInputWrapper;exports.PktTag=h.Tag;exports.default=m;
|
package/dist/punkt-vue-index.js
CHANGED
|
@@ -1,46 +1,48 @@
|
|
|
1
1
|
import e from "./punkt-vue-alert.js";
|
|
2
|
-
import
|
|
3
|
-
import { PktBackLink as
|
|
4
|
-
import
|
|
5
|
-
import { PktBreadcrumbs as
|
|
2
|
+
import a from "./punkt-vue-backlink.js";
|
|
3
|
+
import { PktBackLink as U } from "./punkt-vue-backlink.js";
|
|
4
|
+
import m from "./punkt-vue-breadcrumbs.js";
|
|
5
|
+
import { PktBreadcrumbs as X } 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 Z } from "./punkt-vue-checkbox.js";
|
|
9
9
|
import n from "./punkt-vue-footer.js";
|
|
10
|
-
import { PktFooter as
|
|
10
|
+
import { PktFooter as ro } from "./punkt-vue-footer.js";
|
|
11
11
|
import s from "./punkt-vue-footersimple.js";
|
|
12
|
-
import { PktFooterSimple as
|
|
12
|
+
import { PktFooterSimple as eo } from "./punkt-vue-footersimple.js";
|
|
13
13
|
import P from "./punkt-vue-header.js";
|
|
14
|
-
import { PktHeader as
|
|
14
|
+
import { PktHeader as mo } from "./punkt-vue-header.js";
|
|
15
15
|
import f from "./punkt-vue-icon.js";
|
|
16
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 po } from "./punkt-vue-messagebox.js";
|
|
19
19
|
import k from "./punkt-vue-linkcard.js";
|
|
20
|
-
import { PktLinkcard as
|
|
21
|
-
import x from "./punkt-vue-
|
|
22
|
-
import {
|
|
23
|
-
import g from "./punkt-vue-
|
|
24
|
-
import {
|
|
25
|
-
import c from "./punkt-vue-
|
|
26
|
-
import {
|
|
27
|
-
import b from "./punkt-vue-
|
|
20
|
+
import { PktLinkcard as so } from "./punkt-vue-linkcard.js";
|
|
21
|
+
import x from "./punkt-vue-loader.js";
|
|
22
|
+
import { PktLoader as fo } from "./punkt-vue-loader.js";
|
|
23
|
+
import g from "./punkt-vue-radiobutton.js";
|
|
24
|
+
import { PktRadiobutton as lo } from "./punkt-vue-radiobutton.js";
|
|
25
|
+
import c from "./punkt-vue-select.js";
|
|
26
|
+
import { PktSelect as xo } from "./punkt-vue-select.js";
|
|
27
|
+
import b from "./punkt-vue-tabs.js";
|
|
28
|
+
import { PktTabs as co } from "./punkt-vue-tabs.js";
|
|
29
|
+
import d from "./punkt-vue-tag.js";
|
|
28
30
|
import $ from "./punkt-vue-textarea.js";
|
|
29
|
-
import { PktTextarea as
|
|
30
|
-
import
|
|
31
|
-
import { PktTextinput as
|
|
32
|
-
import { u as
|
|
33
|
-
import { P as
|
|
34
|
-
import { P as
|
|
35
|
-
import { P as
|
|
36
|
-
import { P as
|
|
37
|
-
import { T as
|
|
31
|
+
import { PktTextarea as $o } from "./punkt-vue-textarea.js";
|
|
32
|
+
import T from "./punkt-vue-textinput.js";
|
|
33
|
+
import { PktTextinput as Bo } from "./punkt-vue-textinput.js";
|
|
34
|
+
import { u as B, r as L } from "./plugins-IeJb3XDX.js";
|
|
35
|
+
import { P as So } from "./Alert-vdgjfN8U.js";
|
|
36
|
+
import { P as Io } from "./Button-oFCw2kbo.js";
|
|
37
|
+
import { P as Mo } from "./Icon-s3ZNrtl-.js";
|
|
38
|
+
import { P as yo } from "./InputWrapper-0bqUciYi.js";
|
|
39
|
+
import { T as Co } from "./Tag-Tuksu2Zp.js";
|
|
38
40
|
import "vue";
|
|
39
41
|
const o = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
40
42
|
__proto__: null,
|
|
41
43
|
Alert: e,
|
|
42
|
-
BackLink:
|
|
43
|
-
Breadcrumbs:
|
|
44
|
+
BackLink: a,
|
|
45
|
+
Breadcrumbs: m,
|
|
44
46
|
Button: i,
|
|
45
47
|
Checkbox: p,
|
|
46
48
|
Footer: n,
|
|
@@ -49,24 +51,25 @@ const o = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
|
49
51
|
Icon: f,
|
|
50
52
|
InputWrapper: u,
|
|
51
53
|
Linkcard: k,
|
|
54
|
+
Loader: x,
|
|
52
55
|
Messagebox: l,
|
|
53
|
-
Radiobutton:
|
|
54
|
-
Select:
|
|
55
|
-
Tabs:
|
|
56
|
-
Tag:
|
|
56
|
+
Radiobutton: g,
|
|
57
|
+
Select: c,
|
|
58
|
+
Tabs: b,
|
|
59
|
+
Tag: d,
|
|
57
60
|
Textarea: $,
|
|
58
|
-
Textinput:
|
|
61
|
+
Textinput: T
|
|
59
62
|
}, Symbol.toStringTag, { value: "Module" })), S = {
|
|
60
63
|
install(r, F = {}) {
|
|
61
64
|
for (const t in o)
|
|
62
|
-
|
|
65
|
+
L(r, o[t]);
|
|
63
66
|
}
|
|
64
67
|
};
|
|
65
|
-
|
|
68
|
+
B(S);
|
|
66
69
|
export {
|
|
67
70
|
e as Alert,
|
|
68
|
-
|
|
69
|
-
|
|
71
|
+
a as BackLink,
|
|
72
|
+
m as Breadcrumbs,
|
|
70
73
|
i as Button,
|
|
71
74
|
p as Checkbox,
|
|
72
75
|
n as Footer,
|
|
@@ -75,30 +78,32 @@ export {
|
|
|
75
78
|
f as Icon,
|
|
76
79
|
u as InputWrapper,
|
|
77
80
|
k as Linkcard,
|
|
81
|
+
x as Loader,
|
|
78
82
|
l as Messagebox,
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
g as
|
|
99
|
-
c as
|
|
100
|
-
b as
|
|
83
|
+
So as PktAlert,
|
|
84
|
+
U as PktBackLink,
|
|
85
|
+
X as PktBreadcrumbs,
|
|
86
|
+
Io as PktButton,
|
|
87
|
+
Z as PktCheckbox,
|
|
88
|
+
ro as PktFooter,
|
|
89
|
+
eo as PktFooterSimple,
|
|
90
|
+
mo as PktHeader,
|
|
91
|
+
Mo as PktIcon,
|
|
92
|
+
yo as PktInputWrapper,
|
|
93
|
+
so as PktLinkcard,
|
|
94
|
+
fo as PktLoader,
|
|
95
|
+
po as PktMessagebox,
|
|
96
|
+
lo as PktRadiobutton,
|
|
97
|
+
xo as PktSelect,
|
|
98
|
+
co as PktTabs,
|
|
99
|
+
Co as PktTag,
|
|
100
|
+
$o as PktTextarea,
|
|
101
|
+
Bo as PktTextinput,
|
|
102
|
+
g as Radiobutton,
|
|
103
|
+
c as Select,
|
|
104
|
+
b as Tabs,
|
|
105
|
+
d as Tag,
|
|
101
106
|
$ as Textarea,
|
|
102
|
-
|
|
107
|
+
T as Textinput,
|
|
103
108
|
S as default
|
|
104
109
|
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("vue"),r=require("./Icon-Q_SkpRJa.cjs"),l=require("./plugins-AiK__HqQ.cjs"),d=["aria-busy"],u={key:0},n={__name:"Loader",props:{message:String,size:{type:String,default:"medium",validator:e=>["small","medium","large"].includes(e)},inline:{type:Boolean,default:!1},isLoading:{type:Boolean,default:!0},variant:{type:String,default:"rainbow",validator:e=>["blue","rainbow","shapes"].includes(e)}},setup(e){const o=e,i=t=>t==="shapes"?"loader":t==="blue"?"spinner-blue":"spinner";return(t,c)=>(a.openBlock(),a.createElementBlock("div",{role:"status","aria-live":"polite","aria-busy":e.isLoading,class:a.normalizeClass(`pkt-loader--${e.inline?"inline":"box"}`)},[e.isLoading?(a.openBlock(),a.createElementBlock("div",{key:0,class:a.normalizeClass(`pkt-loader pkt-loader--${o.size}`),"data-testid":"pkt-loader"},[a.createVNode(r.PktIcon,{name:i(e.variant),"aria-label":"loading",path:"https://punkt-cdn.oslo.kommune.no/latest/animations/",class:a.normalizeClass(`pkt-loader__svg pkt-loader__${e.variant}`)},null,8,["name","class"]),e.message?(a.openBlock(),a.createElementBlock("p",u,a.toDisplayString(e.message),1)):a.createCommentVNode("",!0)],2)):a.renderSlot(t.$slots,"default",{key:1})],10,d))}},s={install(e){l.registerComponent(e,n)}};l.use(s);exports.PktLoader=n;exports.default=s;
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import { openBlock as t, createElementBlock as n, normalizeClass as s, createVNode as o, toDisplayString as r, createCommentVNode as d, renderSlot as u } from "vue";
|
|
2
|
+
import { P as m } from "./Icon-s3ZNrtl-.js";
|
|
3
|
+
import { u as c, a as p } from "./plugins-IeJb3XDX.js";
|
|
4
|
+
const g = ["aria-busy"], k = { key: 0 }, f = {
|
|
5
|
+
__name: "Loader",
|
|
6
|
+
props: {
|
|
7
|
+
message: String,
|
|
8
|
+
size: {
|
|
9
|
+
type: String,
|
|
10
|
+
default: "medium",
|
|
11
|
+
validator: (e) => ["small", "medium", "large"].includes(e)
|
|
12
|
+
},
|
|
13
|
+
inline: {
|
|
14
|
+
type: Boolean,
|
|
15
|
+
default: !1
|
|
16
|
+
},
|
|
17
|
+
isLoading: {
|
|
18
|
+
type: Boolean,
|
|
19
|
+
default: !0
|
|
20
|
+
},
|
|
21
|
+
variant: {
|
|
22
|
+
type: String,
|
|
23
|
+
default: "rainbow",
|
|
24
|
+
validator: (e) => ["blue", "rainbow", "shapes"].includes(e)
|
|
25
|
+
}
|
|
26
|
+
},
|
|
27
|
+
setup(e) {
|
|
28
|
+
const i = e, l = (a) => a === "shapes" ? "loader" : a === "blue" ? "spinner-blue" : "spinner";
|
|
29
|
+
return (a, b) => (t(), n("div", {
|
|
30
|
+
role: "status",
|
|
31
|
+
"aria-live": "polite",
|
|
32
|
+
"aria-busy": e.isLoading,
|
|
33
|
+
class: s(`pkt-loader--${e.inline ? "inline" : "box"}`)
|
|
34
|
+
}, [
|
|
35
|
+
e.isLoading ? (t(), n("div", {
|
|
36
|
+
key: 0,
|
|
37
|
+
class: s(`pkt-loader pkt-loader--${i.size}`),
|
|
38
|
+
"data-testid": "pkt-loader"
|
|
39
|
+
}, [
|
|
40
|
+
o(m, {
|
|
41
|
+
name: l(e.variant),
|
|
42
|
+
"aria-label": "loading",
|
|
43
|
+
path: "https://punkt-cdn.oslo.kommune.no/latest/animations/",
|
|
44
|
+
class: s(`pkt-loader__svg pkt-loader__${e.variant}`)
|
|
45
|
+
}, null, 8, ["name", "class"]),
|
|
46
|
+
e.message ? (t(), n("p", k, r(e.message), 1)) : d("", !0)
|
|
47
|
+
], 2)) : u(a.$slots, "default", { key: 1 })
|
|
48
|
+
], 10, g));
|
|
49
|
+
}
|
|
50
|
+
}, y = {
|
|
51
|
+
install(e) {
|
|
52
|
+
p(e, f);
|
|
53
|
+
}
|
|
54
|
+
};
|
|
55
|
+
c(y);
|
|
56
|
+
export {
|
|
57
|
+
f as PktLoader,
|
|
58
|
+
y as default
|
|
59
|
+
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@oslokommune/punkt-vue",
|
|
3
|
-
"version": "11.
|
|
3
|
+
"version": "11.5.0",
|
|
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",
|
|
@@ -26,8 +26,8 @@
|
|
|
26
26
|
"preview": "vite preview"
|
|
27
27
|
},
|
|
28
28
|
"devDependencies": {
|
|
29
|
-
"@oslokommune/punkt-assets": "^11.
|
|
30
|
-
"@oslokommune/punkt-css": "^11.
|
|
29
|
+
"@oslokommune/punkt-assets": "^11.5.0",
|
|
30
|
+
"@oslokommune/punkt-css": "^11.5.0",
|
|
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": "84e50eb85cf1a7bae722f0c06fb62b36a0dadb41"
|
|
69
69
|
}
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div role="status" aria-live="polite" :aria-busy="isLoading" :class="`pkt-loader--${inline ? 'inline' : 'box'}`">
|
|
3
|
+
<template v-if="isLoading">
|
|
4
|
+
<div :class="`pkt-loader pkt-loader--${props.size}`" data-testid="pkt-loader">
|
|
5
|
+
<PktIcon
|
|
6
|
+
:name="getVariant(variant)"
|
|
7
|
+
aria-label="loading"
|
|
8
|
+
path="https://punkt-cdn.oslo.kommune.no/latest/animations/"
|
|
9
|
+
:class="`pkt-loader__svg pkt-loader__${variant}`"
|
|
10
|
+
/>
|
|
11
|
+
<p v-if="message">{{ message }}</p>
|
|
12
|
+
</div>
|
|
13
|
+
</template>
|
|
14
|
+
<template v-else>
|
|
15
|
+
<slot></slot>
|
|
16
|
+
</template>
|
|
17
|
+
</div>
|
|
18
|
+
</template>
|
|
19
|
+
|
|
20
|
+
<script setup>
|
|
21
|
+
import PktIcon from '../icon/Icon.vue'
|
|
22
|
+
|
|
23
|
+
const props = defineProps({
|
|
24
|
+
message: String,
|
|
25
|
+
size: {
|
|
26
|
+
type: String,
|
|
27
|
+
default: 'medium',
|
|
28
|
+
validator: (value) => ['small', 'medium', 'large'].includes(value),
|
|
29
|
+
},
|
|
30
|
+
inline: {
|
|
31
|
+
type: Boolean,
|
|
32
|
+
default: false,
|
|
33
|
+
},
|
|
34
|
+
isLoading: {
|
|
35
|
+
type: Boolean,
|
|
36
|
+
default: true,
|
|
37
|
+
},
|
|
38
|
+
variant: {
|
|
39
|
+
type: String,
|
|
40
|
+
default: 'rainbow',
|
|
41
|
+
validator: (value) => ['blue', 'rainbow', 'shapes'].includes(value),
|
|
42
|
+
},
|
|
43
|
+
})
|
|
44
|
+
|
|
45
|
+
const getVariant = (variant) => {
|
|
46
|
+
return variant === 'shapes' ? 'loader' : variant === 'blue' ? 'spinner-blue' : 'spinner'
|
|
47
|
+
}
|
|
48
|
+
</script>
|