jouw-stem__design-system 0.1.0

package/src/components/AutoComplete/AutoComplete.vue

@@ -0,0 +1,404 @@
+<template>
+  <div
+    ref="containerRef"
+    class="autocomplete"
+    :class="additionalClasses"
+  >
+    <div class="autocomplete__input-wrapper" @click="focusInput">
+      <!-- Multiple mode chips -->
+      <span
+        v-for="(item, index) in selectedItems"
+        :key="`chip-${index}`"
+        class="autocomplete__chip"
+      >
+        <span class="autocomplete__chip-label">{{ getOptionLabel(item) }}</span>
+        <button
+          v-if="!isDisabled"
+          type="button"
+          class="autocomplete__chip-remove"
+          aria-label="Remove"
+          @click.stop="removeItem(index)"
+        >
+          <svg
+            class="autocomplete__chip-remove-icon"
+            viewBox="0 0 14 14"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M4.5 4.5L9.5 9.5M9.5 4.5L4.5 9.5"
+              stroke="currentColor"
+              stroke-width="1.5"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
+        </button>
+      </span>
+
+      <input
+        ref="inputRef"
+        v-model="query"
+        class="autocomplete__input"
+        type="text"
+        :placeholder="showPlaceholder ? placeholder : ''"
+        :disabled="isDisabled"
+        :aria-invalid="isInvalid || undefined"
+        :aria-expanded="isOpen"
+        aria-autocomplete="list"
+        role="combobox"
+        @input="onInput"
+        @focus="onFocus"
+        @blur="onBlur"
+        @keydown="onKeydown"
+      />
+
+      <span v-if="isLoading" class="autocomplete__loader">
+        <svg
+          class="autocomplete__loader-icon"
+          viewBox="0 0 24 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <circle
+            cx="12"
+            cy="12"
+            r="10"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-dasharray="31.4 31.4"
+          />
+        </svg>
+      </span>
+
+      <span v-else-if="!multiple && modelValue && !isDisabled" class="autocomplete__clear" @click.stop="clearValue">
+        <svg
+          viewBox="0 0 14 14"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M4.5 4.5L9.5 9.5M9.5 4.5L4.5 9.5"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+      </span>
+
+      <span class="autocomplete__icon">
+        <svg
+          width="16"
+          height="16"
+          viewBox="0 0 16 16"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M4 6L8 10L12 6"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+      </span>
+    </div>
+
+    <!-- Dropdown -->
+    <Teleport to="body">
+      <div
+        v-if="isOpen && filteredSuggestions.length > 0"
+        ref="dropdownRef"
+        class="autocomplete__dropdown"
+        :style="dropdownStyle"
+        role="listbox"
+      >
+        <div
+          v-for="(suggestion, index) in filteredSuggestions"
+          :key="`suggestion-${index}`"
+          class="autocomplete__option"
+          :class="{
+            'autocomplete__option--highlighted': index === highlightedIndex,
+            'autocomplete__option--state-selected': isSelected(suggestion)
+          }"
+          role="option"
+          :aria-selected="isSelected(suggestion)"
+          @mousedown.prevent="selectSuggestion(suggestion)"
+          @mouseenter="highlightedIndex = index"
+        >
+          <slot name="option" :option="suggestion">
+            {{ getOptionLabel(suggestion) }}
+          </slot>
+        </div>
+      </div>
+    </Teleport>
+  </div>
+</template>
+
+<style src="./AutoComplete.scss"></style>
+
+<script setup lang="ts">
+import { computed, ref, watch, nextTick, onMounted, onUnmounted } from "vue";
+
+interface Props {
+  modelValue?: string | number | Record<string, unknown> | unknown[];
+  suggestions?: unknown[];
+  optionLabel?: string;
+  optionValue?: string;
+  placeholder?: string;
+  multiple?: boolean;
+  minLength?: number;
+  delay?: number;
+  size?: string;
+  isDisabled?: boolean;
+  isInvalid?: boolean;
+  isLoading?: boolean;
+  dropdown?: boolean;
+  completeOnFocus?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: null,
+  suggestions: () => [],
+  optionLabel: "label",
+  optionValue: "value",
+  placeholder: "",
+  multiple: false,
+  minLength: 1,
+  delay: 300,
+  size: "md",
+  isDisabled: false,
+  isInvalid: false,
+  isLoading: false,
+  dropdown: false,
+  completeOnFocus: false,
+});
+const emit = defineEmits<{
+  (e: "update:modelValue", ...args: unknown[]): void;
+  (e: "complete", ...args: unknown[]): void;
+  (e: "select", ...args: unknown[]): void;
+  (e: "unselect", ...args: unknown[]): void;
+  (e: "focus", ...args: unknown[]): void;
+  (e: "blur", ...args: unknown[]): void;
+  (e: "clear", ...args: unknown[]): void;
+}>();
+const containerRef = ref(null);
+const inputRef = ref(null);
+const dropdownRef = ref(null);
+const query = ref("");
+const isOpen = ref(false);
+const isFocused = ref(false);
+const highlightedIndex = ref(-1);
+const dropdownStyle = ref({});
+let debounceTimer = null;
+
+const selectedItems = computed(() => {
+  if (!props.multiple) return [];
+  return Array.isArray(props.modelValue) ? props.modelValue : [];
+});
+
+const showPlaceholder = computed(() => {
+  if (props.multiple) {
+    return selectedItems.value.length === 0 && !query.value;
+  }
+  return !props.modelValue && !query.value;
+});
+
+const filteredSuggestions = computed(() => {
+  if (props.multiple) {
+    return props.suggestions.filter((s) => {
+      const value = getOptionValue(s);
+      return !selectedItems.value.some((item) => getOptionValue(item) === value);
+    });
+  }
+  return props.suggestions;
+});
+
+const getOptionLabel = (option) => {
+  if (option === null || option === undefined) return "";
+  if (typeof option === "string" || typeof option === "number") return option;
+  return option[props.optionLabel] || "";
+};
+
+const getOptionValue = (option) => {
+  if (option === null || option === undefined) return option;
+  if (typeof option === "string" || typeof option === "number") return option;
+  return option[props.optionValue] ?? option;
+};
+
+const isSelected = (suggestion) => {
+  if (props.multiple) {
+    return selectedItems.value.some(
+      (item) => getOptionValue(item) === getOptionValue(suggestion)
+    );
+  }
+  return getOptionValue(props.modelValue) === getOptionValue(suggestion);
+};
+
+const updateDropdownPosition = () => {
+  if (!containerRef.value) return;
+  const rect = containerRef.value.getBoundingClientRect();
+  dropdownStyle.value = {
+    position: "fixed",
+    top: `${rect.bottom + 4}px`,
+    left: `${rect.left}px`,
+    width: `${rect.width}px`,
+    zIndex: 1000,
+  };
+};
+
+const openDropdown = () => {
+  if (props.isDisabled) return;
+  isOpen.value = true;
+  highlightedIndex.value = -1;
+  nextTick(updateDropdownPosition);
+};
+
+const closeDropdown = () => {
+  isOpen.value = false;
+  highlightedIndex.value = -1;
+};
+
+const focusInput = () => {
+  inputRef.value?.focus();
+};
+
+const onInput = () => {
+  if (debounceTimer) clearTimeout(debounceTimer);
+
+  if (query.value.length >= props.minLength) {
+    debounceTimer = setTimeout(() => {
+      emit("complete", { query: query.value });
+      openDropdown();
+    }, props.delay);
+  } else {
+    closeDropdown();
+  }
+};
+
+const onFocus = (event) => {
+  isFocused.value = true;
+  emit("focus", { originalEvent: event });
+
+  if (props.completeOnFocus || props.dropdown) {
+    emit("complete", { query: query.value });
+    openDropdown();
+  }
+};
+
+const onBlur = (event) => {
+  isFocused.value = false;
+  closeDropdown();
+  emit("blur", { originalEvent: event });
+};
+
+const onKeydown = (event) => {
+  switch (event.key) {
+    case "ArrowDown":
+      event.preventDefault();
+      if (!isOpen.value) {
+        openDropdown();
+        emit("complete", { query: query.value });
+      } else if (highlightedIndex.value < filteredSuggestions.value.length - 1) {
+        highlightedIndex.value++;
+      }
+      break;
+    case "ArrowUp":
+      event.preventDefault();
+      if (highlightedIndex.value > 0) {
+        highlightedIndex.value--;
+      }
+      break;
+    case "Enter":
+      event.preventDefault();
+      if (isOpen.value && highlightedIndex.value >= 0) {
+        selectSuggestion(filteredSuggestions.value[highlightedIndex.value]);
+      }
+      break;
+    case "Escape":
+      closeDropdown();
+      break;
+    case "Backspace":
+      if (props.multiple && !query.value && selectedItems.value.length > 0) {
+        removeItem(selectedItems.value.length - 1);
+      }
+      break;
+  }
+};
+
+const selectSuggestion = (suggestion) => {
+  if (props.multiple) {
+    const newValue = [...selectedItems.value, suggestion];
+    emit("update:modelValue", newValue);
+    emit("select", { value: suggestion });
+    query.value = "";
+  } else {
+    emit("update:modelValue", suggestion);
+    emit("select", { value: suggestion });
+    query.value = getOptionLabel(suggestion);
+    closeDropdown();
+  }
+};
+
+const removeItem = (index) => {
+  const removed = selectedItems.value[index];
+  const newValue = selectedItems.value.filter((_, i) => i !== index);
+  emit("update:modelValue", newValue);
+  emit("unselect", { value: removed });
+};
+
+const clearValue = () => {
+  emit("update:modelValue", null);
+  emit("clear");
+  query.value = "";
+  focusInput();
+};
+
+// Sync query with single selection
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    if (!props.multiple && newValue && !isFocused.value) {
+      query.value = getOptionLabel(newValue);
+    }
+  },
+  { immediate: true }
+);
+
+// Handle scroll and resize
+const handleScroll = () => {
+  if (isOpen.value) updateDropdownPosition();
+};
+
+onMounted(() => {
+  window.addEventListener("scroll", handleScroll, true);
+  window.addEventListener("resize", handleScroll);
+});
+
+onUnmounted(() => {
+  window.removeEventListener("scroll", handleScroll, true);
+  window.removeEventListener("resize", handleScroll);
+  if (debounceTimer) clearTimeout(debounceTimer);
+});
+
+const additionalClasses = computed(() =>
+  [
+    `autocomplete--size-${props.size}`,
+    props.multiple && "autocomplete--mode-multiple",
+    isFocused.value && "autocomplete--state-focused",
+    props.isDisabled && "autocomplete--state-disabled",
+    props.isInvalid && "autocomplete--state-invalid",
+  ]
+    .filter(Boolean)
+    .join(" ")
+);
+
+defineExpose({
+  focus: () => inputRef.value?.focus(),
+  blur: () => inputRef.value?.blur(),
+  el: inputRef,
+});
+</script>

