@oslokommune/punkt-vue 11.5.3 → 11.6.0

package/CHANGELOG.md

@@ -5,6 +5,28 @@ og skriver commits ca etter [Conventional Commits](https://conventionalcommits.o
 
 ---
 
+## [11.6.0](https://github.com/oslokommune/punkt/compare/11.5.4...11.6.0) (2024-02-16)
+
+### ⚠ BREAKING CHANGES
+Ingen
+
+### Features
+* PktLoader kan utsette visning (#1520). * feat(vue,react): PktLoader kan utsette visning
+  
+  * Fjern ReactNode
+  
+  * className
+
+
+### Bug Fixes
+Ingen
+
+### Chores
+Ingen
+
+---
+
+
 ## [11.5.0](https://github.com/oslokommune/punkt/compare/11.4.9...11.5.0) (2024-02-14)
 
 ### ⚠ BREAKING CHANGES

package/dist/punkt-vue-loader.cjs

@@ -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;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),d=require("./Icon-Q_SkpRJa.cjs"),s=require("./plugins-AiK__HqQ.cjs"),c=["aria-busy"],m={key:0},r={__name:"Loader",props:{message:String,size:{type:String,default:"medium",validator:a=>["small","medium","large"].includes(a)},inline:{type:Boolean,default:!1},isLoading:{type:Boolean,default:!0},variant:{type:String,default:"rainbow",validator:a=>["blue","rainbow","shapes"].includes(a)},delay:{type:Number,default:0}},setup(a){const n=a,u=t=>t==="shapes"?"loader":t==="blue"?"spinner-blue":"spinner",{delay:l}=e.toRefs(n);let o=e.ref(!(l.value>0));return l.value>0&&setTimeout(()=>{o.value=!0},l.value),(t,k)=>(e.openBlock(),e.createElementBlock("div",{role:"status","aria-live":"polite","aria-busy":a.isLoading,class:e.normalizeClass(`pkt-loader--${a.inline?"inline":"box"}`)},[a.isLoading?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.unref(o)?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(`pkt-loader pkt-loader--${n.size}`),"data-testid":"pkt-loader"},[e.createVNode(d.PktIcon,{name:u(a.variant),"aria-label":"loading",path:"https://punkt-cdn.oslo.kommune.no/latest/animations/",class:e.normalizeClass(`pkt-loader__svg pkt-loader__${a.variant}`)},null,8,["name","class"]),a.message?(e.openBlock(),e.createElementBlock("p",m,e.toDisplayString(a.message),1)):e.createCommentVNode("",!0)],2)):e.createCommentVNode("",!0)],64)):e.renderSlot(t.$slots,"default",{key:1})],10,c))}},i={install(a){s.registerComponent(a,r)}};s.use(i);exports.PktLoader=r;exports.default=i;

package/dist/punkt-vue-loader.js

