@oslokommune/punkt-vue - npm Package Compare versions

Comparing version 11.3.0 to 11.4.0

CHANGELOG.md

@@ -8,2 +8,27 @@ # Changelog
 
+## [11.4.0](https://github.com/oslokommune/punkt/compare/11.3.0...11.4.0) (2024-01-31)
+
+### ⚠ BREAKING CHANGES
+Ingen
+
+### Features
+* Switch-variant av Checkbox (#1448). * feat(css): Switch (#1444)
+  * docs:#1417 dokumentasjon switch toggle (#1446)
+  * feat(react,vue): Switch added to Checkbox and test sites (#1447)
+  * Kodedokumentasjon Switch og Checkbox
+  
+  ---------
+  
+  Co-authored-by: Victoria Nerem <[e-mail]>
+
+
+### Bug Fixes
+Ingen
+
+### Chores
+Ingen
+
+---
+
+
 ## [11.3.0](https://github.com/oslokommune/punkt/compare/11.2.2...11.3.0) (2024-01-26)
@@ -10,0 +35,0 @@

dist/punkt-vue-checkbox.js

@@ -1,4 +0,4 @@
-import { openBlock as d, createElementBlock as i, createElementVNode as l, normalizeClass as o, mergeProps as r, createTextVNode as u, toDisplayString as n, createCommentVNode as h } from "vue";
-import { _ as k, u as p, a as f } from "./plugins-IeJb3XDX.js";
-const _ = {
+import { openBlock as l, createElementBlock as a, createElementVNode as o, normalizeClass as n, createTextVNode as s, toDisplayString as i, createCommentVNode as c, mergeProps as k } from "vue";
+import { _ as r, u as _, a as f } from "./plugins-IeJb3XDX.js";
+const b = {
   name: "PktCheckbox",
@@ -12,3 +12,2 @@ props: {
       type: Boolean,
-      required: !1,
       default: !1
@@ -18,3 +17,2 @@ },
       type: Boolean,
-      required: !1,
       default: !1
@@ -24,3 +22,2 @@ },
       type: Boolean,
-      required: !1,
       default: !1
@@ -30,3 +27,2 @@ },
       type: Boolean,
-      required: !1,
       default: !1
@@ -38,2 +34,11 @@ },
     },
+    labelPosition: {
+      type: String,
+      default: "right"
+    },
+    hideLabel: {
+      // ‼️ Hides label *and* help text
+      type: Boolean,
+      default: !1
+    },
     checkHelptext: {
@@ -45,4 +50,7 @@ type: String,
       type: Boolean,
-      required: !1,
       default: !1
+    },
+    isSwitch: {
+      type: Boolean,
+      default: !1
     }
@@ -66,38 +74,55 @@ },
   }
-}, m = { class: "pkt-input-check" }, C = ["id", "checked", "disabled"], g = ["for"], b = {
+}, m = { class: "pkt-input-check" }, p = ["for"], y = {
   key: 0,
   class: "pkt-input-check__input-helptext"
+}, g = ["role", "id", "checked", "disabled"], x = ["for"], C = {
+  key: 0,
+  class: "pkt-input-check__input-helptext"
 };
-function x(t, c, e, B, V, a) {
-  return d(), i("div", m, [
-    l("div", {
-      class: o([{ "pkt-input-check__input--tile": e.hasTile }, "pkt-input-check__input"])
+function B(t, h, e, V, H, d) {
+  return l(), a("div", m, [
+    o("div", {
+      class: n([
+        "pkt-input-check__input",
+        { "pkt-input-check__input--tile": e.hasTile },
+        { "pkt-input-check__input--tile-disabled": e.disabled && e.hasTile }
+      ])
     }, [
-      l("input", r(t.$attrs, {
+      e.label && e.labelPosition === "left" ? (l(), a("label", {
+        key: 0,
+        class: n(["pkt-input-check__input-label", { "pkt-sr-only": e.hideLabel }]),
+        for: e.id
+      }, [
+        s(i(e.label) + " ", 1),
+        e.checkHelptext ? (l(), a("div", y, i(e.checkHelptext), 1)) : c("", !0)
+      ], 10, p)) : c("", !0),
+      o("input", k(t.$attrs, {
         class: ["pkt-input-check__input-checkbox", { "pkt-input-check__input-checkbox--error": e.hasError }],
         type: "checkbox",
+        role: e.isSwitch ? "switch" : "checkbox",
         id: e.id,
-        checked: a.computedChecked || e.defaultChecked,
-        onChange: c[0] || (c[0] = (...s) => a.handleChange && a.handleChange(...s)),
+        checked: d.computedChecked || e.defaultChecked,
+        onChange: h[0] || (h[0] = (...u) => d.handleChange && d.handleChange(...u)),
         disabled: e.disabled
-      }), null, 16, C),
-      l("label", {
-        class: "pkt-input-check__input-label",
+      }), null, 16, g),
+      e.label && e.labelPosition === "right" ? (l(), a("label", {
+        key: 1,
+        class: n(["pkt-input-check__input-label", { "pkt-sr-only": e.hideLabel }]),
         for: e.id
       }, [
-        u(n(e.label) + " ", 1),
-        e.checkHelptext ? (d(), i("div", b, n(e.checkHelptext), 1)) : h("", !0)
-      ], 8, g)
+        s(i(e.label) + " ", 1),
+        e.checkHelptext ? (l(), a("div", C, i(e.checkHelptext), 1)) : c("", !0)
+      ], 10, x)) : c("", !0)
     ], 2)
   ]);
 }
-const y = /* @__PURE__ */ k(_, [["render", x]]), q = {
+const P = /* @__PURE__ */ r(b, [["render", B]]), S = {
   install(t) {
-    f(t, y);
+    f(t, P);
   }
 };
-p(q);
+_(S);
 export {
-  y as PktCheckbox,
-  q as default
+  P as PktCheckbox,
+  S as default
 };

package.json

 {
   "name": "@oslokommune/punkt-vue",
-  "version": "11.3.0",
+  "version": "11.4.0",
   "description": "Vue 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.3.0",
+    "@oslokommune/punkt-css": "^11.4.0",
     "@vitejs/plugin-vue": "^4.5.2",
@@ -69,3 +69,3 @@ "edit-json-file": "^1.7.0",
   "license": "MIT",
-  "gitHead": "14f97a3b27054b3ef5b50b800e49c039e2b2be23"
+  "gitHead": "1e04495e9ba9208f350a7550e97cc2dc2b2de0f5"
 }

No alert changes

Improved metrics

Total package byte prevSize

245806

increased by1.15%

Lines of code

3077

increased by0.89%

No dependency changes