@oslokommune/punkt-vue 9.6.0

package/src/components/tag/Tag.vue

@@ -0,0 +1,129 @@
+<template>
+  <span>
+    <template v-if="closeTag && iconName">
+      <button
+        v-show="open"
+        :class="[buttonClass, skinClass, sizeClass, textStyleClass]"
+        :type="type"
+        role="button"
+        :aria-label="ariaLabel"
+        @keyup.enter="close"
+        @click="close"
+      >
+        <pkt-icon class="pkt-tag__icon" :name="iconName"></pkt-icon>
+        <slot></slot>
+        <pkt-icon class="pkt-tag__close-btn" name="close"></pkt-icon>
+      </button>
+    </template>
+
+    <template v-else-if="closeTag">
+      <button
+        v-show="open"
+        :class="[buttonClass, skinClass, sizeClass, textStyleClass]"
+        :type="type"
+        role="button"
+        :aria-label="ariaLabel"
+        @keyup.enter="close"
+        @click="close"
+      >
+        <pkt-icon class="pkt-tag__close-btn" name="close"></pkt-icon>
+        <slot></slot>
+      </button>
+    </template>
+
+    <template v-else-if="iconName">
+      <span class="pkt-tag" :class="[skinClass, sizeClass, textStyleClass]"
+        ><pkt-icon class="pkt-tag__icon" :name="iconName"></pkt-icon>
+        <slot></slot>
+      </span>
+    </template>
+
+    <template v-else>
+      <span class="pkt-tag" :class="[skinClass, sizeClass, textStyleClass]">
+        <slot></slot>
+      </span>
+    </template>
+  </span>
+</template>
+<script>
+import PktIcon from '../icon/Icon.vue'
+
+export default {
+  name: 'PktTag',
+  components: { PktIcon },
+  props: {
+    skin: {
+      type: String,
+      default: 'blue',
+      validator(value) {
+        return ['blue', 'green', 'red', 'beige', 'yellow', 'grey', 'blue-light'].includes(value)
+      },
+    },
+    textStyle: {
+      type: String,
+      default: 'normal-text',
+      validator(value) {
+        return ['thin-text', 'normal-text'].includes(value)
+      },
+    },
+    size: {
+      type: String,
+      default: 'medium',
+      validator(value) {
+        return ['small', 'medium', 'large'].includes(value)
+      },
+    },
+    closeTag: {
+      type: Boolean,
+      default: false,
+    },
+    iconName: {
+      type: String,
+      default: '',
+    },
+    type: {
+      type: String,
+      default: 'button',
+      validator: (value) => ['button', 'submit', 'reset'].includes(value),
+    },
+    ariaLabel: {
+      type: String,
+      default: 'close',
+    },
+  },
+  data: () => ({
+    closed: false,
+  }),
+  methods: {
+    close() {
+      this.closed = true
+      this.$emit('on-close', this.closed)
+    },
+  },
+  computed: {
+    skinClass() {
+      return [`pkt-tag--${this.skin}`]
+    },
+    sizeClass() {
+      return [`pkt-tag--${this.size}`]
+    },
+    textStyleClass() {
+      return [`pkt-tag--${this.textStyle}`]
+    },
+    buttonClass() {
+      return [
+        'pkt-tag',
+        'pkt-btn',
+        'pkt-btn--tertiary',
+        {
+          'pkt-btn--icons-right-and-left': this.iconName && this.closeTag,
+          'pkt-btn--icon-right': this.closeTag && !this.iconName,
+        },
+      ]
+    },
+    open() {
+      return !this.closed
+    },
+  },
+}
+</script>

package/src/components/textarea/Textarea.vue