package/src/components/Avatar/Avatar.matrix.ts

@@ -0,0 +1,47 @@
+import type { ComponentMatrix } from '../../types/matrix'
+
+// 1×1 transparent PNG used by the `image` content subvariant. Inlined
+// so the matrix page doesn't depend on a network request resolving.
+const TINY_PNG =
+  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkqAcAAIUAgUW0RjgAAAAASUVORK5CYII='
+
+export const matrix: ComponentMatrix = {
+  rootSelector: '.avatar',
+  // Avatar has one base render and three orthogonal sub-axes: Content,
+  // Size, Shape. No `primaryAxis` is declared — the page renders one
+  // implicit section using `baseQuery`, with all three axes (and their
+  // Combinations cross-product) below it.
+  baseQuery: { label: 'JD' },
+  variants: [
+    {
+      name: 'Content',
+      // Avatar.vue's fallback chain is `image > label > icon > slot`.
+      // The `icon` subvariant must clear the inherited label so the icon
+      // branch wins; the `image` subvariant sets `image` which has top
+      // priority over label regardless.
+      subvariants: [
+        { name: 'label', query: { label: 'JD' } },
+        { name: 'icon',  query: { label: '', icon: 'pi pi-user', ariaLabel: 'User' } },
+        { name: 'image', query: { image: TINY_PNG, ariaLabel: 'User photo' } }
+      ]
+    },
+    {
+      name: 'Size',
+      subvariants: [
+        { name: 'xs',     query: { size: 'xs' } },
+        { name: 'small',  query: { size: 'small' } },
+        { name: 'medium', query: { size: 'medium' } },
+        { name: 'large',  query: { size: 'large' } },
+        { name: '2xl',    query: { size: '2xl' } }
+      ]
+    },
+    {
+      name: 'Shape',
+      subvariants: [
+        { name: 'square', query: {} },
+        { name: 'circle', query: { shape: 'circle' } }
+      ]
+    }
+  ]
+  // No `states` — Avatar is non-interactive presentational chrome.
+}

