@for-the-people-initiative/design-system 1.3.1

package/src/components/InputMask/InputMask.scss

@@ -0,0 +1,65 @@
+@use "../../../dist/scss/tokens" as *;
+
+$c: input-mask;
+
+.#{$c} {
+  display: block;
+  width: 100%;
+  appearance: none;
+  background-color: var(--input-mask-background-default, $input-mask-background-default);
+  border: var(--input-mask-border-width, $input-mask-border-width) solid var(--input-mask-border-color-default, $input-mask-border-color-default);
+  border-radius: var(--input-mask-radius, $input-mask-radius);
+  padding: 0 var(--input-mask-padding-x, $input-mask-padding-x);
+  color: var(--input-mask-text-default, $input-mask-text-default);
+  font-family: monospace;
+  letter-spacing: 0.05em;
+  transition: all 0.15s ease;
+
+  &::placeholder {
+    color: var(--input-mask-text-placeholder, $input-mask-text-placeholder);
+    font-family: inherit;
+    letter-spacing: normal;
+  }
+
+  &:hover:not(:disabled) {
+    border-color: var(--input-mask-border-color-hover, $input-mask-border-color-hover);
+  }
+
+  &:focus {
+    outline: var(--input-mask-focus-ringWidth, $input-mask-focus-ringWidth) solid var(--input-mask-focus-ringColor, $input-mask-focus-ringColor);
+    outline-offset: var(--input-mask-focus-ringOffset, $input-mask-focus-ringOffset);
+    border-color: var(--input-mask-border-color-focus, $input-mask-border-color-focus);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    background-color: var(--input-mask-background-disabled, $input-mask-background-disabled);
+    border-color: var(--input-mask-border-color-disabled, $input-mask-border-color-disabled);
+    color: var(--input-mask-text-disabled, $input-mask-text-disabled);
+  }
+}
+
+// Invalid state
+.#{$c}--invalid {
+  border-color: var(--input-mask-border-color-error, $input-mask-border-color-error);
+
+  &:focus {
+    border-color: var(--input-mask-border-color-error, $input-mask-border-color-error);
+  }
+}
+
+// Sizes
+.#{$c}--size-sm {
+  height: var(--input-mask-height-sm, $input-mask-height-sm);
+  font-size: var(--input-mask-fontSize-sm, $input-mask-fontSize-sm);
+}
+
+.#{$c}--size-md {
+  height: var(--input-mask-height-md, $input-mask-height-md);
+  font-size: var(--input-mask-fontSize-md, $input-mask-fontSize-md);
+}
+
+.#{$c}--size-lg {
+  height: var(--input-mask-height-lg, $input-mask-height-lg);
+  font-size: var(--input-mask-fontSize-lg, $input-mask-fontSize-lg);
+}

package/src/components/InputMask/InputMask.vue

