@oslokommune/punkt-vue 9.6.0

package/dist/punkt-vue-textinput.js

@@ -0,0 +1,216 @@
+import { P as m } from "./Icon-s3ZNrtl-.js";
+import { P as g } from "./Alert-eoZOqLMh.js";
+import { P as h } from "./InputWrapper--d9sdKAg.js";
+import { resolveComponent as u, openBlock as t, createBlock as r, withCtx as y, createElementVNode as s, createElementBlock as f, toDisplayString as p, createCommentVNode as o, mergeProps as x, createTextVNode as b } from "vue";
+import { _ as q, u as k, a as S } from "./plugins-IeJb3XDX.js";
+import "./Button-oFCw2kbo.js";
+const T = {
+  name: "PktTextinput",
+  components: { PktIcon: m, PktAlert: g, PktInputWrapper: h },
+  inheritAttrs: !1,
+  props: {
+    label: {
+      type: String,
+      required: !0,
+      default: "input"
+    },
+    helptext: {
+      type: String,
+      required: !1
+    },
+    helptextDropdown: {
+      type: String,
+      required: !1
+    },
+    helptextDropdownButton: {
+      type: String,
+      required: !1
+    },
+    optionalTag: {
+      type: Boolean,
+      required: !1,
+      default: !1
+    },
+    optionalText: {
+      type: String,
+      required: !1
+    },
+    requiredTag: {
+      type: Boolean,
+      required: !1,
+      default: !1
+    },
+    requiredText: {
+      type: String,
+      required: !1
+    },
+    hasError: {
+      type: Boolean,
+      required: !1
+    },
+    errorMessage: {
+      type: String,
+      required: !1
+    },
+    name: {
+      type: String,
+      required: !1
+    },
+    id: {
+      type: String,
+      required: !0
+    },
+    placeholder: {
+      type: String,
+      required: !1
+    },
+    type: {
+      type: String,
+      required: !1,
+      default: "text"
+    },
+    autocomplete: {
+      type: String,
+      required: !1,
+      default: "off"
+    },
+    modelValue: {
+      type: String,
+      required: !1
+    },
+    suffix: {
+      type: String,
+      required: !1
+    },
+    prefix: {
+      type: String,
+      required: !1
+    },
+    iconNameRight: {
+      type: String,
+      required: !1
+    },
+    disabled: {
+      type: Boolean,
+      required: !1,
+      default: !1
+    },
+    inline: {
+      type: Boolean,
+      required: !1,
+      default: !1
+    },
+    fullwidth: {
+      type: Boolean,
+      default: !1
+    },
+    ariaLabelledby: {
+      type: String,
+      required: !1
+    },
+    ariaDescribedby: {
+      type: String,
+      required: !1
+    },
+    useWrapper: {
+      type: Boolean,
+      default: !0
+    },
+    omitSearchIcon: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: ["update:modelValue"],
+  computed: {
+    labelledBy() {
+      this.ariaLabelledby || `${this.id}`;
+    },
+    shouldShowSearchIcon() {
+      return this.type === "search" && !this.iconNameRight && !this.omitSearchIcon;
+    }
+  }
+}, _ = { class: "pkt-input__container" }, B = {
+  key: 0,
+  class: "pkt-input-prefix"
+}, w = ["type", "name", "id", "placeholder", "autocomplete", "value", "disabled", "aria-invalid", "aria-errormessage", "aria-labelledby"], D = {
+  key: 1,
+  class: "pkt-input-suffix"
+};
+function I(a, i, e, N, E, n) {
+  const l = u("pkt-icon"), c = u("PktInputWrapper");
+  return t(), r(c, {
+    class: "pkt-textinput",
+    forId: e.id,
+    label: e.label,
+    helptext: e.helptext,
+    helptextDropdown: e.helptextDropdown,
+    helptextDropdownButton: e.helptextDropdownButton,
+    optionalTag: e.optionalTag,
+    optionalText: e.optionalText,
+    requiredTag: e.requiredTag,
+    requiredText: e.requiredText,
+    hasError: e.hasError,
+    errorMessage: e.errorMessage,
+    disabled: e.disabled,
+    inline: e.inline,
+    ariaDescribedby: e.ariaDescribedby,
+    useWrapper: e.useWrapper,
+    onToggleHelpText: i[1] || (i[1] = (d) => a.$emit("toggleHelpText"))
+  }, {
+    default: y(() => [
+      s("div", _, [
+        e.prefix ? (t(), f("div", B, p(e.prefix), 1)) : o("", !0),
+        s("input", x(a.$attrs, {
+          onInput: i[0] || (i[0] = (d) => a.$emit("update:modelValue", d.target.value)),
+          class: {
+            "pkt-input": !0,
+            "pkt-input--fullwidth": e.fullwidth
+          },
+          type: e.type,
+          name: e.name || e.id,
+          id: e.id,
+          placeholder: e.placeholder,
+          autocomplete: e.autocomplete,
+          value: e.modelValue,
+          disabled: e.disabled,
+          "aria-invalid": e.hasError,
+          "aria-errormessage": e.hasError ? `${e.id}-error` : "",
+          "aria-labelledby": n.labelledBy,
+          ref: "input"
+        }), null, 16, w),
+        e.suffix ? (t(), f("p", D, [
+          b(p(e.suffix) + " ", 1),
+          e.iconNameRight ? (t(), r(l, {
+            key: 0,
+            class: "pkt-input-suffix-icon",
+            name: e.iconNameRight
+          }, null, 8, ["name"])) : n.shouldShowSearchIcon ? (t(), r(l, {
+            key: 1,
+            class: "pkt-input-suffix-icon",
+            name: "magnifying-glass-big"
+          })) : o("", !0)
+        ])) : e.iconNameRight ? (t(), r(l, {
+          key: 2,
+          class: "pkt-input-icon",
+          name: e.iconNameRight
+        }, null, 8, ["name"])) : n.shouldShowSearchIcon ? (t(), r(l, {
+          key: 3,
+          class: "pkt-input-icon",
+          name: "magnifying-glass-big"
+        })) : o("", !0)
+      ])
+    ]),
+    _: 1
+  }, 8, ["forId", "label", "helptext", "helptextDropdown", "helptextDropdownButton", "optionalTag", "optionalText", "requiredTag", "requiredText", "hasError", "errorMessage", "disabled", "inline", "ariaDescribedby", "useWrapper"]);
+}
+const P = /* @__PURE__ */ q(T, [["render", I]]), v = {
+  install(a) {
+    S(a, P);
+  }
+};
+k(v);
+export {
+  P as PktTextinput,
+  v as default
+};

package/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "@oslokommune/punkt-vue",
+  "version": "9.6.0",
+  "description": "Vue komponentbibliotek til Punkt, et designsystem laget av Oslo Origo",
+  "homepage": "https://punkt.oslo.kommune.no",
+  "author": "Team Designsystem, Oslo Origo",
+  "type": "module",
+  "files": [
+    "dist",
+    "src/components/**/*.vue",
+    "CHANGELOG.md",
+    "CONTRIBUTING.md"
+  ],
+  "main": "./dist/punkt-vue-index.cjs",
+  "module": "./dist/punkt-vue-index.js",
+  "exports": {
+    ".": {
+      "import": "./dist/punkt-vue-index.js",
+      "require": "./dist/punkt-vue-index.cjs"
+    }
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "build-app": "vite build --config vite.config-app.js",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "@oslokommune/punkt-assets": "^9.5.3",
+    "@oslokommune/punkt-css": "^9.5.4",
+    "@vitejs/plugin-vue": "^4.5.2",
+    "edit-json-file": "^1.7.0",
+    "sass": "^1.69.5",
+    "vite": "^5.0.7",
+    "vue": "^3.3.11",
+    "vue-router": "^4.2.5"
+  },
+  "peerDependencies": {
+    "@oslokommune/punkt-assets": ">=3.1.0",
+    "@oslokommune/punkt-css": ">=3.1.0",
+    "vue": ">=3.0.0"
+  },
+  "engines": {
+    "node": ">=16.0.0"
+  },
+  "private": false,
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  },
+  "keywords": [
+    "punkt",
+    "designsystem",
+    "vue",
+    "vuejs",
+    "components",
+    "ux",
+    "ui"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/oslokommune/punkt.git"
+  },
+  "bugs": {
+    "url": "https://github.com/oslokommune/punkt/issues"
+  },
+  "license": "MIT",
+  "gitHead": "30156fe2bc2360008e3816798a6b26f1affac54e"
+}