package/src/components/Avatar/Avatar.scss

@@ -0,0 +1,191 @@
+@use "../../../dist/scss/tokens" as *;
+
+$c: avatar;
+
+.#{$c} {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--avatar-background-default, $avatar-background-default);
+  color: var(--avatar-text-default, $avatar-text-default);
+  overflow: hidden;
+  user-select: none;
+  position: relative;
+}
+
+.#{$c}__image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.#{$c}__label {
+  text-transform: uppercase;
+  font-weight: 500;
+}
+
+.#{$c}__icon {
+  display: block;
+  color: inherit;
+}
+
+// Status indicator
+.#{$c}::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: var(--avatar-status-size-md, $avatar-status-size-md);
+  height: var(--avatar-status-size-md, $avatar-status-size-md);
+  border-radius: 50%;
+  border: 2px solid white;
+  display: none;
+}
+
+.#{$c}--status-online::after {
+  display: block;
+  background-color: var(--avatar-status-online, $avatar-status-online);
+}
+
+.#{$c}--status-offline::after {
+  display: block;
+  background-color: var(--avatar-status-offline, $avatar-status-offline);
+}
+
+.#{$c}--status-busy::after {
+  display: block;
+  background-color: var(--avatar-status-busy, $avatar-status-busy);
+}
+
+.#{$c}--status-away::after {
+  display: block;
+  background-color: var(--avatar-status-away, $avatar-status-away);
+}
+
+// Sizes
+.#{$c}--size-xs {
+  width: var(--avatar-size-xs, $avatar-size-xs);
+  height: var(--avatar-size-xs, $avatar-size-xs);
+
+  .#{$c}__label {
+    font-size: var(--avatar-fontSize-xs, $avatar-fontSize-xs);
+  }
+
+  .#{$c}__icon {
+    font-size: var(--avatar-iconSize-xs, $avatar-iconSize-xs);
+  }
+}
+
+.#{$c}--size-sm,
+.#{$c}--size-small {
+  width: var(--avatar-size-sm, $avatar-size-sm);
+  height: var(--avatar-size-sm, $avatar-size-sm);
+
+  .#{$c}__label {
+    font-size: var(--avatar-fontSize-sm, $avatar-fontSize-sm);
+  }
+
+  .#{$c}__icon {
+    font-size: var(--avatar-iconSize-sm, $avatar-iconSize-sm);
+  }
+}
+
+.#{$c}--size-md,
+.#{$c}--size-medium {
+  width: var(--avatar-size-md, $avatar-size-md);
+  height: var(--avatar-size-md, $avatar-size-md);
+
+  .#{$c}__label {
+    font-size: var(--avatar-fontSize-md, $avatar-fontSize-md);
+  }
+
+  .#{$c}__icon {
+    font-size: var(--avatar-iconSize-md, $avatar-iconSize-md);
+  }
+}
+
+.#{$c}--size-lg,
+.#{$c}--size-large {
+  width: var(--avatar-size-lg, $avatar-size-lg);
+  height: var(--avatar-size-lg, $avatar-size-lg);
+
+  .#{$c}__label {
+    font-size: var(--avatar-fontSize-lg, $avatar-fontSize-lg);
+  }
+
+  .#{$c}__icon {
+    font-size: var(--avatar-iconSize-lg, $avatar-iconSize-lg);
+  }
+}
+
+.#{$c}--size-xl,
+.#{$c}--size-xlarge {
+  width: var(--avatar-size-xl, $avatar-size-xl);
+  height: var(--avatar-size-xl, $avatar-size-xl);
+
+  .#{$c}__label {
+    font-size: var(--avatar-fontSize-xl, $avatar-fontSize-xl);
+  }
+
+  .#{$c}__icon {
+    font-size: var(--avatar-iconSize-xl, $avatar-iconSize-xl);
+  }
+}
+
+.#{$c}--size-2xl {
+  width: var(--avatar-size-2xl, $avatar-size-2xl);
+  height: var(--avatar-size-2xl, $avatar-size-2xl);
+
+  .#{$c}__label {
+    font-size: var(--avatar-fontSize-2xl, $avatar-fontSize-2xl);
+  }
+
+  .#{$c}__icon {
+    font-size: var(--avatar-iconSize-2xl, $avatar-iconSize-2xl);
+  }
+}
+
+// Shapes
+.#{$c}--shape-square {
+  border-radius: var(--avatar-radius-square, $avatar-radius-square);
+}
+
+.#{$c}--shape-circle {
+  border-radius: var(--avatar-radius-circle, $avatar-radius-circle);
+}
+
+// Color variants
+.#{$c}--variant-default {
+  background-color: var(--avatar-background-default, $avatar-background-default);
+  color: var(--avatar-text-default, $avatar-text-default);
+}
+
+.#{$c}--variant-muted {
+  background-color: var(--avatar-background-muted, $avatar-background-muted);
+  color: var(--avatar-text-default, $avatar-text-default);
+}
+
+.#{$c}--variant-brand {
+  background-color: var(--avatar-background-brand, $avatar-background-brand);
+  color: var(--avatar-text-inverse, $avatar-text-inverse);
+}
+
+.#{$c}--variant-accent {
+  background-color: var(--avatar-background-accent, $avatar-background-accent);
+  color: var(--avatar-text-default, $avatar-text-default);
+}
+
+.#{$c}--variant-success {
+  background-color: var(--avatar-background-success, $avatar-background-success);
+  color: var(--avatar-text-inverse, $avatar-text-inverse);
+}
+
+.#{$c}--variant-warning {
+  background-color: var(--avatar-background-warning, $avatar-background-warning);
+  color: var(--avatar-text-default, $avatar-text-default);
+}
+
+.#{$c}--variant-error {
+  background-color: var(--avatar-background-error, $avatar-background-error);
+  color: var(--avatar-text-inverse, $avatar-text-inverse);
+}