@oslokommune/punkt-vue 11.13.2 → 11.13.4
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 +35 -0
- package/dist/punkt-vue-checkbox.cjs +1 -1
- package/dist/punkt-vue-checkbox.js +32 -36
- package/dist/punkt-vue-messagebox.cjs +1 -1
- package/dist/punkt-vue-messagebox.js +61 -20
- package/package.json +3 -3
- package/src/components/checkbox/Checkbox.vue +3 -9
- package/src/components/messagebox/Messagebox.vue +37 -2
package/CHANGELOG.md
CHANGED
|
@@ -5,6 +5,41 @@ og skriver commits ca etter [Conventional Commits](https://conventionalcommits.o
|
|
|
5
5
|
|
|
6
6
|
---
|
|
7
7
|
|
|
8
|
+
## [11.13.4](https://github.com/oslokommune/punkt/compare/11.13.3...11.13.4) (2024-05-30)
|
|
9
|
+
|
|
10
|
+
### ⚠ BREAKING CHANGES
|
|
11
|
+
Ingen
|
|
12
|
+
|
|
13
|
+
### Features
|
|
14
|
+
Ingen
|
|
15
|
+
|
|
16
|
+
### Bug Fixes
|
|
17
|
+
* Bruker v-model oppdatering av checkbox verdi (#1721).
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
### Chores
|
|
21
|
+
Ingen
|
|
22
|
+
|
|
23
|
+
---
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
## [11.13.3](https://github.com/oslokommune/punkt/compare/11.13.2...11.13.3) (2024-05-29)
|
|
27
|
+
|
|
28
|
+
### ⚠ BREAKING CHANGES
|
|
29
|
+
Ingen
|
|
30
|
+
|
|
31
|
+
### Features
|
|
32
|
+
Ingen
|
|
33
|
+
|
|
34
|
+
### Bug Fixes
|
|
35
|
+
Ingen
|
|
36
|
+
|
|
37
|
+
### Chores
|
|
38
|
+
Ingen
|
|
39
|
+
|
|
40
|
+
---
|
|
41
|
+
|
|
42
|
+
|
|
8
43
|
## [11.13.1](https://github.com/oslokommune/punkt/compare/11.13.0...11.13.1) (2024-05-23)
|
|
9
44
|
|
|
10
45
|
### ⚠ BREAKING CHANGES
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),s=require("./_plugin-vue_export-helper-jfW5FsfF.cjs"),
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),s=require("./_plugin-vue_export-helper-jfW5FsfF.cjs"),c=require("./plugins-IAlvxbZ2.cjs"),u={name:"PktCheckbox",props:{id:{type:String,required:!0},defaultChecked:{type:Boolean,default:!1},modelValue:{type:[Boolean,Array],default:!1},hasTile:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},label:{type:String,required:!1},labelPosition:{type:String,default:"right"},hideLabel:{type:Boolean,default:!1},checkHelptext:{type:String,required:!1},hasError:{type:Boolean,default:!1},isSwitch:{type:Boolean,default:!1}},emits:["update:modelValue","onChange"],computed:{computedChecked:{get(){return this.modelValue||this.defaultChecked},set(l){this.$emit("update:modelValue",l),this.$emit("onChange",l)}}}},r={class:"pkt-input-check"},k=["for"],h={key:0,class:"pkt-input-check__input-helptext"},_=["role","id","disabled"],p=["for"],m={key:0,class:"pkt-input-check__input-helptext"};function b(l,i,t,f,y,a){return e.openBlock(),e.createElementBlock("div",r,[e.createElementVNode("div",{class:e.normalizeClass(["pkt-input-check__input",{"pkt-input-check__input--tile":t.hasTile},{"pkt-input-check__input--tile-disabled":t.disabled&&t.hasTile}])},[t.label&&t.labelPosition==="left"?(e.openBlock(),e.createElementBlock("label",{key:0,class:e.normalizeClass(["pkt-input-check__input-label",{"pkt-sr-only":t.hideLabel}]),for:t.id},[e.createTextVNode(e.toDisplayString(t.label)+" ",1),t.checkHelptext?(e.openBlock(),e.createElementBlock("div",h,e.toDisplayString(t.checkHelptext),1)):e.createCommentVNode("",!0)],10,k)):e.createCommentVNode("",!0),e.withDirectives(e.createElementVNode("input",e.mergeProps(l.$attrs,{class:["pkt-input-check__input-checkbox",{"pkt-input-check__input-checkbox--error":t.hasError}],type:"checkbox",role:t.isSwitch?"switch":"checkbox",id:t.id,"onUpdate:modelValue":i[0]||(i[0]=d=>a.computedChecked=d),disabled:t.disabled}),null,16,_),[[e.vModelCheckbox,a.computedChecked]]),t.label&&t.labelPosition==="right"?(e.openBlock(),e.createElementBlock("label",{key:1,class:e.normalizeClass(["pkt-input-check__input-label",{"pkt-sr-only":t.hideLabel}]),for:t.id},[e.createTextVNode(e.toDisplayString(t.label)+" ",1),t.checkHelptext?(e.openBlock(),e.createElementBlock("div",m,e.toDisplayString(t.checkHelptext),1)):e.createCommentVNode("",!0)],10,p)):e.createCommentVNode("",!0)],2)])}const o=s._export_sfc(u,[["render",b]]),n={install(l){c.registerComponent(l,o)}};c.use(n);exports.PktCheckbox=o;exports.default=n;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { openBlock as l, createElementBlock as
|
|
2
|
-
import { _ as
|
|
3
|
-
import { u as
|
|
4
|
-
const
|
|
1
|
+
import { openBlock as l, createElementBlock as i, createElementVNode as s, normalizeClass as d, createTextVNode as u, toDisplayString as a, createCommentVNode as c, withDirectives as k, mergeProps as r, vModelCheckbox as _ } from "vue";
|
|
2
|
+
import { _ as f } from "./_plugin-vue_export-helper-hUChTQA_.js";
|
|
3
|
+
import { u as b, a as p } from "./plugins-UPM181Xt.js";
|
|
4
|
+
const m = {
|
|
5
5
|
name: "PktCheckbox",
|
|
6
6
|
props: {
|
|
7
7
|
id: {
|
|
@@ -13,7 +13,7 @@ const b = {
|
|
|
13
13
|
default: !1
|
|
14
14
|
},
|
|
15
15
|
modelValue: {
|
|
16
|
-
type: Boolean,
|
|
16
|
+
type: [Boolean, Array],
|
|
17
17
|
default: !1
|
|
18
18
|
},
|
|
19
19
|
hasTile: {
|
|
@@ -54,69 +54,65 @@ const b = {
|
|
|
54
54
|
computed: {
|
|
55
55
|
computedChecked: {
|
|
56
56
|
get() {
|
|
57
|
-
return this.modelValue;
|
|
57
|
+
return this.modelValue || this.defaultChecked;
|
|
58
58
|
},
|
|
59
59
|
set(t) {
|
|
60
60
|
this.$emit("update:modelValue", t), this.$emit("onChange", t);
|
|
61
61
|
}
|
|
62
62
|
}
|
|
63
|
-
},
|
|
64
|
-
methods: {
|
|
65
|
-
handleChange(t) {
|
|
66
|
-
this.computedChecked = t.target.checked;
|
|
67
|
-
}
|
|
68
63
|
}
|
|
69
|
-
},
|
|
64
|
+
}, y = { class: "pkt-input-check" }, x = ["for"], C = {
|
|
70
65
|
key: 0,
|
|
71
66
|
class: "pkt-input-check__input-helptext"
|
|
72
|
-
}, g = ["role", "id", "
|
|
67
|
+
}, g = ["role", "id", "disabled"], B = ["for"], P = {
|
|
73
68
|
key: 0,
|
|
74
69
|
class: "pkt-input-check__input-helptext"
|
|
75
70
|
};
|
|
76
|
-
function
|
|
77
|
-
return l(),
|
|
78
|
-
|
|
79
|
-
class:
|
|
71
|
+
function S(t, n, e, H, E, o) {
|
|
72
|
+
return l(), i("div", y, [
|
|
73
|
+
s("div", {
|
|
74
|
+
class: d([
|
|
80
75
|
"pkt-input-check__input",
|
|
81
76
|
{ "pkt-input-check__input--tile": e.hasTile },
|
|
82
77
|
{ "pkt-input-check__input--tile-disabled": e.disabled && e.hasTile }
|
|
83
78
|
])
|
|
84
79
|
}, [
|
|
85
|
-
e.label && e.labelPosition === "left" ? (l(),
|
|
80
|
+
e.label && e.labelPosition === "left" ? (l(), i("label", {
|
|
86
81
|
key: 0,
|
|
87
|
-
class:
|
|
82
|
+
class: d(["pkt-input-check__input-label", { "pkt-sr-only": e.hideLabel }]),
|
|
88
83
|
for: e.id
|
|
89
84
|
}, [
|
|
90
|
-
|
|
91
|
-
e.checkHelptext ? (l(),
|
|
92
|
-
], 10,
|
|
93
|
-
|
|
85
|
+
u(a(e.label) + " ", 1),
|
|
86
|
+
e.checkHelptext ? (l(), i("div", C, a(e.checkHelptext), 1)) : c("", !0)
|
|
87
|
+
], 10, x)) : c("", !0),
|
|
88
|
+
k(s("input", r(t.$attrs, {
|
|
94
89
|
class: ["pkt-input-check__input-checkbox", { "pkt-input-check__input-checkbox--error": e.hasError }],
|
|
95
90
|
type: "checkbox",
|
|
96
91
|
role: e.isSwitch ? "switch" : "checkbox",
|
|
97
92
|
id: e.id,
|
|
98
|
-
|
|
99
|
-
onChange: h[0] || (h[0] = (...u) => d.handleChange && d.handleChange(...u)),
|
|
93
|
+
"onUpdate:modelValue": n[0] || (n[0] = (h) => o.computedChecked = h),
|
|
100
94
|
disabled: e.disabled
|
|
101
|
-
}), null, 16, g),
|
|
102
|
-
|
|
95
|
+
}), null, 16, g), [
|
|
96
|
+
[_, o.computedChecked]
|
|
97
|
+
]),
|
|
98
|
+
e.label && e.labelPosition === "right" ? (l(), i("label", {
|
|
103
99
|
key: 1,
|
|
104
|
-
class:
|
|
100
|
+
class: d(["pkt-input-check__input-label", { "pkt-sr-only": e.hideLabel }]),
|
|
105
101
|
for: e.id
|
|
106
102
|
}, [
|
|
107
|
-
|
|
108
|
-
e.checkHelptext ? (l(),
|
|
109
|
-
], 10,
|
|
103
|
+
u(a(e.label) + " ", 1),
|
|
104
|
+
e.checkHelptext ? (l(), i("div", P, a(e.checkHelptext), 1)) : c("", !0)
|
|
105
|
+
], 10, B)) : c("", !0)
|
|
110
106
|
], 2)
|
|
111
107
|
]);
|
|
112
108
|
}
|
|
113
|
-
const
|
|
109
|
+
const V = /* @__PURE__ */ f(m, [["render", S]]), v = {
|
|
114
110
|
install(t) {
|
|
115
|
-
|
|
111
|
+
p(t, V);
|
|
116
112
|
}
|
|
117
113
|
};
|
|
118
|
-
|
|
114
|
+
b(v);
|
|
119
115
|
export {
|
|
120
|
-
|
|
121
|
-
|
|
116
|
+
V as PktCheckbox,
|
|
117
|
+
v as default
|
|
122
118
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("./Icon-7iwiZOEn.cjs"),e=require("vue"),d=require("./_plugin-vue_export-helper-jfW5FsfF.cjs"),c=require("./plugins-IAlvxbZ2.cjs"),p={name:"PktMessagebox",components:{PktIcon:u.PktIcon},props:{skin:{type:String,default:"beige",validator(s){return["beige","green","red","blue"].includes(s)}},title:{type:String,default:""},compact:{type:Boolean,default:!1},closable:{type:Boolean,default:!1}},computed:{skinClass(){return[`pkt-messagebox--${this.skin}`]},open(){return!this.closed}},data:()=>({closed:!1}),methods:{close(){this.closed=!0,this.$emit("on-close",this.closed)}}},m={key:0,class:"pkt-messagebox__close"},k={class:"pkt-messagebox__title"},b={class:"pkt-messagebox__text"};function _(s,o,l,g,f,t){const i=e.resolveComponent("PktIcon");return e.withDirectives((e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass({"pkt-messagebox":!0,[t.skinClass]:!0,"pkt-messagebox--compact":l.compact})},[l.closable?(e.openBlock(),e.createElementBlock("div",m,[e.createElementVNode("button",{class:"pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--icon-only",type:"button",role:"button",tabindex:"0","aria-label":"close",onKeyup:o[0]||(o[0]=e.withKeys((...n)=>t.close&&t.close(...n),["enter"])),onClick:o[1]||(o[1]=(...n)=>t.close&&t.close(...n))},[e.createVNode(i,{class:"pkt-btn__icon",name:"close"})],32)])):e.createCommentVNode("",!0),e.createElementVNode("div",k,e.toDisplayString(l.title),1),e.createElementVNode("div",b,[e.renderSlot(s.$slots,"default")])],2)),[[e.vShow,t.open]])}const a=d._export_sfc(p,[["render",_]]),r={install(s){c.registerComponent(s,a)}};c.use(r);exports.PktMessagebox=a;exports.default=r;
|
|
@@ -1,14 +1,18 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
|
|
1
|
+
import { P as i } from "./Icon-8MjQJfqx.js";
|
|
2
|
+
import { resolveComponent as m, withDirectives as d, openBlock as a, createElementBlock as c, normalizeClass as p, createElementVNode as n, withKeys as u, createVNode as b, createCommentVNode as k, toDisplayString as _, renderSlot as f, vShow as g } from "vue";
|
|
3
|
+
import { _ as x } from "./_plugin-vue_export-helper-hUChTQA_.js";
|
|
4
|
+
import { u as y, a as h } from "./plugins-UPM181Xt.js";
|
|
5
|
+
const v = {
|
|
5
6
|
name: "PktMessagebox",
|
|
7
|
+
components: {
|
|
8
|
+
PktIcon: i
|
|
9
|
+
},
|
|
6
10
|
props: {
|
|
7
11
|
skin: {
|
|
8
12
|
type: String,
|
|
9
13
|
default: "beige",
|
|
10
|
-
validator(
|
|
11
|
-
return ["beige", "green", "red", "blue"].includes(
|
|
14
|
+
validator(t) {
|
|
15
|
+
return ["beige", "green", "red", "blue"].includes(t);
|
|
12
16
|
}
|
|
13
17
|
},
|
|
14
18
|
title: {
|
|
@@ -18,31 +22,68 @@ const d = {
|
|
|
18
22
|
compact: {
|
|
19
23
|
type: Boolean,
|
|
20
24
|
default: !1
|
|
25
|
+
},
|
|
26
|
+
closable: {
|
|
27
|
+
type: Boolean,
|
|
28
|
+
default: !1
|
|
21
29
|
}
|
|
22
30
|
},
|
|
23
31
|
computed: {
|
|
24
32
|
skinClass() {
|
|
25
33
|
return [`pkt-messagebox--${this.skin}`];
|
|
34
|
+
},
|
|
35
|
+
open() {
|
|
36
|
+
return !this.closed;
|
|
37
|
+
}
|
|
38
|
+
},
|
|
39
|
+
data: () => ({
|
|
40
|
+
closed: !1
|
|
41
|
+
}),
|
|
42
|
+
methods: {
|
|
43
|
+
close() {
|
|
44
|
+
this.closed = !0, this.$emit("on-close", this.closed);
|
|
26
45
|
}
|
|
27
46
|
}
|
|
28
|
-
},
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
47
|
+
}, C = {
|
|
48
|
+
key: 0,
|
|
49
|
+
class: "pkt-messagebox__close"
|
|
50
|
+
}, P = { class: "pkt-messagebox__title" }, S = { class: "pkt-messagebox__text" };
|
|
51
|
+
function B(t, s, o, M, N, e) {
|
|
52
|
+
const r = m("PktIcon");
|
|
53
|
+
return d((a(), c("div", {
|
|
54
|
+
class: p({ "pkt-messagebox": !0, [e.skinClass]: !0, "pkt-messagebox--compact": o.compact })
|
|
32
55
|
}, [
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
56
|
+
o.closable ? (a(), c("div", C, [
|
|
57
|
+
n("button", {
|
|
58
|
+
class: "pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--icon-only",
|
|
59
|
+
type: "button",
|
|
60
|
+
role: "button",
|
|
61
|
+
tabindex: "0",
|
|
62
|
+
"aria-label": "close",
|
|
63
|
+
onKeyup: s[0] || (s[0] = u((...l) => e.close && e.close(...l), ["enter"])),
|
|
64
|
+
onClick: s[1] || (s[1] = (...l) => e.close && e.close(...l))
|
|
65
|
+
}, [
|
|
66
|
+
b(r, {
|
|
67
|
+
class: "pkt-btn__icon",
|
|
68
|
+
name: "close"
|
|
69
|
+
})
|
|
70
|
+
], 32)
|
|
71
|
+
])) : k("", !0),
|
|
72
|
+
n("div", P, _(o.title), 1),
|
|
73
|
+
n("div", S, [
|
|
74
|
+
f(t.$slots, "default")
|
|
36
75
|
])
|
|
37
|
-
], 2)
|
|
76
|
+
], 2)), [
|
|
77
|
+
[g, e.open]
|
|
78
|
+
]);
|
|
38
79
|
}
|
|
39
|
-
const
|
|
40
|
-
install(
|
|
41
|
-
|
|
80
|
+
const w = /* @__PURE__ */ x(v, [["render", B]]), I = {
|
|
81
|
+
install(t) {
|
|
82
|
+
h(t, w);
|
|
42
83
|
}
|
|
43
84
|
};
|
|
44
|
-
|
|
85
|
+
y(I);
|
|
45
86
|
export {
|
|
46
|
-
|
|
47
|
-
|
|
87
|
+
w as PktMessagebox,
|
|
88
|
+
I as default
|
|
48
89
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@oslokommune/punkt-vue",
|
|
3
|
-
"version": "11.13.
|
|
3
|
+
"version": "11.13.4",
|
|
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.13.2",
|
|
30
|
-
"@oslokommune/punkt-css": "^11.13.
|
|
30
|
+
"@oslokommune/punkt-css": "^11.13.3",
|
|
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": "1a00241fb69e0b141a971e2dfd97091a851c3505"
|
|
69
69
|
}
|
|
@@ -23,8 +23,7 @@
|
|
|
23
23
|
type="checkbox"
|
|
24
24
|
:role="isSwitch ? 'switch' : 'checkbox'"
|
|
25
25
|
:id="id"
|
|
26
|
-
|
|
27
|
-
@change="handleChange"
|
|
26
|
+
v-model="computedChecked"
|
|
28
27
|
:disabled="disabled"
|
|
29
28
|
/>
|
|
30
29
|
<label
|
|
@@ -52,7 +51,7 @@ export default {
|
|
|
52
51
|
default: false,
|
|
53
52
|
},
|
|
54
53
|
modelValue: {
|
|
55
|
-
type: Boolean,
|
|
54
|
+
type: [Boolean, Array],
|
|
56
55
|
default: false,
|
|
57
56
|
},
|
|
58
57
|
hasTile: {
|
|
@@ -93,7 +92,7 @@ export default {
|
|
|
93
92
|
computed: {
|
|
94
93
|
computedChecked: {
|
|
95
94
|
get() {
|
|
96
|
-
return this.modelValue
|
|
95
|
+
return this.modelValue || this.defaultChecked
|
|
97
96
|
},
|
|
98
97
|
set(newValue) {
|
|
99
98
|
this.$emit('update:modelValue', newValue)
|
|
@@ -101,10 +100,5 @@ export default {
|
|
|
101
100
|
},
|
|
102
101
|
},
|
|
103
102
|
},
|
|
104
|
-
methods: {
|
|
105
|
-
handleChange(event) {
|
|
106
|
-
this.computedChecked = event.target.checked
|
|
107
|
-
},
|
|
108
|
-
},
|
|
109
103
|
}
|
|
110
104
|
</script>
|
|
@@ -1,5 +1,19 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div :class="{ 'pkt-messagebox': true, [skinClass]: true, 'pkt-messagebox--compact': compact }">
|
|
2
|
+
<div :class="{ 'pkt-messagebox': true, [skinClass]: true, 'pkt-messagebox--compact': compact }" v-show="open">
|
|
3
|
+
<div class="pkt-messagebox__close" v-if="closable">
|
|
4
|
+
<button
|
|
5
|
+
class="pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--icon-only"
|
|
6
|
+
type="button"
|
|
7
|
+
role="button"
|
|
8
|
+
tabindex="0"
|
|
9
|
+
aria-label="close"
|
|
10
|
+
@keyup.enter="close"
|
|
11
|
+
@click="close"
|
|
12
|
+
>
|
|
13
|
+
<PktIcon class="pkt-btn__icon" name="close"></PktIcon>
|
|
14
|
+
</button>
|
|
15
|
+
</div>
|
|
16
|
+
|
|
3
17
|
<div class="pkt-messagebox__title">
|
|
4
18
|
{{ title }}
|
|
5
19
|
</div>
|
|
@@ -9,14 +23,19 @@
|
|
|
9
23
|
</template>
|
|
10
24
|
|
|
11
25
|
<script>
|
|
26
|
+
import PktIcon from '../icon/Icon.vue'
|
|
27
|
+
|
|
12
28
|
export default {
|
|
13
29
|
name: 'PktMessagebox',
|
|
30
|
+
components: {
|
|
31
|
+
PktIcon,
|
|
32
|
+
},
|
|
14
33
|
props: {
|
|
15
34
|
skin: {
|
|
16
35
|
type: String,
|
|
17
36
|
default: 'beige',
|
|
18
37
|
validator(value) {
|
|
19
|
-
return ['beige', 'green', 'red', 'blue'].includes(value)
|
|
38
|
+
return ['beige', 'green', 'red', 'blue'].includes(value)
|
|
20
39
|
},
|
|
21
40
|
},
|
|
22
41
|
|
|
@@ -28,11 +47,27 @@ export default {
|
|
|
28
47
|
type: Boolean,
|
|
29
48
|
default: false,
|
|
30
49
|
},
|
|
50
|
+
closable: {
|
|
51
|
+
type: Boolean,
|
|
52
|
+
default: false,
|
|
53
|
+
},
|
|
31
54
|
},
|
|
32
55
|
computed: {
|
|
33
56
|
skinClass() {
|
|
34
57
|
return [`pkt-messagebox--${this.skin}`]
|
|
35
58
|
},
|
|
59
|
+
open() {
|
|
60
|
+
return !this.closed
|
|
61
|
+
},
|
|
62
|
+
},
|
|
63
|
+
data: () => ({
|
|
64
|
+
closed: false,
|
|
65
|
+
}),
|
|
66
|
+
methods: {
|
|
67
|
+
close() {
|
|
68
|
+
this.closed = true
|
|
69
|
+
this.$emit('on-close', this.closed)
|
|
70
|
+
},
|
|
36
71
|
},
|
|
37
72
|
}
|
|
38
73
|
</script>
|