package/src/components/alert/Alert.vue

@@ -0,0 +1,89 @@
+<template>
+  <div :class="{ 'pkt-alert': true, [skinClass]: true, 'pkt-alert--slim': slim }" v-show="open" :aria-live="ariaLive">
+    <pkt-icon :name="iconName" class="pkt-alert__icon"></pkt-icon>
+
+    <div class="pkt-alert__close" v-if="closeAlert">
+      <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"
+      >
+        <pkt-icon class="pkt-btn__icon" name="close"></pkt-icon>
+      </button>
+    </div>
+
+    <div class="pkt-alert__title" v-if="title">
+      {{ title }}
+    </div>
+
+    <div class="pkt-alert__text"><slot /></div>
+
+    <div class="pkt-alert__date" v-if="date">Sist oppdatert: {{ date }}</div>
+  </div>
+</template>
+
+<script>
+import PktIcon from '../icon/Icon.vue'
+export default {
+  name: 'PktAlert',
+  components: {
+    PktIcon,
+  },
+  props: {
+    skin: {
+      type: String,
+      default: 'info',
+      validator(value) {
+        return ['error', 'success', 'warning', 'info'].includes(value)
+      },
+    },
+    closeAlert: {
+      type: Boolean,
+      default: false,
+    },
+    title: {
+      type: String,
+      default: '',
+    },
+    date: {
+      type: String,
+      default: '',
+    },
+    ariaLive: {
+      type: String,
+      default: 'polite',
+      validator(value) {
+        return ['off', 'polite', 'assertive'].includes(value)
+      },
+    },
+    slim: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data: () => ({
+    closed: false,
+  }),
+  methods: {
+    close() {
+      this.closed = true
+      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}`
+    },
+  },
+}
+</script>

package/src/components/backlink/BackLink.vue

@@ -0,0 +1,40 @@
+<template>
+  <nav class="pkt-back-link" aria-label="Gå tilbake et steg">
+    <a v-if="href.startsWith('http') || href.startsWith('mailto')" :href="href" class="pkt-link pkt-link--icon-left">
+      <pkt-icon class="pkt-back-link__icon pkt-icon pkt-link__icon" name="chevron-thin-left"></pkt-icon>
+      <span class="pkt-back-link__text">
+        <slot>{{ text }}</slot>
+      </span>
+    </a>
+    <router-link v-else :to="href" class="pkt-link pkt-link--icon-left">
+      <pkt-icon class="pkt-back-link__icon pkt-icon pkt-link__icon" name="chevron-thin-left"></pkt-icon>
+      <span class="pkt-back-link__text">
+        <slot>{{ text }}</slot>
+      </span>
+    </router-link>
+  </nav>
+</template>
+
+<script>
+import PktIcon from '../icon/Icon.vue'
+
+export default {
+  name: 'PktBackLink',
+  components: {
+    PktIcon,
+  },
+  props: {
+    // Text will get overwritten by "slot" if we have any DOM children in the button element
+    text: {
+      type: String,
+      required: false,
+      default: 'oslo.kommune.no',
+    },
+    href: {
+      type: String,
+      required: false,
+      default: 'https://www.oslo.kommune.no',
+    },
+  },
+}
+</script>

package/src/components/breadcrumbs/Breadcrumbs.vue

@@ -0,0 +1,79 @@
+<template>
+  <nav aria-label="brødsmulemeny" class="pkt-breadcrumbs">
+    <ol class="pkt-breadcrumbs__list pkt-breadcrumbs--desktop">
+      <li v-for="(item, index) in displayedBreadcrumbs" :key="`breadcrumb-${index}`" class="pkt-breadcrumbs__item">
+        <!-- Last item(Current) is not a link -->
+        <span v-if="index === displayedBreadcrumbs.length - 1" class="pkt-breadcrumbs__label" aria-current="true">
+          <span class="pkt-breadcrumbs__text">{{ item.text }}</span>
+        </span>
+
+        <!-- Regular breadcrumb link -->
+        <template v-else>
+          <component
+            :is="linkElement"
+            :to="navigationType === 'router' ? item.href : null"
+            :href="navigationType === 'anchor' ? item.href : null"
+            class="pkt-link pkt-link--icon-right pkt-breadcrumbs__label pkt-breadcrumbs__link"
+          >
+            <pkt-icon class="pkt-icon pkt-breadcrumbs__icon pkt-link__icon" name="chevron-thin-right"></pkt-icon>
+
+            <span class="pkt-breadcrumbs__text">{{ item.text }}</span>
+          </component>
+        </template>
+      </li>
+    </ol>
+
+    <!-- Mobile backlink - show second last item in array -->
+    <template>
+      <component
+        :is="linkElement"
+        :to="navigationType === 'router' ? backLink.href : null"
+        :href="navigationType === 'anchor' ? backLink.href : null"
+        class="pkt-link pkt-link--icon-left pkt-breadcrumbs--mobile"
+      >
+        <pkt-icon class="pkt-back-link__icon pkt-icon pkt-link__icon" name="chevron-thin-left"></pkt-icon>
+
+        <span class="pkt-breadcrumbs__text">{{ backLink.text }}</span>
+      </component>
+    </template>
+  </nav>
+</template>
+
+<script>
+import PktIcon from '../icon/Icon.vue'
+
+export default {
+  name: 'PktBreadcrumbs',
+  components: {
+    PktIcon,
+  },
+  props: {
+    breadcrumbs: {
+      type: Array,
+      required: true,
+      default: () => [],
+    },
+    navigationType: {
+      type: String,
+      default: 'anchor',
+      validator: (value) => ['router', 'anchor'].includes(value),
+    },
+  },
+  computed: {
+    linkElement() {
+      if (this.navigationType === 'router') {
+        return 'router-link'
+      } else {
+        return 'a'
+      }
+    },
+    backLink() {
+      return this.displayedBreadcrumbs[this.displayedBreadcrumbs.length - 2]
+    },
+    // Max 4 breadcrumbs
+    displayedBreadcrumbs() {
+      return this.breadcrumbs.slice(0, 4)
+    },
+  },
+}
+</script>

package/src/components/button/Button.vue

@@ -0,0 +1,104 @@
+<template>
+  <button
+    v-bind="$attrs"
+    :type="type"
+    :class="classes"
+    @click="$emit('onClick')"
+    @keyup.enter="$emit('onClick')"
+    :disabled="disabled"
+  >
+    <pkt-icon v-if="variant !== 'label-only'" class="pkt-btn__icon" :name="iconName"></pkt-icon>
+    <span class="pkt-btn__text">
+      <slot>{{ text }}</slot>
+    </span>
+    <pkt-icon v-if="variant === 'icons-right-and-left'" class="pkt-btn__icon" :name="secondIconName"></pkt-icon>
+  </button>
+</template>
+<script>
+import PktIcon from '../icon/Icon.vue'
+export default {
+  name: 'PktButton',
+  components: {
+    PktIcon,
+  },
+  props: {
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    iconName: {
+      type: String,
+      required: false,
+      default: 'user',
+    },
+    secondIconName: {
+      type: String,
+      required: false,
+      default: 'user',
+    },
+    size: {
+      type: String,
+      default: 'medium',
+      validator: (value) => ['small', 'medium', 'large'].includes(value),
+    },
+    skin: {
+      type: String,
+      default: 'primary',
+      validator: (value) => ['primary', 'secondary', 'tertiary'].includes(value),
+    },
+    color: {
+      type: String,
+      validator: (value) =>
+        [
+          'blue',
+          'blue-outline',
+          'green',
+          'green-outline',
+          'green-dark',
+          'green-dark-outline',
+          'beige-light',
+          'beige-dark-outline',
+          'yellow',
+          'yellow-outline',
+          'red',
+          'red-outline',
+        ].includes(value),
+    },
+    // Text will get overwritten by "slot" if we have any DOM children in the button element
+    text: {
+      type: String,
+      required: false,
+      default: 'Trykk her',
+    },
+    variant: {
+      type: String,
+      default: 'label-only',
+      validator: (value) =>
+        ['label-only', 'icon-left', 'icon-right', 'icon-only', 'icons-right-and-left'].includes(value),
+    },
+    type: {
+      type: String,
+      default: 'button',
+      validator: (value) => ['button', 'submit', 'reset'].includes(value),
+    },
+  },
+  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}` : ''
+    },
+  },
+}
+</script>

