@oslokommune/punkt-vue2 - npm Package Compare versions

Comparing version 11.2.2 to 11.3.0

CHANGELOG.md

@@ -8,2 +8,31 @@ # Changelog
 
+## [11.3.0](https://github.com/oslokommune/punkt/compare/11.2.2...11.3.0) (2024-01-26)
+
+### ⚠ BREAKING CHANGES
+Ingen
+
+### Features
+* new variant "compact" of Alert and Messagebox (#1438). * feat(css,docs): compact/slim alert
+  
+  - Oppdaterer local dev eksempel med slim/kompakt
+  - Justerer css for 'lukk'-knapp i slim versjon av alert
+  - Legg til slim alert i kode dokumentasjonen
+  
+  * feat(docs,css):  slim->compact, messagebox
+  
+  - Lagt inn MessageBox slim kode i css
+  - Lagt inn eksempel i dev pure css & html
+  - Endre fra slim til compact (da det er denne betegnelsen vi bruker i docs og høres litt finere ut)
+  - Legg til compact props i react, vue og vue2 komponenten og oppdater dev eksempel
+
+
+### Bug Fixes
+Ingen
+
+### Chores
+Ingen
+
+---
+
+
 ## [11.0.0](https://github.com/oslokommune/punkt/compare/10.0.0...11.0.0) (2023-12-20)
@@ -10,0 +39,0 @@

dist/Icon-3bd5196b.js

@@ -10,3 +10,3 @@ import { n as o } from "./plugins-364dfcf9.js";
     return {
-      defaultSvgPath: "https://punkt-cdn.oslo.kommune.no/11.2/icons/",
+      defaultSvgPath: "https://punkt-cdn.oslo.kommune.no/11.3/icons/",
       innerHtml: ""
@@ -13,0 +13,0 @@ };

dist/punkt-vue2-alert.js

@@ -1,2 +0,2 @@
-import { P as o } from "./Alert-cd6a13b6.js";
+import { P as o } from "./Alert-3c131904.js";
 import { u as r, a as s } from "./plugins-364dfcf9.js";
@@ -3,0 +3,0 @@ import "./Icon-3bd5196b.js";

dist/punkt-vue2-header.js

@@ -120,3 +120,3 @@ import { P as k } from "./Icon-3bd5196b.js";
     "pkt-header--hidden": t.hidden
-  }, attrs: { id: "pkt-header", "aria-label": "Topp" } }, [e("div", { staticClass: "pkt-header__logo" }, [typeof t.logoLink == "string" ? [e("a", { staticClass: "pkt-header__logo-link", attrs: { "aria-label": "Tilbake til forside", href: t.logoLink } }, [e("PktIcon", { staticClass: "pkt-header__logo-svg", attrs: { name: "oslologo", "aria-hidden": "true", path: "https://punkt-cdn.oslo.kommune.no/11.2/logos/" } })], 1)] : [e("button", { staticClass: "pkt-link-button pkt-link pkt-header__logo-link", attrs: { "aria-label": "Tilbake til forside" }, on: { click: t.logoLink } }, [e("PktIcon", { staticClass: "pkt-header__logo-svg", attrs: { name: "oslologo", "aria-hidden": "true", path: "https://punkt-cdn.oslo.kommune.no/11.2/logos/" } })], 1)], t.serviceName ? e("span", { staticClass: "pkt-header__logo-service" }, [t._v(t._s(t.serviceName))]) : t._e()], 2), e("nav", { staticClass: "pkt-header__actions" }, [e("ul", { staticClass: "pkt-header__actions-row" }, [t.showMenuButton ? e("li", [e("PktButton", { staticClass: "pkt-header__menu-btn", attrs: { skin: "secondary", variant: "icon-right", iconName: "menu" }, on: { onClick: function(s) {
+  }, attrs: { id: "pkt-header", "aria-label": "Topp" } }, [e("div", { staticClass: "pkt-header__logo" }, [typeof t.logoLink == "string" ? [e("a", { staticClass: "pkt-header__logo-link", attrs: { "aria-label": "Tilbake til forside", href: t.logoLink } }, [e("PktIcon", { staticClass: "pkt-header__logo-svg", attrs: { name: "oslologo", "aria-hidden": "true", path: "https://punkt-cdn.oslo.kommune.no/11.3/logos/" } })], 1)] : [e("button", { staticClass: "pkt-link-button pkt-link pkt-header__logo-link", attrs: { "aria-label": "Tilbake til forside" }, on: { click: t.logoLink } }, [e("PktIcon", { staticClass: "pkt-header__logo-svg", attrs: { name: "oslologo", "aria-hidden": "true", path: "https://punkt-cdn.oslo.kommune.no/11.3/logos/" } })], 1)], t.serviceName ? e("span", { staticClass: "pkt-header__logo-service" }, [t._v(t._s(t.serviceName))]) : t._e()], 2), e("nav", { staticClass: "pkt-header__actions" }, [e("ul", { staticClass: "pkt-header__actions-row" }, [t.showMenuButton ? e("li", [e("PktButton", { staticClass: "pkt-header__menu-btn", attrs: { skin: "secondary", variant: "icon-right", iconName: "menu" }, on: { onClick: function(s) {
     return t.$emit("openMenu");
@@ -123,0 +123,0 @@ } } }, [t._v("Meny")])], 1) : t._e(), t.user || t.representing ? e("li", { ref: "userMenu", staticClass: "pkt-header--has-dropdown", class: { "pkt-header--open-dropdown": t.userMenuOpen } }, [e("button", { staticClass: "pkt-header__user-btn pkt-btn pkt-btn--secondary pkt-btn--icons-right-and-left", attrs: { type: "button", "aria-controls": "pktUserDropdown", "aria-expanded": t.userMenuOpen }, on: { click: t.openUserMenu } }, [e("PktIcon", { staticClass: "pkt-btn__icon", attrs: { name: "user" } }), (r = t.representing) != null && r.name || (o = t.user) != null && o.name ? e("span", { staticClass: "pkt-header__user-fullname pkt-btn__text" }, [t._v(t._s(((i = t.representing) == null ? void 0 : i.name) || ((l = t.user) == null ? void 0 : l.name)))]) : t._e(), (u = t.representing) != null && u.shortname || (c = t.user) != null && c.shortname ? e("span", { staticClass: "pkt-header__user-shortname pkt-btn__text" }, [t._v(t._s(((p = t.representing) == null ? void 0 : p.shortname) || ((_ = t.user) == null ? void 0 : _.shortname)))]) : t._e(), e("PktIcon", { staticClass: "pkt-btn--closed", attrs: { name: "chevron-thin-down" } }), e("PktIcon", { staticClass: "pkt-btn--open", attrs: { name: "chevron-thin-up" } })], 1), e("ul", { staticClass: "pkt-header__dropdown pkt-user-menu", attrs: { id: "pktUserDropdown" } }, [t.user ? e("li", [e("div", { staticClass: "pkt-user-menu__label" }, [t._v("Pålogget som")]), e("div", { staticClass: "pkt-user-menu__name" }, [t._v(t._s(t.user.name))]), t.user.lastLoggedIn ? e("div", { staticClass: "pkt-user-menu__last-logged-in" }, [t._v(" Sist pålogget: "), e("time", [t._v(t._s(t.lastLoggedIn))])]) : t._e()]) : t._e(), t.userMenu ? e("li", [e("ul", { staticClass: "pkt-list" }, t._l(t.userMenu, function(s, a) {

dist/punkt-vue2-index.js

@@ -32,6 +32,6 @@ import e from "./punkt-vue2-alert.js";
 import { u as $, r as T } from "./plugins-364dfcf9.js";
-import { P as go } from "./Alert-cd6a13b6.js";
+import { P as go } from "./Alert-3c131904.js";
 import { P as bo } from "./Button-1a3b0851.js";
 import { P as To } from "./Icon-3bd5196b.js";
-import { P as So } from "./InputWrapper-23b6076f.js";
+import { P as So } from "./InputWrapper-98499dc3.js";
 const o = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
@@ -38,0 +38,0 @@ __proto__: null,

dist/punkt-vue2-inputwrapper.js

@@ -1,4 +0,4 @@
-import { P as r } from "./InputWrapper-23b6076f.js";
+import { P as r } from "./InputWrapper-98499dc3.js";
 import { u as o, a as p } from "./plugins-364dfcf9.js";
-import "./Alert-cd6a13b6.js";
+import "./Alert-3c131904.js";
 import "./Icon-3bd5196b.js";
@@ -5,0 +5,0 @@ import "./Button-1a3b0851.js";

dist/punkt-vue2-messagebox.js

 import { n as a, u as n, a as l } from "./plugins-364dfcf9.js";
-const i = {
+const o = {
   name: "PktMessagebox",
@@ -8,4 +8,4 @@ props: {
       default: "beige",
-      validator(e) {
-        return ["beige", "green", "red", "blue"].includes(e);
+      validator(s) {
+        return ["beige", "green", "red", "blue"].includes(s);
       }
@@ -16,2 +16,6 @@ },
       default: ""
+    },
+    compact: {
+      type: Boolean,
+      default: !1
     }
@@ -26,8 +30,8 @@ },
 var r = function() {
-  var s = this, t = s._self._c;
-  return t("div", { staticClass: "pkt-messagebox", class: s.skinClass }, [t("div", { staticClass: "pkt-messagebox__title" }, [s._v(" " + s._s(s.title) + " ")]), t("div", { staticClass: "pkt-messagebox__text" }, [s._t("default")], 2)]);
-}, o = [], _ = /* @__PURE__ */ a(
+  var e = this, t = e._self._c;
+  return t("div", { class: { "pkt-messagebox": !0, [e.skinClass]: !0, "pkt-messagebox--compact": e.compact } }, [t("div", { staticClass: "pkt-messagebox__title" }, [e._v(" " + e._s(e.title) + " ")]), t("div", { staticClass: "pkt-messagebox__text" }, [e._t("default")], 2)]);
+}, i = [], c = /* @__PURE__ */ a(
+  o,
+  r,
   i,
-  r,
-  o,
   !1,
@@ -39,11 +43,11 @@ null,
 );
-const u = _.exports, c = {
-  install(e) {
-    l(e, u);
+const u = c.exports, _ = {
+  install(s) {
+    l(s, u);
   }
 };
-n(c);
+n(_);
 export {
   u as PktMessagebox,
-  c as default
+  _ as default
 };

dist/punkt-vue2-select.js

 import { P as l } from "./Icon-3bd5196b.js";
-import { P as i } from "./Alert-cd6a13b6.js";
+import { P as i } from "./Alert-3c131904.js";
 import { P as s } from "./Button-1a3b0851.js";
-import { P as n } from "./InputWrapper-23b6076f.js";
+import { P as n } from "./InputWrapper-98499dc3.js";
 import { n as o, u as p, a as d } from "./plugins-364dfcf9.js";
@@ -6,0 +6,0 @@ const u = {

dist/punkt-vue2-textarea.js

 import { P as n } from "./Icon-3bd5196b.js";
-import { P as o } from "./Alert-cd6a13b6.js";
+import { P as o } from "./Alert-3c131904.js";
 import { P as s } from "./Button-1a3b0851.js";
-import { P as p } from "./InputWrapper-23b6076f.js";
+import { P as p } from "./InputWrapper-98499dc3.js";
 import { n as u, u as d, a as f } from "./plugins-364dfcf9.js";
@@ -6,0 +6,0 @@ const g = {

dist/punkt-vue2-textinput.js

 import { P as i } from "./Icon-3bd5196b.js";
-import { P as l } from "./Alert-cd6a13b6.js";
-import { P as n } from "./InputWrapper-23b6076f.js";
+import { P as l } from "./Alert-3c131904.js";
+import { P as n } from "./InputWrapper-98499dc3.js";
 import { n as s, u as o, a as p } from "./plugins-364dfcf9.js";
@@ -5,0 +5,0 @@ import "./Button-1a3b0851.js";

package.json

 {
   "name": "@oslokommune/punkt-vue2",
-  "version": "11.2.2",
+  "version": "11.3.0",
   "description": "Vue2 komponentbibliotek til Punkt, et designsystem laget av Oslo Origo",
@@ -30,3 +30,3 @@ "homepage": "https://punkt.oslo.kommune.no",
     "@oslokommune/punkt-assets": "^11.0.0",
-    "@oslokommune/punkt-css": "^11.2.2",
+    "@oslokommune/punkt-css": "^11.3.0",
     "@vitejs/plugin-vue2": "^2.2.0",
@@ -69,3 +69,3 @@ "edit-json-file": "^1.7.0",
   "license": "MIT",
-  "gitHead": "774e405fe043821677feddd5ad6bdeeefd2d6cdb"
+  "gitHead": "14f97a3b27054b3ef5b50b800e49c039e2b2be23"
 }

New alerts

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Fixed alerts

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

210019

0.53%

Lines of code

2151

0.19%

No dependency changes