@@ -0,0 +1,268 @@
+<template>
+  <input
+    ref="inputRef"
+    class="input-mask"
+    :class="additionalClasses"
+    type="text"
+    :value="displayValue"
+    :placeholder="placeholder"
+    :disabled="isDisabled"
+    :name="name"
+    :aria-invalid="isInvalid || undefined"
+    @input="onInput"
+    @keydown="onKeydown"
+    @focus="onFocus"
+    @blur="onBlur"
+  />
+</template>
+
+<style src="./InputMask.scss"></style>
+
+<script setup lang="ts">
+import type { InputMaskProps, InputMaskEmits } from '../../types';
+import { computed, ref, watch, onMounted } from "vue";
+
+defineOptions({ name: 'FtpInputMask' });
+
+const props = withDefaults(defineProps<InputMaskProps>(), {
+  modelValue: "",
+  slotChar: "_",
+  autoClear: true,
+  size: "md",
+  isDisabled: false,
+  isInvalid: false,
+});
+
+const emit = defineEmits(["update:modelValue", "complete", "focus", "blur"]);
+
+const inputRef = ref<HTMLInputElement | null>(null);
+const buffer = ref<string[]>([]);
+const focusPosition = ref(0);
+
+// Mask definitions: 9 = digit, a = letter, * = alphanumeric
+const maskDefinitions: Record<string, RegExp> = {
+  "9": /\d/,
+  "a": /[a-zA-Z]/,
+  "*": /[a-zA-Z0-9]/,
+};
+
+const getMaskArray = () => props.mask.split("");
+
+const isEditablePosition = (pos: any) => {
+  const maskArray = getMaskArray();
+  if (pos < 0 || pos >= maskArray.length) return false;
+  return Object.keys(maskDefinitions).includes(maskArray[pos]);
+};
+
+const getNextEditablePosition = (pos: any) => {
+  const maskArray = getMaskArray();
+  for (let i = pos; i < maskArray.length; i++) {
+    if (isEditablePosition(i)) return i;
+  }
+  return -1;
+};
+
+const getPrevEditablePosition = (pos: any) => {
+  for (let i = pos - 1; i >= 0; i--) {
+    if (isEditablePosition(i)) return i;
+  }
+  return -1;
+};
+
+const getFirstEditablePosition = () => getNextEditablePosition(0);
+
+const initBuffer = () => {
+  const maskArray = getMaskArray();
+  buffer.value = maskArray.map((char, index) => {
+    if (isEditablePosition(index)) {
+      return props.slotChar;
+    }
+    return char;
+  });
+};
+
+const setValueFromModel = () => {
+  if (!props.modelValue) {
+    initBuffer();
+    return;
+  }
+
+  const maskArray = getMaskArray();
+  const rawValue = props.modelValue.replace(/[^a-zA-Z0-9]/g, "");
+  let valueIndex = 0;
+
+  buffer.value = maskArray.map((maskChar, index) => {
+    if (isEditablePosition(index) && valueIndex < rawValue.length) {
+      const regex = maskDefinitions[maskChar];
+      const char = rawValue[valueIndex];
+      if (regex && regex.test(char)) {
+        valueIndex++;
+        return char;
+      }
+      valueIndex++;
+      return props.slotChar;
+    } else if (!isEditablePosition(index)) {
+      return maskChar;
+    }
+    return props.slotChar;
+  });
+};
+
+const displayValue = computed(() => buffer.value.join(""));
+
+const getRawValue = () => {
+  const maskArray = getMaskArray();
+  return buffer.value
+    .filter((char, index) => isEditablePosition(index) && char !== props.slotChar)
+    .join("");
+};
+
+const isComplete = () => {
+  return buffer.value.every((char, index) => {
+    if (isEditablePosition(index)) {
+      return char !== props.slotChar;
+    }
+    return true;
+  });
+};
+
+const validateChar = (char: any, pos: any) => {
+  const maskArray = getMaskArray();
+  const maskChar = maskArray[pos];
+  const regex = maskDefinitions[maskChar];
+  return regex ? regex.test(char) : false;
+};
+
+const onInput = (event: Event) => {
+  // Prevent default input handling - we manage it ourselves
+  event.preventDefault();
+};
+
+const onKeydown = (event: KeyboardEvent) => {
+  const input = inputRef.value;
+  if (!input) return;
+
+  const pos = input.selectionStart;
+
+  if (event.key.length === 1 && !event.ctrlKey && !event.metaKey) {
+    event.preventDefault();
+    const nextPos = getNextEditablePosition(pos);
+    if (nextPos !== -1 && validateChar(event.key, nextPos)) {
+      buffer.value[nextPos] = event.key;
+      const newPos = getNextEditablePosition(nextPos + 1);
+      focusPosition.value = newPos !== -1 ? newPos : nextPos + 1;
+
+      requestAnimationFrame(() => {
+        input.setSelectionRange(focusPosition.value, focusPosition.value);
+      });
+
+      emitValue();
+    }
+  } else if (event.key === "Backspace") {
+    event.preventDefault();
+    let deletePos = pos;
+
+    if (!isEditablePosition(pos) || buffer.value[pos!] === props.slotChar) {
+      deletePos = getPrevEditablePosition(pos!);
+    } else {
+      deletePos = pos!;
+    }
+
+    if (deletePos !== -1 && deletePos >= 0) {
+      buffer.value[deletePos] = props.slotChar;
+      const newPos = deletePos;
+      focusPosition.value = newPos;
+
+      requestAnimationFrame(() => {
+        input.setSelectionRange(newPos, newPos);
+      });
+
+      emitValue();
+    }
+  } else if (event.key === "Delete") {
+    event.preventDefault();
+    const deletePos = isEditablePosition(pos) ? pos : getNextEditablePosition(pos);
+    if (deletePos !== -1) {
+      buffer.value[deletePos!] = props.slotChar;
+      emitValue();
+    }
+  } else if (event.key === "ArrowLeft") {
+    event.preventDefault();
+    const newPos = getPrevEditablePosition(pos);
+    if (newPos !== -1) {
+      input.setSelectionRange(newPos, newPos);
+    }
+  } else if (event.key === "ArrowRight") {
+    event.preventDefault();
+    const newPos = getNextEditablePosition(pos! + 1);
+    if (newPos !== -1) {
+      input.setSelectionRange(newPos, newPos);
+    }
+  }
+};
+
+const emitValue = () => {
+  const rawValue = getRawValue();
+  emit("update:modelValue", rawValue);
+
+  if (isComplete()) {
+    emit("complete", { value: rawValue, maskedValue: displayValue.value });
+  }
+};
+
+const onFocus = (event: FocusEvent) => {
+  const input = inputRef.value;
+  if (!input) return;
+
+  const firstEditable = getFirstEditablePosition();
+  if (firstEditable !== -1) {
+    requestAnimationFrame(() => {
+      input.setSelectionRange(firstEditable, firstEditable);
+    });
+  }
+
+  emit("focus", { originalEvent: event });
+};
+
+const onBlur = (event: FocusEvent) => {
+  if (props.autoClear && !isComplete()) {
+    initBuffer();
+    emit("update:modelValue", "");
+  }
+  emit("blur", { originalEvent: event });
+};
+
+const additionalClasses = computed(() => [
+  `input-mask--size-${props.size}`,
+  props.isDisabled && "input-mask--disabled",
+  props.isInvalid && "input-mask--invalid",
+].filter(Boolean).join(" "));
+
+// Initialize
+onMounted(() => {
+  if (props.modelValue) {
+    setValueFromModel();
+  } else {
+    initBuffer();
+  }
+});
+
+// Watch for external value changes
+watch(() => props.modelValue, (newValue) => {
+  if (newValue !== getRawValue()) {
+    setValueFromModel();
+  }
+});
+
+watch(() => props.mask, () => {
+  initBuffer();
+  setValueFromModel();
+});
+
+defineExpose({
+  focus: () => inputRef.value?.focus(),
+  blur: () => inputRef.value?.blur(),
+  select: () => inputRef.value?.select(),
+  el: inputRef,
+});
+</script>