@@ -1,7 +1,7 @@
-import { openBlock as t, createElementBlock as n, normalizeClass as s, createVNode as o, toDisplayString as r, createCommentVNode as d, renderSlot as u } from "vue";
-import { P as m } from "./Icon-s3ZNrtl-.js";
-import { u as c, a as p } from "./plugins-IeJb3XDX.js";
-const g = ["aria-busy"], k = { key: 0 }, f = {
+import { toRefs as u, ref as m, openBlock as t, createElementBlock as l, normalizeClass as n, Fragment as c, unref as p, createVNode as g, toDisplayString as f, createCommentVNode as r, renderSlot as k } from "vue";
+import { P as y } from "./Icon-s3ZNrtl-.js";
+import { u as v, a as b } from "./plugins-IeJb3XDX.js";
+const h = ["aria-busy"], L = { key: 0 }, S = {
   __name: "Loader",
   props: {
     message: String,
@@ -22,38 +22,47 @@ const g = ["aria-busy"], k = { key: 0 }, f = {
       type: String,
       default: "rainbow",
       validator: (e) => ["blue", "rainbow", "shapes"].includes(e)
+    },
+    delay: {
+      type: Number,
+      default: 0
     }
   },
   setup(e) {
-    const i = e, l = (a) => a === "shapes" ? "loader" : a === "blue" ? "spinner-blue" : "spinner";
-    return (a, b) => (t(), n("div", {
+    const o = e, d = (a) => a === "shapes" ? "loader" : a === "blue" ? "spinner-blue" : "spinner", { delay: s } = u(o);
+    let i = m(!(s.value > 0));
+    return s.value > 0 && setTimeout(() => {
+      i.value = !0;
+    }, s.value), (a, P) => (t(), l("div", {
       role: "status",
       "aria-live": "polite",
       "aria-busy": e.isLoading,
-      class: s(`pkt-loader--${e.inline ? "inline" : "box"}`)
+      class: n(`pkt-loader--${e.inline ? "inline" : "box"}`)
     }, [
-      e.isLoading ? (t(), n("div", {
-        key: 0,
-        class: s(`pkt-loader pkt-loader--${i.size}`),
-        "data-testid": "pkt-loader"
-      }, [
-        o(m, {
-          name: l(e.variant),
-          "aria-label": "loading",
-          path: "https://punkt-cdn.oslo.kommune.no/latest/animations/",
-          class: s(`pkt-loader__svg pkt-loader__${e.variant}`)
-        }, null, 8, ["name", "class"]),
-        e.message ? (t(), n("p", k, r(e.message), 1)) : d("", !0)
-      ], 2)) : u(a.$slots, "default", { key: 1 })
-    ], 10, g));
+      e.isLoading ? (t(), l(c, { key: 0 }, [
+        p(i) ? (t(), l("div", {
+          key: 0,
+          class: n(`pkt-loader pkt-loader--${o.size}`),
+          "data-testid": "pkt-loader"
+        }, [
+          g(y, {
+            name: d(e.variant),
+            "aria-label": "loading",
+            path: "https://punkt-cdn.oslo.kommune.no/latest/animations/",
+            class: n(`pkt-loader__svg pkt-loader__${e.variant}`)
+          }, null, 8, ["name", "class"]),
+          e.message ? (t(), l("p", L, f(e.message), 1)) : r("", !0)
+        ], 2)) : r("", !0)
+      ], 64)) : k(a.$slots, "default", { key: 1 })
+    ], 10, h));
   }
-}, y = {
+}, B = {
   install(e) {
-    p(e, f);
+    b(e, S);
   }
 };
-c(y);
+v(B);
 export {
-  f as PktLoader,
-  y as default
+  S as PktLoader,
+  B as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-vue",
-  "version": "11.5.3",
+  "version": "11.6.0",
   "description": "Vue komponentbibliotek til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -65,5 +65,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "683cde8f21abc895d5bea931ba2ae5a4eb5315ee"
+  "gitHead": "625cf310735226cfcdae9d27c3f18c04d335ed14"
 }

package/src/components/loader/Loader.vue

@@ -1,7 +1,7 @@
 <template>
   <div role="status" aria-live="polite" :aria-busy="isLoading" :class="`pkt-loader--${inline ? 'inline' : 'box'}`">
     <template v-if="isLoading">
-      <div :class="`pkt-loader pkt-loader--${props.size}`" data-testid="pkt-loader">
+      <div v-if="shouldDisplayLoader" :class="`pkt-loader pkt-loader--${props.size}`" data-testid="pkt-loader">
         <PktIcon
           :name="getVariant(variant)"
           aria-label="loading"
@@ -18,6 +18,7 @@
 </template>
 
 <script setup>
+import { ref, toRefs } from 'vue'
 import PktIcon from '../icon/Icon.vue'
 
 const props = defineProps({
@@ -40,9 +41,21 @@ const props = defineProps({
     default: 'rainbow',
     validator: (value) => ['blue', 'rainbow', 'shapes'].includes(value),
   },
+  delay: {
+    type: Number,
+    default: 0,
+  },
 })
 
 const getVariant = (variant) => {
   return variant === 'shapes' ? 'loader' : variant === 'blue' ? 'spinner-blue' : 'spinner'
 }
+
+const { delay } = toRefs(props)
+let shouldDisplayLoader = ref(delay.value > 0 ? false : true)
+
+delay.value > 0 &&
+  setTimeout(() => {
+    shouldDisplayLoader.value = true
+  }, delay.value)
 </script>