@mirweb/mir-web-components 1.15.3 → 2.0.0

package/dist/components/atoms/checkbox/checkbox.vue

@@ -0,0 +1,125 @@
+<template>
+  <div class="checkbox__wrapper" :class="disabled ? 'disabled' : ''">
+    <input
+      :id="id"
+      type="checkbox"
+      :name="name"
+      :value="value"
+      :disabled="disabled"
+      :required="required"
+      :checked="checked"
+      class="checkbox__checkbox"
+      @change="onChange"
+    />
+    <label
+      :for="id"
+      class="checkbox__label"
+      :class="required ? 'required' : ''"
+    >
+      <span class="checkmark"></span>
+      <slot></slot>
+    </label>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const emit = defineEmits(["input"]);
+const onChange = (event: Event) => {
+  const target = event.target as HTMLInputElement;
+  emit("input", target.checked);
+};
+
+export type Props = {
+  name: string;
+  value: string | number | boolean;
+  disabled: boolean;
+  id: string;
+  required: boolean;
+  checked?: boolean;
+};
+
+withDefaults(defineProps<Props>(), {
+  name: "checkbox",
+  value: "value",
+  disabled: false,
+  id: "checkbox",
+  required: false,
+  checked: false,
+});
+</script>
+
+<style lang="scss" scoped>
+@use "../../../assets/scss/variables.scss" as *;
+.checkbox {
+  &__checkbox {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+    height: 0;
+    width: 0;
+
+    &:checked ~ .checkbox__label .checkmark {
+      background-color: $blue-800;
+      border-color: $grey-400;
+    }
+    &:focus ~ .checkbox__label .checkmark {
+      box-shadow: $box-shadow;
+    }
+  }
+
+  &__label {
+    position: relative;
+    padding-left: 30px;
+    cursor: pointer;
+    font-size: $font-size-xsm;
+    font-family: $font-opensans;
+    font-weight: 300;
+    line-height: $line-height-xsm;
+    user-select: none;
+    display: block;
+
+    .checkmark {
+      position: absolute;
+      top: 0;
+      left: 0;
+      height: 20px;
+      width: 20px;
+      background-color: $white;
+      border-radius: 5px;
+      border: 1px solid $grey-400;
+
+      &:after {
+        content: "";
+        position: absolute;
+        display: none;
+        left: 6px;
+        top: 2px;
+        width: 6px;
+        height: 12px;
+        border: solid $white;
+        border-width: 0 2px 2px 0;
+        transform: rotate(45deg);
+      }
+      &:hover {
+        box-shadow: $box-shadow;
+      }
+    }
+  }
+}
+
+.checkbox__checkbox:checked ~ .checkbox__label .checkmark:after {
+  display: block;
+}
+
+.disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.required {
+  &:after {
+    content: "\00a0*";
+    display: inline-block;
+  }
+}
+</style>

package/dist/components/atoms/chip/chip.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="chip__wrapper" @click="$emit('remove-chip')">
+    <span class="chip" :aria-label="ariaLabel">
+      {{ text }}
+      <img
+        src="https://a.storyblok.com/f/230581/9x9/e4fb715dc9/close.svg?cv=1695125714598"
+        alt="close"
+        class="close-icon"
+      />
+    </span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+
+export type Props = {
+  text: string;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  text: "",
+});
+
+defineEmits(["remove-chip"]);
+const ariaLabel = computed(() => `Chip: ${props.text}`);
+</script>
+
+<style lang="scss" scoped>
+@use "../../../assets/scss/variables.scss" as *;
+.chip {
+  display: inline-flex;
+  align-items: center;
+  height: 27px;
+  padding: 0px 10px;
+  background-color: $blue-300;
+  font-size: $font-size-xxsm;
+  line-height: $line-height-md;
+  color: $blue-900;
+  font-family: $font-opensans;
+  border-radius: 3px;
+  cursor: pointer;
+
+  .close-icon {
+    margin-left: 10px;
+
+    color: $blue-900;
+  }
+  &:hover,
+  &:focus {
+    box-shadow: $box-shadow;
+    transition: $transition-box-shadow;
+  }
+}
+</style>

package/dist/components/atoms/dropdown/dropdown.vue