@@ -0,0 +1,160 @@
+<template>
+  <PktInputWrapper
+    class="pkt-textarea"
+    :forId="id"
+    :label="label"
+    :helptext="helptext"
+    :helptextDropdown="helptextDropdown"
+    :helptextDropdownButton="helptextDropdownButton"
+    :optionalTag="optionalTag"
+    :optionalText="optionalText"
+    :requiredTag="requiredTag"
+    :requiredText="requiredText"
+    :hasError="hasError"
+    :errorMessage="errorMessage"
+    :disabled="disabled"
+    :inline="inline"
+    :ariaDescribedby="ariaDescribedby"
+    :useWrapper="useWrapper"
+    @toggleHelpText="$emit('toggleHelpText')"
+  >
+    <textarea
+      v-bind="$attrs"
+      @input="$emit('update:modelValue', $event.target.value)"
+      :class="{
+        'pkt-input': true,
+        'pkt-input--fullwidth': fullwidth,
+        'pkt-input--counter-error': counterMaxLength && modelValue?.length > counterMaxLength,
+      }"
+      :aria-invalid="hasError"
+      :aria-errormessage="hasError ? `${id}-error` : ''"
+      :aria-labelledby="labelledBy"
+      :disabled="disabled"
+      :id="id"
+      :name="name || id"
+      :placeholder="placeholder"
+      :rows="rows"
+      :value="modelValue"
+    />
+    <div v-if="counter" class="pkt-input__counter" aria-live="polite" aria-atomic="true">
+      {{ modelValue?.length || 0 }}<template v-if="counterMaxLength">/{{ counterMaxLength }}</template>
+    </div>
+  </PktInputWrapper>
+</template>
+
+<script>
+import PktIcon from '../icon/Icon.vue'
+import PktAlert from '../alert/Alert.vue'
+import PktButton from '../button/Button.vue'
+import PktInputWrapper from '../inputwrapper/InputWrapper.vue'
+
+export default {
+  name: 'PktTextarea',
+  components: { PktIcon, PktAlert, PktButton, PktInputWrapper },
+  props: {
+    label: {
+      type: String,
+      required: true,
+      default: 'input',
+    },
+    helptext: {
+      type: String,
+      required: false,
+    },
+    helptextDropdown: {
+      type: String,
+      required: false,
+    },
+    helptextDropdownButton: {
+      type: String,
+      required: false,
+    },
+    optionalTag: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    optionalText: {
+      type: String,
+      required: false,
+    },
+    requiredTag: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    requiredText: {
+      type: String,
+      required: false,
+    },
+    hasError: {
+      type: Boolean,
+      required: false,
+    },
+    errorMessage: {
+      type: String,
+      required: false,
+    },
+    name: {
+      type: String,
+      required: false,
+    },
+    id: {
+      type: String,
+      required: true,
+    },
+    placeholder: {
+      type: String,
+      required: false,
+    },
+    modelValue: {
+      type: String,
+      required: false,
+    },
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    inline: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    fullwidth: {
+      type: Boolean,
+      default: false,
+    },
+    ariaLabelledby: {
+      type: String,
+      required: false,
+    },
+    ariaDescribedby: {
+      type: String,
+      required: false,
+    },
+    counter: {
+      type: Boolean,
+      default: false,
+    },
+    counterMaxLength: {
+      type: Number,
+      required: false,
+    },
+    rows: {
+      type: Number,
+      required: false,
+    },
+    useWrapper: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  emits: ['update:modelValue'],
+  computed: {
+    labelledBy() {
+      this.ariaLabelledby || `${this.id}-label`
+    },
+  },
+}
+</script>

package/src/components/textinput/Textinput.vue

@@ -0,0 +1,185 @@
+<template>
+  <PktInputWrapper
+    class="pkt-textinput"
+    :forId="id"
+    :label="label"
+    :helptext="helptext"
+    :helptextDropdown="helptextDropdown"
+    :helptextDropdownButton="helptextDropdownButton"
+    :optionalTag="optionalTag"
+    :optionalText="optionalText"
+    :requiredTag="requiredTag"
+    :requiredText="requiredText"
+    :hasError="hasError"
+    :errorMessage="errorMessage"
+    :disabled="disabled"
+    :inline="inline"
+    :ariaDescribedby="ariaDescribedby"
+    :useWrapper="useWrapper"
+    @toggleHelpText="$emit('toggleHelpText')"
+  >
+    <div class="pkt-input__container">
+      <div v-if="prefix" class="pkt-input-prefix">{{ prefix }}</div>
+      <input
+        v-bind="$attrs"
+        @input="$emit('update:modelValue', $event.target.value)"
+        :class="{
+          'pkt-input': true,
+          'pkt-input--fullwidth': fullwidth,
+        }"
+        :type="type"
+        :name="name || id"
+        :id="id"
+        :placeholder="placeholder"
+        :autocomplete="autocomplete"
+        :value="modelValue"
+        :disabled="disabled"
+        :aria-invalid="hasError"
+        :aria-errormessage="hasError ? `${id}-error` : ''"
+        :aria-labelledby="labelledBy"
+        ref="input"
+      />
+      <p v-if="suffix" class="pkt-input-suffix">
+        {{ suffix }}
+        <pkt-icon v-if="iconNameRight" class="pkt-input-suffix-icon" :name="iconNameRight" />
+        <pkt-icon v-else-if="shouldShowSearchIcon" class="pkt-input-suffix-icon" name="magnifying-glass-big" />
+      </p>
+      <pkt-icon v-else-if="iconNameRight" class="pkt-input-icon" :name="iconNameRight" />
+      <pkt-icon v-else-if="shouldShowSearchIcon" class="pkt-input-icon" name="magnifying-glass-big" />
+    </div>
+  </PktInputWrapper>
+</template>
+
+<script>
+import PktIcon from '../icon/Icon.vue'
+import PktAlert from '../alert/Alert.vue'
+import PktInputWrapper from '../inputwrapper/InputWrapper.vue'
+
+export default {
+  name: 'PktTextinput',
+  components: { PktIcon, PktAlert, PktInputWrapper },
+  inheritAttrs: false,
+  props: {
+    label: {
+      type: String,
+      required: true,
+      default: 'input',
+    },
+    helptext: {
+      type: String,
+      required: false,
+    },
+    helptextDropdown: {
+      type: String,
+      required: false,
+    },
+    helptextDropdownButton: {
+      type: String,
+      required: false,
+    },
+    optionalTag: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    optionalText: {
+      type: String,
+      required: false,
+    },
+    requiredTag: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    requiredText: {
+      type: String,
+      required: false,
+    },
+    hasError: {
+      type: Boolean,
+      required: false,
+    },
+    errorMessage: {
+      type: String,
+      required: false,
+    },
+    name: {
+      type: String,
+      required: false,
+    },
+    id: {
+      type: String,
+      required: true,
+    },
+    placeholder: {
+      type: String,
+      required: false,
+    },
+    type: {
+      type: String,
+      required: false,
+      default: 'text',
+    },
+    autocomplete: {
+      type: String,
+      required: false,
+      default: 'off',
+    },
+    modelValue: {
+      type: String,
+      required: false,
+    },
+    suffix: {
+      type: String,
+      required: false,
+    },
+    prefix: {
+      type: String,
+      required: false,
+    },
+    iconNameRight: {
+      type: String,
+      required: false,
+    },
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    inline: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    fullwidth: {
+      type: Boolean,
+      default: false,
+    },
+    ariaLabelledby: {
+      type: String,
+      required: false,
+    },
+    ariaDescribedby: {
+      type: String,
+      required: false,
+    },
+    useWrapper: {
+      type: Boolean,
+      default: true,
+    },
+    omitSearchIcon: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ['update:modelValue'],
+  computed: {
+    labelledBy() {
+      this.ariaLabelledby || `${this.id}-label`
+    },
+    shouldShowSearchIcon() {
+      return this.type === 'search' && !this.iconNameRight && !this.omitSearchIcon
+    },
+  },
+}
+</script>