@oslokommune/punkt-vue 9.6.0

package/CONTRIBUTING.md

@@ -0,0 +1,130 @@
+## Hvordan bidra - Vue ⭐
+
+Vi er veldig happy med at du vurderer å bidra! Om du er usikker på noe som helst,
+ta kontakt. Eller bare send inn den buggen eller PRen uansett. Verste som skjer
+er at vi høflig ber deg endre på noe. **Vi setter pris på alle hyggelige bidrag!**
+
+## 📝 Forutsetninger
+
+- nodejs 16.15
+- Kunnskap om [Sass (SCSS)](https://sass-lang.com/) og [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS).
+- Forståelse av [BEM-navnekonvensjoner](http://getbem.com/) som designsystemet følger.
+- Noen skal ha designet komponenten i [Figma](https://www.figma.com/file/Eej5jm3jIUjeMfzLE0aOTB/Punkt---Origo-designsystem?node-id=0%3A1&t=VDbEaltk80wYiYn3-0) (Krever innlogging og tilgang).
+
+Aller først må du konfigurere git-hooks slik at scripts kjøres ved commits, som for eksempel et script som kopierer innhold fra readme og contributing til dokumentasjonsnettsiden.
+
+Sett opp git hooks:
+
+```sh
+git config core.hooksPath scripts/git-hooks
+```
+
+### Lerna
+
+Punkt er et monorepo og bruker `lerna`. Det betyr at alle kommandoer kjører
+fra repoets rot, og ikke i subrepoene.
+
+Et utdrag fra rot-package.json viser noen scripts som er satt opp for å forenkle
+utvikling i dette subrepoet:
+
+```sh
+  "scripts": {
+    "build-vue": "npx lerna run build --scope=@oslokommune/punkt-vue",
+    "build-vue-app": "npx lerna run build-app --scope=@oslokommune/punkt-vue",
+    "dev-vue": "npx lerna run dev --scope=@oslokommune/punkt-vue",
+  }
+```
+
+### Figma
+
+Sørg for at noen har designet komponenten i [Figma](https://www.figma.com/file/Eej5jm3jIUjeMfzLE0aOTB/Punkt---Origo-designsystem?node-id=0%3A1&t=VDbEaltk80wYiYn3-0)
+(Krever innlogging og tilgang).
+
+## 🛠️ Gjør arbeidet
+
+### Filstruktur
+
+Under components lag en folder med komponentnavnet. Lag to filer, en for
+vue-komponenten og en for eksport av komponenten. Prefixen `Pkt` skal ikke
+være med på navngivingen, men skal navngis i komponenten og eksporteres
+med det.
+
+```sh
+vue/
+└── src/
+    └── components/
+        └── alert/
+            ├── index.js
+            └── Alert.vue
+```
+
+Husk å legge til komponenten i index.js som ligger i components-mappen.
+
+```js
+// components/index.js
+
+import Alert from './Alert.vue'
+import { use, registerComponent } from '../../utils/plugins'
+
+const Plugin = {
+  install(Vue) {
+    registerComponent(Vue, Alert)
+  },
+}
+
+use(Plugin)
+
+export default Plugin
+
+export { Alert as PktAlert }
+```
+
+### Lokal utviklingsserver
+
+For å teste komponenten din kan du legge den til i `views` og `router`, kjør følgende (fra root):
+
+```sh
+$ npm run dev-vue
+```
+
+### SCSS
+
+Det enkleste er å starte og utvikle komponenten som en normal vue-komponent,
+med SCSS i `<style>`. Når du er fornøyd flytt SCSS til `punkt-css`:
+
+```sh
+css/
+└── src/
+    └── scss/
+        └── components/
+            └── _alert.scss
+```
+
+Fra mappen `css` kjør:
+
+```sh
+$ npm run build-package
+```
+
+Da skal CSS'en være tilgjengelig for deg i `vue`
+
+## 🤝 Lag PR
+
+Når du er klar for en PR skriv din GitHub-message som sier hva som er gjort, og evt issue nummer.
+
+Vi bruker [Conventional Commits](https://www.conventionalcommits.org/) for å beskrive commits gjennom
+noen regler. Ingen fare om du ikke følger den, vi tar en gjennomgang og evt justerer 😎.
+
+```sh
+fix(vue): #NR Rett feil på alert-komponenten              # med issuenummer
+fix(vue): Rett feil på alert-komponenten                  # patcher en bug i koden (patch i Semantic Versioning)
+feat(vue): Legg til funksjonalitet                        # ny funksjonalitet i koden (minor i Semantic Versioning)
+feat(vue)!: Legg til funksjonalitet og endre eksisterende # breaking change i koden (major i Semantic Versioning)
+docs: Endre dokumentasjon                                  # Endring i dokumentasjon
+```
+
+## 🔢 Publisering og versjonering
+
+Vi tar oss av publisering av pakken og versjonering.
+
+Punkt bruker [Semantic Versioning 2.0.0](https://semver.org/spec/v2.0.0.html) for versjonering av pakkene.

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023-present Oslo kommune, Oslo Origo
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,65 @@
+## Bruk av punkt-vue
+
+<a href="https://www.npmjs.com/package/@oslokommune/punkt-vue" target="_blank"><img src="https://img.shields.io/npm/v/@oslokommune/punkt-vue?logo=vue.js&label=vue&style=for-the-badge&color=42b883" alt="Vue komponenter" /></a>
+
+Dette repoet inneholder Punkt sine UI-komponenter for Vue 3. Komponentene er laget for å fungere sammen med `@oslokommune/punkt-assets` og `@oslokommune/punkt-css`.
+
+## 📝 Forutsetninger
+
+Peer dependencies:
+
+- nodejs `16.15`
+- vue `>= 2.6.12 < 3.0.0`
+- @oslokommune/punkt-assets `>= 1.0`
+- @oslokommune/punkt-css `>= 1.0`
+
+## 🚀 Kom i gang - npm
+
+### 1. Installer komponentbiblioteket
+
+```sh
+npm add @oslokommune/punkt-vue
+```
+
+### 2. Importer komponentene
+
+```js
+/* src/main.js
+
+Velg å installere hele bundlen */
+import Vue from 'vue'
+import PktVue from '@oslokommune/punkt-vue'
+
+Vue.use(PktVue)
+
+/* eller kun individuelle komponenter (med ikoner)*/
+import Vue from 'vue'
+import { PktHeader, PktFooter, PktIcon } from '@oslokommune/punkt-vue'
+
+Vue.component('pkt-header', PktHeader)
+Vue.component('pkt-footer', PktFooter)
+Vue.component('pkt-icon', PktIcon)
+```
+
+## 🟪 Ikoner
+
+Alle våre komponenter bruker PktIcon-komponenten for å importere
+ikonene via vår [CDN](https://punkt-cdn.oslo.kommune.no/).
+
+Om du har en content security policy(CSP) satt opp må du åpne for https://punkt-cdn.oslo.kommune.no/ i din CSP.
+
+Les mer om ikoner [her.](/ressurser/ikoner/kode)
+
+## 🧩 Komponentbiblioteket
+
+For beskrivelse av hvordan ta i bruk hver enkelt komponent se [om komponenter](/komponenter/om-komponenter).
+
+## 🔢 Versjonering
+
+Punkt bruker [Semantic Versioning 2.0.0](https://semver.org/spec/v2.0.0.html) for versjonering av pakkene.
+
+## 👮 Lisens
+
+`Punkt` er distribuert under [MIT-lisens](https://github.com/oslokommune/punkt/blob/main/packages/vue/LICENSE) for åpen kildekode.
+
+![NPM License](https://img.shields.io/npm/l/@oslokommune/punkt-vue?style=for-the-badge)

package/dist/Alert-CShkNLKz.cjs

@@ -0,0 +1 @@
+"use strict";const r=require("./Icon-Q_SkpRJa.cjs"),e=require("vue"),i=require("./plugins-AiK__HqQ.cjs"),c={name:"PktAlert",components:{PktIcon:r.PktIcon},props:{skin:{type:String,default:"info",validator(n){return["error","success","warning","info"].includes(n)}},closeAlert:{type:Boolean,default:!1},title:{type:String,default:""},date:{type:String,default:""},ariaLive:{type:String,default:"polite",validator(n){return["off","polite","assertive"].includes(n)}},slim:{type:Boolean,default:!1}},data:()=>({closed:!1}),methods:{close(){this.closed=!0,this.$emit("on-close",this.closed)}},computed:{skinClass(){return[`pkt-alert--${this.skin}`]},open(){return!this.closed},iconName(){return this.skin==="info"?"alert-information":`alert-${this.skin}`}}},d=["aria-live"],k={key:0,class:"pkt-alert__close"},u={key:1,class:"pkt-alert__title"},m={class:"pkt-alert__text"},_={key:2,class:"pkt-alert__date"};function p(n,o,t,v,y,l){const a=e.resolveComponent("pkt-icon");return e.withDirectives((e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass({"pkt-alert":!0,[l.skinClass]:!0,"pkt-alert--slim":t.slim}),"aria-live":t.ariaLive},[e.createVNode(a,{name:l.iconName,class:"pkt-alert__icon"},null,8,["name"]),t.closeAlert?(e.openBlock(),e.createElementBlock("div",k,[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((...s)=>l.close&&l.close(...s),["enter"])),onClick:o[1]||(o[1]=(...s)=>l.close&&l.close(...s))},[e.createVNode(a,{class:"pkt-btn__icon",name:"close"})],32)])):e.createCommentVNode("",!0),t.title?(e.openBlock(),e.createElementBlock("div",u,e.toDisplayString(t.title),1)):e.createCommentVNode("",!0),e.createElementVNode("div",m,[e.renderSlot(n.$slots,"default")]),t.date?(e.openBlock(),e.createElementBlock("div",_,"Sist oppdatert: "+e.toDisplayString(t.date),1)):e.createCommentVNode("",!0)],10,d)),[[e.vShow,l.open]])}const f=i._export_sfc(c,[["render",p]]);exports.PktAlert=f;

package/dist/Alert-eoZOqLMh.js

@@ -0,0 +1,108 @@
+import { P as u } from "./Icon-s3ZNrtl-.js";
+import { resolveComponent as m, withDirectives as _, openBlock as a, createElementBlock as n, normalizeClass as p, createVNode as c, createElementVNode as d, withKeys as f, createCommentVNode as i, toDisplayString as k, renderSlot as v, vShow as y } from "vue";
+import { _ as h } from "./plugins-IeJb3XDX.js";
+const b = {
+  name: "PktAlert",
+  components: {
+    PktIcon: u
+  },
+  props: {
+    skin: {
+      type: String,
+      default: "info",
+      validator(l) {
+        return ["error", "success", "warning", "info"].includes(l);
+      }
+    },
+    closeAlert: {
+      type: Boolean,
+      default: !1
+    },
+    title: {
+      type: String,
+      default: ""
+    },
+    date: {
+      type: String,
+      default: ""
+    },
+    ariaLive: {
+      type: String,
+      default: "polite",
+      validator(l) {
+        return ["off", "polite", "assertive"].includes(l);
+      }
+    },
+    slim: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  data: () => ({
+    closed: !1
+  }),
+  methods: {
+    close() {
+      this.closed = !0, this.$emit("on-close", this.closed);
+    }
+  },
+  computed: {
+    skinClass() {
+      return [`pkt-alert--${this.skin}`];
+    },
+    open() {
+      return !this.closed;
+    },
+    iconName() {
+      return this.skin === "info" ? "alert-information" : `alert-${this.skin}`;
+    }
+  }
+}, S = ["aria-live"], g = {
+  key: 0,
+  class: "pkt-alert__close"
+}, C = {
+  key: 1,
+  class: "pkt-alert__title"
+}, N = { class: "pkt-alert__text" }, P = {
+  key: 2,
+  class: "pkt-alert__date"
+};
+function w(l, s, t, x, A, e) {
+  const r = m("pkt-icon");
+  return _((a(), n("div", {
+    class: p({ "pkt-alert": !0, [e.skinClass]: !0, "pkt-alert--slim": t.slim }),
+    "aria-live": t.ariaLive
+  }, [
+    c(r, {
+      name: e.iconName,
+      class: "pkt-alert__icon"
+    }, null, 8, ["name"]),
+    t.closeAlert ? (a(), n("div", g, [
+      d("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] = f((...o) => e.close && e.close(...o), ["enter"])),
+        onClick: s[1] || (s[1] = (...o) => e.close && e.close(...o))
+      }, [
+        c(r, {
+          class: "pkt-btn__icon",
+          name: "close"
+        })
+      ], 32)
+    ])) : i("", !0),
+    t.title ? (a(), n("div", C, k(t.title), 1)) : i("", !0),
+    d("div", N, [
+      v(l.$slots, "default")
+    ]),
+    t.date ? (a(), n("div", P, "Sist oppdatert: " + k(t.date), 1)) : i("", !0)
+  ], 10, S)), [
+    [y, e.open]
+  ]);
+}
+const E = /* @__PURE__ */ h(b, [["render", w]]);
+export {
+  E as P
+};

package/dist/Button-h1iXT3rO.cjs

@@ -0,0 +1 @@
+"use strict";const o=require("./Icon-Q_SkpRJa.cjs"),e=require("vue"),a=require("./plugins-AiK__HqQ.cjs"),c={name:"PktButton",components:{PktIcon:o.PktIcon},props:{disabled:{type:Boolean,required:!1,default:!1},iconName:{type:String,required:!1,default:"user"},secondIconName:{type:String,required:!1,default:"user"},size:{type:String,default:"medium",validator:t=>["small","medium","large"].includes(t)},skin:{type:String,default:"primary",validator:t=>["primary","secondary","tertiary"].includes(t)},color:{type:String,validator:t=>["blue","blue-outline","green","green-outline","green-dark","green-dark-outline","beige-light","beige-dark-outline","yellow","yellow-outline","red","red-outline"].includes(t)},text:{type:String,required:!1,default:"Trykk her"},variant:{type:String,default:"label-only",validator:t=>["label-only","icon-left","icon-right","icon-only","icons-right-and-left"].includes(t)},type:{type:String,default:"button",validator:t=>["button","submit","reset"].includes(t)}},computed:{classes(){return["pkt-btn",this.sizeClass,this.skinClass,this.variantClass,this.colorClass]},sizeClass(){return this.size!=="medium"?`pkt-btn--${this.size}`:""},skinClass(){return this.skin!=="primary"?`pkt-btn--${this.skin}`:""},colorClass(){return this.color?`pkt-btn--${this.color}`:""},variantClass(){return this.variant!=="label-only"?`pkt-btn--${this.variant}`:""}}},u=["type","disabled"],d={class:"pkt-btn__text"};function k(t,i,n,y,p,s){const l=e.resolveComponent("pkt-icon");return e.openBlock(),e.createElementBlock("button",e.mergeProps(t.$attrs,{type:n.type,class:s.classes,onClick:i[0]||(i[0]=r=>t.$emit("onClick")),onKeyup:i[1]||(i[1]=e.withKeys(r=>t.$emit("onClick"),["enter"])),disabled:n.disabled}),[n.variant!=="label-only"?(e.openBlock(),e.createBlock(l,{key:0,class:"pkt-btn__icon",name:n.iconName},null,8,["name"])):e.createCommentVNode("",!0),e.createElementVNode("span",d,[e.renderSlot(t.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(n.text),1)])]),n.variant==="icons-right-and-left"?(e.openBlock(),e.createBlock(l,{key:1,class:"pkt-btn__icon",name:n.secondIconName},null,8,["name"])):e.createCommentVNode("",!0)],16,u)}const m=a._export_sfc(c,[["render",k]]);exports.PktButton=m;

package/dist/Button-oFCw2kbo.js

@@ -0,0 +1,116 @@
+import { P as d } from "./Icon-s3ZNrtl-.js";
+import { resolveComponent as u, openBlock as i, createElementBlock as c, mergeProps as m, withKeys as k, createBlock as r, createCommentVNode as s, createElementVNode as p, renderSlot as y, createTextVNode as b, toDisplayString as f } from "vue";
+import { _ as g } from "./plugins-IeJb3XDX.js";
+const h = {
+  name: "PktButton",
+  components: {
+    PktIcon: d
+  },
+  props: {
+    disabled: {
+      type: Boolean,
+      required: !1,
+      default: !1
+    },
+    iconName: {
+      type: String,
+      required: !1,
+      default: "user"
+    },
+    secondIconName: {
+      type: String,
+      required: !1,
+      default: "user"
+    },
+    size: {
+      type: String,
+      default: "medium",
+      validator: (e) => ["small", "medium", "large"].includes(e)
+    },
+    skin: {
+      type: String,
+      default: "primary",
+      validator: (e) => ["primary", "secondary", "tertiary"].includes(e)
+    },
+    color: {
+      type: String,
+      validator: (e) => [
+        "blue",
+        "blue-outline",
+        "green",
+        "green-outline",
+        "green-dark",
+        "green-dark-outline",
+        "beige-light",
+        "beige-dark-outline",
+        "yellow",
+        "yellow-outline",
+        "red",
+        "red-outline"
+      ].includes(e)
+    },
+    // Text will get overwritten by "slot" if we have any DOM children in the button element
+    text: {
+      type: String,
+      required: !1,
+      default: "Trykk her"
+    },
+    variant: {
+      type: String,
+      default: "label-only",
+      validator: (e) => ["label-only", "icon-left", "icon-right", "icon-only", "icons-right-and-left"].includes(e)
+    },
+    type: {
+      type: String,
+      default: "button",
+      validator: (e) => ["button", "submit", "reset"].includes(e)
+    }
+  },
+  computed: {
+    classes() {
+      return ["pkt-btn", this.sizeClass, this.skinClass, this.variantClass, this.colorClass];
+    },
+    sizeClass() {
+      return this.size !== "medium" ? `pkt-btn--${this.size}` : "";
+    },
+    skinClass() {
+      return this.skin !== "primary" ? `pkt-btn--${this.skin}` : "";
+    },
+    colorClass() {
+      return this.color ? `pkt-btn--${this.color}` : "";
+    },
+    variantClass() {
+      return this.variant !== "label-only" ? `pkt-btn--${this.variant}` : "";
+    }
+  }
+}, v = ["type", "disabled"], _ = { class: "pkt-btn__text" };
+function C(e, n, t, S, N, a) {
+  const l = u("pkt-icon");
+  return i(), c("button", m(e.$attrs, {
+    type: t.type,
+    class: a.classes,
+    onClick: n[0] || (n[0] = (o) => e.$emit("onClick")),
+    onKeyup: n[1] || (n[1] = k((o) => e.$emit("onClick"), ["enter"])),
+    disabled: t.disabled
+  }), [
+    t.variant !== "label-only" ? (i(), r(l, {
+      key: 0,
+      class: "pkt-btn__icon",
+      name: t.iconName
+    }, null, 8, ["name"])) : s("", !0),
+    p("span", _, [
+      y(e.$slots, "default", {}, () => [
+        b(f(t.text), 1)
+      ])
+    ]),
+    t.variant === "icons-right-and-left" ? (i(), r(l, {
+      key: 1,
+      class: "pkt-btn__icon",
+      name: t.secondIconName
+    }, null, 8, ["name"])) : s("", !0)
+  ], 16, v);
+}
+const z = /* @__PURE__ */ g(h, [["render", C]]);
+export {
+  z as P
+};

package/dist/Icon-Q_SkpRJa.cjs

@@ -0,0 +1 @@
+"use strict";const o=require("vue"),i=require("./plugins-AiK__HqQ.cjs"),r={},c='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"></svg>';function u(t,n){return!r[t]&&typeof window.fetch=="function"&&(r[t]=window.fetch(n+t+".svg").then(e=>e.ok?e.text():(console.error("Missing icon: "+n+t+".svg"),c)).then(e=>e)),Promise.resolve(r[t])}const h={name:"PktIcon",data(){return{defaultSvgPath:"https://punkt-cdn.oslo.kommune.no/latest/icons/",innerHtml:""}},props:{name:{type:String,required:!0,default:void 0},path:{type:String,default:void 0}},watch:{name:{handler:"onNameChange",immediate:!0}},methods:{onNameChange(t){const n=this.path||this.$pktSvgPath||this.defaultSvgPath;u(t,n).then(e=>{this.innerHtml=e})}}},a=["innerHTML"];function l(t,n,e,p,s,f){return s.innerHtml?(o.openBlock(),o.createElementBlock("span",{key:0,class:"pkt-icon",innerHTML:s.innerHtml},null,8,a)):o.createCommentVNode("",!0)}const d=i._export_sfc(h,[["render",l]]);exports.PktIcon=d;

package/dist/Icon-s3ZNrtl-.js

@@ -0,0 +1,51 @@
+import { openBlock as i, createElementBlock as s, createCommentVNode as c } from "vue";
+import { _ as a } from "./plugins-IeJb3XDX.js";
+const o = {}, h = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"></svg>';
+function u(t, n) {
+  return !o[t] && typeof window.fetch == "function" && (o[t] = window.fetch(n + t + ".svg").then((e) => e.ok ? e.text() : (console.error("Missing icon: " + n + t + ".svg"), h)).then((e) => e)), Promise.resolve(o[t]);
+}
+const p = {
+  name: "PktIcon",
+  data() {
+    return {
+      defaultSvgPath: "https://punkt-cdn.oslo.kommune.no/latest/icons/",
+      innerHtml: ""
+    };
+  },
+  props: {
+    name: {
+      type: String,
+      required: !0,
+      default: void 0
+    },
+    path: {
+      type: String,
+      default: void 0
+    }
+  },
+  watch: {
+    name: {
+      handler: "onNameChange",
+      immediate: !0
+    }
+  },
+  methods: {
+    onNameChange(t) {
+      const n = this.path || this.$pktSvgPath || this.defaultSvgPath;
+      u(t, n).then((e) => {
+        this.innerHtml = e;
+      });
+    }
+  }
+}, l = ["innerHTML"];
+function m(t, n, e, d, r, f) {
+  return r.innerHtml ? (i(), s("span", {
+    key: 0,
+    class: "pkt-icon",
+    innerHTML: r.innerHtml
+  }, null, 8, l)) : c("", !0);
+}
+const _ = /* @__PURE__ */ a(p, [["render", m]]);
+export {
+  _ as P
+};