package/src/components/InputNumber/InputNumber.scss

@@ -0,0 +1,122 @@
+@use "../../../dist/scss/tokens" as *;
+
+$c: input-number;
+
+.#{$c} {
+  display: inline-flex;
+  position: relative;
+  width: 100%;
+}
+
+.#{$c}__input {
+  width: 100%;
+  flex: 1;
+  background-color: var(--inputNumber-background-default, $inputNumber-background-default);
+  border: var(--inputNumber-border-width, $inputNumber-border-width) solid var(--inputNumber-border-color-default, $inputNumber-border-color-default);
+  border-radius: var(--inputNumber-radius, $inputNumber-radius);
+  padding: 0 var(--inputNumber-padding-x, $inputNumber-padding-x);
+  color: var(--inputNumber-text-default, $inputNumber-text-default);
+  text-align: center;
+  transition: all 0.15s ease;
+
+  &::placeholder {
+    color: var(--inputNumber-text-placeholder, $inputNumber-text-placeholder);
+  }
+
+  &:hover:not(:disabled) {
+    border-color: var(--inputNumber-border-color-hover, $inputNumber-border-color-hover);
+  }
+
+  &:focus {
+    outline: var(--inputNumber-focus-ringWidth, $inputNumber-focus-ringWidth) solid var(--inputNumber-focus-ringColor, $inputNumber-focus-ringColor);
+    outline-offset: var(--inputNumber-focus-ringOffset, $inputNumber-focus-ringOffset);
+    border-color: var(--inputNumber-border-color-focus, $inputNumber-border-color-focus);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    background-color: var(--inputNumber-background-disabled, $inputNumber-background-disabled);
+    border-color: var(--inputNumber-border-color-disabled, $inputNumber-border-color-disabled);
+    color: var(--inputNumber-text-disabled, $inputNumber-text-disabled);
+  }
+}
+
+.#{$c}__button {
+  position: absolute;
+  top: 1px;
+  bottom: 1px;
+  width: var(--inputNumber-button-width, $inputNumber-button-width);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--inputNumber-button-background-default, $inputNumber-button-background-default);
+  border: none;
+  cursor: pointer;
+  color: var(--inputNumber-button-icon-color-default, $inputNumber-button-icon-color-default);
+  transition: all 0.15s ease;
+
+  &:hover:not(:disabled) {
+    background-color: var(--inputNumber-button-background-hover, $inputNumber-button-background-hover);
+  }
+
+  &:active:not(:disabled) {
+    background-color: var(--inputNumber-button-background-active, $inputNumber-button-background-active);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    background-color: var(--inputNumber-button-background-disabled, $inputNumber-button-background-disabled);
+    color: var(--inputNumber-button-icon-color-disabled, $inputNumber-button-icon-color-disabled);
+  }
+
+  &--decrement {
+    left: 1px;
+    border-radius: calc(var(--inputNumber-radius, $inputNumber-radius) - 1px) 0 0 calc(var(--inputNumber-radius, $inputNumber-radius) - 1px);
+  }
+
+  &--increment {
+    right: 1px;
+    border-radius: 0 calc(var(--inputNumber-radius, $inputNumber-radius) - 1px) calc(var(--inputNumber-radius, $inputNumber-radius) - 1px) 0;
+  }
+}
+
+// With buttons
+.#{$c}--with-buttons {
+  .#{$c}__input {
+    padding-left: calc(var(--inputNumber-button-width, $inputNumber-button-width) + var(--inputNumber-padding-x, $inputNumber-padding-x));
+    padding-right: calc(var(--inputNumber-button-width, $inputNumber-button-width) + var(--inputNumber-padding-x, $inputNumber-padding-x));
+  }
+}
+
+// Invalid state
+.#{$c}--invalid {
+  .#{$c}__input {
+    border-color: var(--inputNumber-border-color-error, $inputNumber-border-color-error);
+
+    &:focus {
+      border-color: var(--inputNumber-border-color-error, $inputNumber-border-color-error);
+    }
+  }
+}
+
+// Sizes
+.#{$c}--size-sm {
+  .#{$c}__input {
+    height: var(--inputNumber-height-sm, $inputNumber-height-sm);
+    font-size: var(--inputNumber-fontSize-sm, $inputNumber-fontSize-sm);
+  }
+}
+
+.#{$c}--size-md {
+  .#{$c}__input {
+    height: var(--inputNumber-height-md, $inputNumber-height-md);
+    font-size: var(--inputNumber-fontSize-md, $inputNumber-fontSize-md);
+  }
+}
+
+.#{$c}--size-lg {
+  .#{$c}__input {
+    height: var(--inputNumber-height-lg, $inputNumber-height-lg);
+    font-size: var(--inputNumber-fontSize-lg, $inputNumber-fontSize-lg);
+  }
+}