@@ -0,0 +1,490 @@
+<template>
+  <div ref="listbox" class="listbox__wrapper" :value="modelValue">
+    <label
+      :id="`${name}-label`"
+      :class="{
+        'listbox__label--visually-hidden': !showLabel,
+        'is-disabled': disabled,
+        'is-required': required,
+      }"
+      class="listbox__label"
+    >
+      {{ label }}
+    </label>
+    <div v-click-outside="hideListbox" class="listbox__dropdown">
+      <button
+        :id="`${name}-button-label`"
+        ref="listboxButton"
+        :aria-labelledby="`${name}-label ${name}-button-label`"
+        type="button"
+        aria-haspopup="listbox"
+        :aria-disabled="disabled"
+        class="listbox__button"
+        :class="selectedVariant"
+        @click="toggleListbox"
+        @keydown="checkShow"
+      >
+        {{ modelValue ? selectedOptionLabel : placeholder }}
+      </button>
+      <ul
+        v-show="!listboxHidden"
+        ref="listboxNode"
+        :aria-labelledby="`${name}-label`"
+        :aria-activedescendant="modelValue"
+        tabindex="0"
+        role="listbox"
+        class="listbox__list"
+        @keydown="checkKeyDown"
+        @click="checkClickItem"
+      >
+        <li
+          v-for="(option, index) in options"
+          :key="`${name}-option-${index}`"
+          ref="listboxOptions"
+          :aria-selected="option.value === modelValue"
+          :data-value="option.value"
+          class="listbox__option"
+          role="option"
+        >
+          {{ option.label }}
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed } from "vue";
+import { vClickOutside } from "../../../directives/clickOutside";
+
+interface OptionType {
+  value: string;
+  label: string;
+}
+
+const VARIANTS = {
+  primary: "dropdown-dark-bg-primary",
+  dark: "dropdown-dark dropdown-dark-bg-dark",
+} as const;
+
+type Variant = keyof typeof VARIANTS;
+
+export type Props = {
+  modelValue: string;
+  label: string;
+  options: Array<OptionType>;
+  name: string;
+  placeholder?: string;
+  showLabel?: boolean;
+  required?: boolean;
+  disabled?: boolean;
+  variant?: Variant;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  placeholder: "Choose a value",
+  showLabel: false,
+  required: false,
+  disabled: false,
+  variant: "primary",
+});
+
+const selectedVariant = computed(() => VARIANTS[props.variant]);
+
+const listboxButton = ref<HTMLButtonElement | null>(null);
+const listboxNode = ref<HTMLUListElement | null>(null);
+const listboxOptions = ref<HTMLOptionElement[]>([]);
+const keyClear = ref(0);
+const keysSoFar = ref("");
+const listboxHidden = ref(true);
+const searchIndex = ref(0);
+
+const emit = defineEmits(["update:modelValue"]);
+
+// Computed property for label of the selected option
+const selectedOptionLabel = computed(() => {
+  const selectedOption = props.options.find(
+    (option: OptionType) => option.value === props.modelValue,
+  );
+  return selectedOption && selectedOption.label;
+});
+
+// Method to update the selected value
+function updateValue(value: string) {
+  emit("update:modelValue", value);
+}
+
+// Method to check if clicked item is an option and handle it accordingly
+function checkClickItem(event: Event) {
+  const target = event.target as HTMLOptionElement;
+  if (target.getAttribute("role") === "option") {
+    focusItem(target);
+    hideListbox();
+    listboxButton.value?.focus();
+  }
+}
+
+// Method to handle keydown events when listbox is shown
+function checkKeyDown(event: KeyboardEvent) {
+  const key = event.key;
+
+  switch (key) {
+    case "ArrowUp":
+    case "ArrowDown": {
+      event.preventDefault();
+      const selectedItemIndex = props.options.findIndex(
+        (option) => option.value === props.modelValue,
+      );
+      let nextItem = selectedItemIndex
+        ? listboxOptions.value[selectedItemIndex]
+        : listboxOptions.value[0];
+
+      if (key === "ArrowUp") {
+        if (selectedItemIndex - 1 >= 0) {
+          nextItem = listboxOptions.value[selectedItemIndex - 1];
+        }
+      } else {
+        if (selectedItemIndex + 1 <= props.options.length) {
+          nextItem = listboxOptions.value[selectedItemIndex + 1];
+        }
+      }
+
+      if (nextItem) {
+        focusItem(nextItem);
+      }
+
+      break;
+    }
+    case "Home":
+    case "PageUp":
+      event.preventDefault();
+      focusFirstItem();
+      break;
+    case "End":
+    case "PageDown":
+      event.preventDefault();
+      focusLastItem();
+      break;
+    case "Enter":
+    case "Escape":
+      event.preventDefault();
+      hideListbox();
+      listboxButton.value?.focus();
+      break;
+    default: {
+      const itemToFocus = findItemToFocus(key);
+      if (itemToFocus) {
+        focusItem(itemToFocus);
+      }
+      break;
+    }
+  }
+}
+
+// Method to handle keydown events to show listbox
+function checkShow(event: KeyboardEvent) {
+  if (!props.disabled) {
+    const key = event.key;
+
+    switch (key) {
+      case "ArrowUp":
+      case "ArrowDown":
+        event.preventDefault();
+        showListbox();
+        checkKeyDown(event);
+        break;
+      default:
+        break;
+    }
+  }
+}
+
+// Method to remove focus from item
+function defocusItem(element: HTMLOptionElement) {
+  if (!element) {
+    return;
+  }
+  element.removeAttribute("aria-selected");
+}
+
+// Method to clear keysSoFar after 500ms
+function clearKeysSoFarAfterDelay() {
+  if (keyClear.value) {
+    clearTimeout(keyClear.value);
+    keyClear.value = 0;
+  }
+  keyClear.value = setTimeout(() => {
+    keysSoFar.value = "";
+    keyClear.value = 0;
+  }, 500);
+}
+
+// Method to search for item to focus based on keys pressed
+function findItemToFocus(key: string) {
+  let lastKeyPressed = "";
+
+  // Reset search index if first key press or different key
+  if (keysSoFar.value === "" || lastKeyPressed !== key) {
+    searchIndex.value = props.options.findIndex(
+      (option) => option.value === props.modelValue,
+    );
+  }
+
+  // Keep or append key to keysSoFar based on last key press
+  keysSoFar.value = lastKeyPressed === key ? key : keysSoFar.value + key;
+
+  lastKeyPressed = key;
+
+  clearKeysSoFarAfterDelay();
+
+  // Find next match from search index onwards
+  let nextMatch = findMatchInOptions(
+    searchIndex.value + 1,
+    props.options.length,
+  );
+
+  // If no match, search from start to current search index
+  if (!nextMatch && keysSoFar.value.length === 1) {
+    nextMatch = findMatchInOptions(0, searchIndex.value);
+  }
+
+  // Cycle searchIndex with each key press
+  searchIndex.value = (searchIndex.value + 1) % props.options.length;
+
+  return nextMatch;
+}
+
+// Method to find match in options between start and end index
+function findMatchInOptions(startIndex: number, endIndex: number) {
+  for (let i = startIndex; i < endIndex; i++) {
+    if (
+      props.options[i].label &&
+      props.options[i].label
+        .toUpperCase()
+        .indexOf(keysSoFar.value.toUpperCase()) === 0
+    ) {
+      return listboxOptions.value[i];
+    }
+  }
+  return null;
+}
+
+// Method to focus on the first item in listbox
+function focusFirstItem() {
+  focusItem(listboxOptions.value[0]);
+}
+
+// Method to set focus on given item
+function focusItem(element: HTMLOptionElement) {
+  const dataValue = element.getAttribute("data-value");
+
+  // Defocus active element
+  if (props.modelValue) {
+    const index = props.options.findIndex(
+      (option) => option.value === props.modelValue,
+    );
+    const listboxOption = listboxOptions.value[index];
+    defocusItem(listboxOption);
+  }
+  element.setAttribute("aria-selected", "true");
+  listboxNode.value?.setAttribute(
+    "aria-activedescendant",
+    dataValue ? dataValue : "",
+  );
+  // Trigger the v-model "input" event to update the modelValue
+  updateValue(dataValue ? dataValue : "");
+
+  // Scroll up/down to show the listbox within the viewport
+  if (listboxNode.value) {
+    if (listboxNode.value.scrollHeight > listboxNode.value.clientHeight) {
+      const scrollBottom =
+        listboxNode.value.clientHeight + listboxNode.value.scrollTop;
+      const elementBottom = element.offsetTop + element.offsetHeight;
+
+      if (elementBottom > scrollBottom) {
+        listboxNode.value.scrollTop =
+          elementBottom - listboxNode.value?.clientHeight;
+      } else if (element.offsetTop < listboxNode.value.scrollTop) {
+        listboxNode.value.scrollTop = element.offsetTop;
+      }
+    }
+  }
+}
+
+// Method to focus on the last item in listbox
+function focusLastItem() {
+  const lastListboxOption = listboxOptions.value?.[props.options.length - 1];
+  focusItem(lastListboxOption);
+}
+
+// Hide listbox
+function hideListbox() {
+  listboxHidden.value = true;
+  listboxButton.value?.removeAttribute("aria-expanded");
+}
+
+// Show listbox and focus on it
+function showListbox() {
+  listboxHidden.value = false;
+  listboxButton.value?.setAttribute("aria-expanded", "true");
+  listboxNode.value?.focus();
+}
+
+// Toggle visibility of listbox
+function toggleListbox() {
+  if (!props.disabled) {
+    listboxHidden.value ? showListbox() : hideListbox();
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@use "../../../assets/scss/variables.scss" as *;
+.listbox {
+  &__wrapper {
+    font-family: $font-opensans;
+    font-size: $font-size-xsm;
+    color: $blue-900;
+  }
+
+  &__dropdown {
+    position: relative;
+    display: inline-block;
+    width: 100%;
+  }
+
+  &__button {
+    padding: 10px 15px;
+    width: 100%;
+    min-width: 120px;
+    position: relative;
+    border: 1px solid $grey-400;
+    border-radius: $border-radius;
+    height: 42px;
+    font-weight: 300;
+
+    &:hover,
+    &:focus,
+    &:active,
+    &:target {
+      cursor: pointer;
+      box-shadow: $box-shadow;
+      border: 1px solid $blue-500;
+      transition: $transition-box-shadow;
+      transition: $transition-border;
+    }
+
+    &::after {
+      position: absolute;
+      content: "";
+      top: 15px;
+      right: 15px;
+      border: 7px solid transparent;
+
+      background-repeat: no-repeat;
+      background-position: center;
+    }
+
+    &[aria-expanded="true"] {
+      border: 1px solid $blue-500;
+      box-shadow: $box-shadow;
+      border-radius: $border-radius $border-radius 0 0;
+      border-bottom: 0;
+
+      &::after {
+        transform: rotate(180deg);
+      }
+    }
+  }
+
+  &__list {
+    color: $blue-900;
+    font-weight: 300;
+    border-radius: 0 0 0.4rem 0.4rem;
+    overflow-y: auto;
+    max-height: 200px;
+    margin: 0;
+    border-right: 1px solid $blue-500;
+    border-left: 1px solid $blue-500;
+    border-bottom: 1px solid $blue-500;
+    position: absolute;
+    background-color: $white;
+    width: 100%;
+    z-index: 1;
+    cursor: pointer;
+    box-shadow: 0px 6px 7.5px $blue-300;
+  }
+
+  &__label {
+    margin-bottom: 7px;
+    display: inline-block;
+    font-weight: 300;
+
+    &--visually-hidden {
+      position: absolute;
+      height: 1px;
+      width: 1px;
+      overflow: hidden;
+      clip: rect(1px, 1px, 1px, 1px);
+      white-space: nowrap;
+    }
+
+    &.is-disabled {
+      color: $grey-600;
+    }
+
+    &.is-required::after {
+      content: "\00a0*";
+      display: inline-block;
+    }
+  }
+}
+
+[role="listbox"] {
+  background: white;
+  border-radius: 0 0 $border-radius $border-radius;
+}
+
+[role="option"] {
+  display: block;
+  padding: 10px 15px;
+  position: relative;
+
+  &:hover {
+    background-color: $blue-200;
+    transition: $transition-background-color;
+  }
+}
+
+[role="option"][aria-selected="true"] {
+  background-color: $blue-100;
+}
+
+button {
+  &[aria-disabled="true"] {
+    background-color: $grey-100;
+    border: 1px solid $grey-400;
+    pointer-events: none;
+
+    &:hover,
+    &:active,
+    &:focus,
+    &:target {
+      box-shadow: none;
+    }
+
+    &::after {
+      opacity: 0.5;
+    }
+  }
+}
+.dropdown-dark {
+  color: #fff;
+}
+.dropdown-dark-bg-primary::after {
+  background-image: url("https://a.storyblok.com/f/230581/9x6/8cecdca15f/arrow-down.svg?cv=1695125714195");
+}
+.dropdown-dark-bg-dark::after {
+  background-image: url("https://a.storyblok.com/f/230581/9x6/7f613e9b8f/arrow-down-white.svg?cv=1695125714435");
+}
+</style>

package/dist/components/atoms/image/image.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="image__wrapper">
+    <slot v-bind="$attrs"></slot>
+  </div>
+</template>
+
+<script lang="ts" setup>
+export type Props = {
+  src?: string;
+  srcset?: string;
+  sizes?: string;
+  alt?: string;
+  width?: string | number;
+  height?: string | number;
+  loading?: "lazy" | "eager" | "auto";
+};
+
+withDefaults(defineProps<Props>(), {
+  src: undefined,
+  srcset: undefined,
+  sizes: undefined,
+  alt: undefined,
+  width: undefined,
+  height: "auto",
+  loading: "auto",
+});
+</script>
+
+<style lang="scss" scoped>
+.image__wrapper {
+  width: 100%;
+  height: 100%;
+
+  :slotted(img) {
+    width: 100%;
+    height: auto;
+    display: block;
+    border: 0;
+    max-inline-size: 100%;
+  }
+}
+</style>