@oslokommune/punkt-vue 11.13.2 → 11.13.3

package/CHANGELOG.md

@@ -5,6 +5,23 @@ og skriver commits ca etter [Conventional Commits](https://conventionalcommits.o
 
 ---
 
+## [11.13.3](https://github.com/oslokommune/punkt/compare/11.13.2...11.13.3) (2024-05-29)
+
+### ⚠ BREAKING CHANGES
+Ingen
+
+### Features
+Ingen
+
+### Bug Fixes
+Ingen
+
+### Chores
+Ingen
+
+---
+
+
 ## [11.13.1](https://github.com/oslokommune/punkt/compare/11.13.0...11.13.1) (2024-05-23)
 
 ### ⚠ BREAKING CHANGES

package/dist/punkt-vue-messagebox.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),l=require("./_plugin-vue_export-helper-jfW5FsfF.cjs"),o=require("./plugins-IAlvxbZ2.cjs"),i={name:"PktMessagebox",props:{skin:{type:String,default:"beige",validator(t){return["beige","green","red","blue"].includes(t)}},title:{type:String,default:""},compact:{type:Boolean,default:!1}},computed:{skinClass(){return[`pkt-messagebox--${this.skin}`]}}},c={class:"pkt-messagebox__title"},u={class:"pkt-messagebox__text"};function d(t,p,s,g,_,r){return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass({"pkt-messagebox":!0,[r.skinClass]:!0,"pkt-messagebox--compact":s.compact})},[e.createElementVNode("div",c,e.toDisplayString(s.title),1),e.createElementVNode("div",u,[e.renderSlot(t.$slots,"default")])],2)}const n=l._export_sfc(i,[["render",d]]),a={install(t){o.registerComponent(t,n)}};o.use(a);exports.PktMessagebox=n;exports.default=a;
+"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;

package/dist/punkt-vue-messagebox.js

@@ -1,14 +1,18 @@
-import { openBlock as o, createElementBlock as n, normalizeClass as r, createElementVNode as s, toDisplayString as i, renderSlot as l } from "vue";
-import { _ as c } from "./_plugin-vue_export-helper-hUChTQA_.js";
-import { u as m, a as p } from "./plugins-UPM181Xt.js";
-const d = {
+import { P as i } from "./Icon-8MjQJfqx.js";
+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";
+import { _ as x } from "./_plugin-vue_export-helper-hUChTQA_.js";
+import { u as y, a as h } from "./plugins-UPM181Xt.js";
+const v = {
   name: "PktMessagebox",
+  components: {
+    PktIcon: i
+  },
   props: {
     skin: {
       type: String,
       default: "beige",
-      validator(e) {
-        return ["beige", "green", "red", "blue"].includes(e);
+      validator(t) {
+        return ["beige", "green", "red", "blue"].includes(t);
       }
     },
     title: {
@@ -18,31 +22,68 @@ const d = {
     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);
     }
   }
-}, u = { class: "pkt-messagebox__title" }, g = { class: "pkt-messagebox__text" };
-function _(e, b, t, x, h, a) {
-  return o(), n("div", {
-    class: r({ "pkt-messagebox": !0, [a.skinClass]: !0, "pkt-messagebox--compact": t.compact })
+}, C = {
+  key: 0,
+  class: "pkt-messagebox__close"
+}, P = { class: "pkt-messagebox__title" }, S = { class: "pkt-messagebox__text" };
+function B(t, s, o, M, N, e) {
+  const r = m("PktIcon");
+  return d((a(), c("div", {
+    class: p({ "pkt-messagebox": !0, [e.skinClass]: !0, "pkt-messagebox--compact": o.compact })
   }, [
-    s("div", u, i(t.title), 1),
-    s("div", g, [
-      l(e.$slots, "default")
+    o.closable ? (a(), c("div", C, [
+      n("button", {
+        class: "pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--icon-only",
+        type: "button",
+        role: "button",
+        tabindex: "0",
+        "aria-label": "close",
+        onKeyup: s[0] || (s[0] = u((...l) => e.close && e.close(...l), ["enter"])),
+        onClick: s[1] || (s[1] = (...l) => e.close && e.close(...l))
+      }, [
+        b(r, {
+          class: "pkt-btn__icon",
+          name: "close"
+        })
+      ], 32)
+    ])) : k("", !0),
+    n("div", P, _(o.title), 1),
+    n("div", S, [
+      f(t.$slots, "default")
     ])
-  ], 2);
+  ], 2)), [
+    [g, e.open]
+  ]);
 }
-const f = /* @__PURE__ */ c(d, [["render", _]]), k = {
-  install(e) {
-    p(e, f);
+const w = /* @__PURE__ */ x(v, [["render", B]]), I = {
+  install(t) {
+    h(t, w);
   }
 };
-m(k);
+y(I);
 export {
-  f as PktMessagebox,
-  k as default
+  w as PktMessagebox,
+  I as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-vue",
-  "version": "11.13.2",
+  "version": "11.13.3",
   "description": "Vue komponentbibliotek til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -27,7 +27,7 @@
   },
   "devDependencies": {
     "@oslokommune/punkt-assets": "^11.13.2",
-    "@oslokommune/punkt-css": "^11.13.2",
+    "@oslokommune/punkt-css": "^11.13.3",
     "@vitejs/plugin-vue": "^4.5.2",
     "edit-json-file": "^1.7.0",
     "sass": "^1.69.5",
@@ -65,5 +65,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "6f42516f8ea54808ba227247a390d119aef1fbe5"
+  "gitHead": "344b120d07c6db09133e94caa559da4919afc23e"
 }

package/src/components/messagebox/Messagebox.vue

@@ -1,5 +1,19 @@
 <template>
-  <div :class="{ 'pkt-messagebox': true, [skinClass]: true, 'pkt-messagebox--compact': compact }">
+  <div :class="{ 'pkt-messagebox': true, [skinClass]: true, 'pkt-messagebox--compact': compact }" v-show="open">
+    <div class="pkt-messagebox__close" v-if="closable">
+      <button
+        class="pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--icon-only"
+        type="button"
+        role="button"
+        tabindex="0"
+        aria-label="close"
+        @keyup.enter="close"
+        @click="close"
+      >
+        <PktIcon class="pkt-btn__icon" name="close"></PktIcon>
+      </button>
+    </div>
+
     <div class="pkt-messagebox__title">
       {{ title }}
     </div>
@@ -9,14 +23,19 @@
 </template>
 
 <script>
+import PktIcon from '../icon/Icon.vue'
+
 export default {
   name: 'PktMessagebox',
+  components: {
+    PktIcon,
+  },
   props: {
     skin: {
       type: String,
       default: 'beige',
       validator(value) {
-        return ['beige', 'green', 'red', 'blue'].includes(value);
+        return ['beige', 'green', 'red', 'blue'].includes(value)
       },
     },
 
@@ -28,11 +47,27 @@ export default {
       type: Boolean,
       default: false,
     },
+    closable: {
+      type: Boolean,
+      default: false,
+    },
   },
   computed: {
     skinClass() {
       return [`pkt-messagebox--${this.skin}`]
     },
+    open() {
+      return !this.closed
+    },
+  },
+  data: () => ({
+    closed: false,
+  }),
+  methods: {
+    close() {
+      this.closed = true
+      this.$emit('on-close', this.closed)
+    },
   },
 }
 </script>