package/src/components/InputNumber/InputNumber.vue

@@ -0,0 +1,150 @@
+<template>
+  <div class="input-number" :class="additionalClasses">
+    <button
+      v-if="showButtons"
+      type="button"
+      class="input-number__button input-number__button--decrement"
+      :disabled="isDisabled || isAtMin"
+      @click="decrement"
+    >
+      <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
+        <path d="M2.5 6H9.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+      </svg>
+    </button>
+    <input
+      ref="inputRef"
+      type="text"
+      inputmode="decimal"
+      class="input-number__input"
+      :value="displayValue"
+      :disabled="isDisabled"
+      :placeholder="placeholder"
+      :name="name"
+      :aria-invalid="isInvalid || undefined"
+      @input="onInput"
+      @blur="onBlur"
+      @keydown="onKeydown"
+    />
+    <button
+      v-if="showButtons"
+      type="button"
+      class="input-number__button input-number__button--increment"
+      :disabled="isDisabled || isAtMax"
+      @click="increment"
+    >
+      <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
+        <path d="M6 2.5V9.5M2.5 6H9.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+      </svg>
+    </button>
+  </div>
+</template>
+
+<style src="./InputNumber.scss"></style>
+
+<script setup lang="ts">
+import type { InputNumberProps, InputNumberEmits } from '../../types';
+import { computed, ref } from "vue";
+
+defineOptions({ name: 'FtpInputNumber' });
+
+const props = withDefaults(defineProps<InputNumberProps>(), {
+  modelValue: null,
+  min: null,
+  max: null,
+  step: 1,
+  size: "md",
+  showButtons: true,
+  isDisabled: false,
+  isInvalid: false,
+  locale: "nl-NL",
+  minFractionDigits: 0,
+  maxFractionDigits: 2,
+});
+
+const emit = defineEmits(["update:modelValue", "change"]);
+
+const inputRef = ref<HTMLInputElement | null>(null);
+
+const displayValue = computed(() => {
+  if (props.modelValue === null || props.modelValue === undefined) {
+    return "";
+  }
+  return new Intl.NumberFormat(props.locale, {
+    minimumFractionDigits: props.minFractionDigits,
+    maximumFractionDigits: props.maxFractionDigits,
+  }).format(props.modelValue);
+});
+
+const isAtMin = computed(() => {
+  if (props.min === null) return false;
+  return props.modelValue !== null && props.modelValue <= props.min;
+});
+
+const isAtMax = computed(() => {
+  if (props.max === null) return false;
+  return props.modelValue !== null && props.modelValue >= props.max;
+});
+
+const parseValue = (value: any) => {
+  if (!value || value === "") return null;
+  // Handle locale-specific parsing
+  const cleanedValue = value
+    .replace(/[^\d,.-]/g, "")
+    .replace(",", ".");
+  const parsed = parseFloat(cleanedValue);
+  return isNaN(parsed) ? null : parsed;
+};
+
+const clampValue = (value: any) => {
+  if (value === null) return null;
+  let result = value;
+  if (props.min !== null && result < props.min) result = props.min;
+  if (props.max !== null && result > props.max) result = props.max;
+  return result;
+};
+
+const updateValue = (value: any) => {
+  const clamped = clampValue(value);
+  emit("update:modelValue", clamped);
+  emit("change", { value: clamped });
+};
+
+const onInput = (event: Event) => {
+  // Allow typing, don't update immediately
+};
+
+const onBlur = (event: FocusEvent) => {
+  const parsed = parseValue((event.target as HTMLInputElement).value);
+  updateValue(parsed);
+};
+
+const onKeydown = (event: KeyboardEvent) => {
+  if (event.key === "ArrowUp") {
+    event.preventDefault();
+    increment();
+  } else if (event.key === "ArrowDown") {
+    event.preventDefault();
+    decrement();
+  } else if (event.key === "Enter") {
+    const parsed = parseValue((event.target as HTMLInputElement).value);
+    updateValue(parsed);
+  }
+};
+
+const increment = () => {
+  const current = props.modelValue ?? 0;
+  updateValue(current + props.step);
+};
+
+const decrement = () => {
+  const current = props.modelValue ?? 0;
+  updateValue(current - props.step);
+};
+
+const additionalClasses = computed(() => [
+  `input-number--size-${props.size}`,
+  props.isDisabled && "input-number--disabled",
+  props.isInvalid && "input-number--invalid",
+  props.showButtons && "input-number--with-buttons",
+].filter(Boolean).join(" "));
+</script>