package/src/components/checkbox/Checkbox.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="pkt-input-check">
+    <div :class="[{ 'pkt-input-check__input--tile': hasTile }, 'pkt-input-check__input']">
+      <input
+        v-bind="$attrs"
+        class="pkt-input-check__input-checkbox"
+        :class="{ 'pkt-input-check__input-checkbox--error': hasError }"
+        type="checkbox"
+        :id="id"
+        :checked="computedChecked || defaultChecked"
+        @change="handleChange"
+        :disabled="disabled"
+      />
+      <label class="pkt-input-check__input-label" :for="id"
+        >{{ label }}
+        <div v-if="checkHelptext" class="pkt-input-check__input-helptext">
+          {{ checkHelptext }}
+        </div></label
+      >
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'PktCheckbox',
+  props: {
+    id: {
+      type: String,
+      required: true,
+    },
+    defaultChecked: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    modelValue: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    hasTile: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    label: {
+      type: String,
+      required: false,
+    },
+    checkHelptext: {
+      type: String,
+      required: false,
+    },
+    hasError: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  emits: ['update:modelValue', 'onChange'],
+  computed: {
+    computedChecked: {
+      get() {
+        return this.modelValue
+      },
+      set(newValue) {
+        this.$emit('update:modelValue', newValue)
+        this.$emit('onChange', newValue)
+      },
+    },
+  },
+  methods: {
+    handleChange(event) {
+      this.computedChecked = event.target.checked
+    },
+  },
+}
+</script>