package/src/components/InputOtp/InputOtp.scss

@@ -0,0 +1,88 @@
+@use "../../../dist/scss/tokens" as *;
+
+$c: input-otp;
+
+.#{$c} {
+  display: inline-block;
+}
+
+.#{$c}__container {
+  display: flex;
+  align-items: center;
+  gap: var(--input-otp-gap, $input-otp-gap);
+}
+
+.#{$c}__cell {
+  width: var(--input-otp-cell-size, $input-otp-cell-size);
+  height: var(--input-otp-cell-size, $input-otp-cell-size);
+  text-align: center;
+  font-size: var(--input-otp-cell-fontSize, $input-otp-cell-fontSize);
+  font-weight: var(--input-otp-cell-fontWeight, $input-otp-cell-fontWeight);
+  color: var(--input-otp-cell-text-default, $input-otp-cell-text-default);
+  background-color: var(--input-otp-cell-background-default, $input-otp-cell-background-default);
+  border: var(--input-otp-cell-border-width, $input-otp-cell-border-width) solid var(--input-otp-cell-border-color-default, $input-otp-cell-border-color-default);
+  border-radius: var(--input-otp-cell-radius, $input-otp-cell-radius);
+  appearance: none;
+  -moz-appearance: textfield;
+  transition:
+    border-color 150ms ease,
+    background-color 150ms ease,
+    box-shadow 150ms ease;
+
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  &::placeholder {
+    color: transparent;
+  }
+
+  &:hover:not(:disabled):not(:focus) {
+    border-color: var(--input-otp-cell-border-color-hover, $input-otp-cell-border-color-hover);
+  }
+
+  &:focus {
+    outline: none;
+    border-color: var(--input-otp-cell-border-color-focus, $input-otp-cell-border-color-focus);
+    background-color: var(--input-otp-cell-background-focus, $input-otp-cell-background-focus);
+    box-shadow: 0 0 0 var(--input-otp-focus-ringWidth, $input-otp-focus-ringWidth) var(--input-otp-focus-ringColor, $input-otp-focus-ringColor);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    background-color: var(--input-otp-cell-background-disabled, $input-otp-cell-background-disabled);
+    border-color: var(--input-otp-cell-border-color-disabled, $input-otp-cell-border-color-disabled);
+    color: var(--input-otp-cell-text-disabled, $input-otp-cell-text-disabled);
+  }
+}
+
+.#{$c}__cell--filled {
+  background-color: var(--input-otp-cell-background-filled, $input-otp-cell-background-filled);
+  border-color: var(--input-otp-cell-border-color-filled, $input-otp-cell-border-color-filled);
+}
+
+.#{$c}__separator {
+  display: block;
+  width: var(--input-otp-separator-width, $input-otp-separator-width);
+  height: 2px;
+  background-color: var(--input-otp-separator-color, $input-otp-separator-color);
+  border-radius: 1px;
+}
+
+// Invalid state
+.#{$c}--invalid {
+  .#{$c}__cell {
+    border-color: var(--input-otp-cell-border-color-error, $input-otp-cell-border-color-error);
+
+    &:focus {
+      border-color: var(--input-otp-cell-border-color-error, $input-otp-cell-border-color-error);
+    }
+  }
+}
+
+// Disabled state
+.#{$c}--disabled {
+  opacity: 0.6;
+}