jouw-stem__design-system 0.1.0

package/src/components/TieredMenu/TieredMenu.tokens.theme-light.json

@@ -0,0 +1,142 @@
+{
+  "tieredmenu": {
+    "background": {
+      "value": "{surface.panel}",
+      "type": "color",
+      "description": "Menu background"
+    },
+    "padding": {
+      "value": "{inset.2xs}",
+      "type": "dimension",
+      "description": "Menu container padding"
+    },
+    "border": {
+      "width": {
+        "value": "1px",
+        "type": "dimension",
+        "description": "Border width"
+      },
+      "color": {
+        "value": "{border.subtle}",
+        "type": "color",
+        "description": "Border color"
+      },
+      "radius": {
+        "value": "{radius.default}",
+        "type": "dimension",
+        "description": "Border radius"
+      }
+    },
+    "shadow": {
+      "value": "{shadow.m}",
+      "type": "shadow",
+      "description": "Menu shadow (popup mode)"
+    },
+    "minWidth": {
+      "value": "200px",
+      "type": "dimension",
+      "description": "Minimum menu width"
+    },
+    "item": {
+      "padding": {
+        "value": "{inset.xs} {inset.s}",
+        "type": "dimension",
+        "description": "Item padding"
+      },
+      "gap": {
+        "value": "{inline.2xs}",
+        "type": "dimension",
+        "description": "Gap between icon and label"
+      },
+      "color": {
+        "default": {
+          "value": "{text.default}",
+          "type": "color",
+          "description": "Item text color"
+        },
+        "hover": {
+          "value": "{text.default}",
+          "type": "color",
+          "description": "Item text color on hover"
+        },
+        "active": {
+          "value": "{brand.primary}",
+          "type": "color",
+          "description": "Active item text color"
+        },
+        "disabled": {
+          "value": "{text.muted}",
+          "type": "color",
+          "description": "Disabled item text color"
+        }
+      },
+      "background": {
+        "default": {
+          "value": "transparent",
+          "type": "color",
+          "description": "Item background"
+        },
+        "hover": {
+          "value": "{surface.muted}",
+          "type": "color",
+          "description": "Item background on hover"
+        },
+        "active": {
+          "value": "{surface.highlight}",
+          "type": "color",
+          "description": "Active item background"
+        }
+      },
+      "borderRadius": {
+        "value": "{radius.default}",
+        "type": "dimension",
+        "description": "Item border radius"
+      }
+    },
+    "icon": {
+      "size": {
+        "value": "16px",
+        "type": "dimension",
+        "description": "Icon size"
+      },
+      "color": {
+        "default": {
+          "value": "{text.muted}",
+          "type": "color",
+          "description": "Icon color"
+        },
+        "hover": {
+          "value": "{text.default}",
+          "type": "color",
+          "description": "Icon color on hover"
+        }
+      }
+    },
+    "submenu": {
+      "offset": {
+        "value": "2px",
+        "type": "dimension",
+        "description": "Submenu offset from parent"
+      }
+    },
+    "separator": {
+      "color": {
+        "value": "{border.subtle}",
+        "type": "color",
+        "description": "Separator color"
+      },
+      "margin": {
+        "value": "{stack.2xs}",
+        "type": "dimension",
+        "description": "Separator margin"
+      }
+    },
+    "transition": {
+      "duration": {
+        "value": "150ms",
+        "type": "duration",
+        "description": "Animation duration"
+      }
+    }
+  }
+}

package/src/components/TieredMenu/TieredMenu.vue

@@ -0,0 +1,288 @@
+<template>
+  <div
+    v-if="!popup || visible"
+    ref="menuRef"
+    class="tieredmenu"
+    :class="additionalClasses"
+    role="menu"
+    tabindex="-1"
+    @keydown="onKeydown"
+  >
+    <ul class="tieredmenu__list" role="none">
+      <template v-for="(item, index) in model" :key="item.key || index">
+        <!-- Separator -->
+        <li v-if="item.separator" class="tieredmenu__separator" role="separator"></li>
+
+        <!-- Menu Item -->
+        <li
+          v-else
+          class="tieredmenu__item"
+          :class="{
+            'tieredmenu__item--state-active': item.active,
+            'tieredmenu__item--state-disabled': item.disabled,
+            'tieredmenu__item--has-submenu': item.items && item.items.length > 0,
+            'tieredmenu__item--state-submenu-open': activeSubmenu === index
+          }"
+          role="none"
+          @mouseenter="onItemMouseEnter(index, item)"
+          @mouseleave="onItemMouseLeave"
+        >
+          <a
+            v-if="item.url"
+            :href="item.url"
+            :target="item.target"
+            class="tieredmenu__link"
+            role="menuitem"
+            :tabindex="item.disabled ? -1 : 0"
+            :aria-disabled="item.disabled || undefined"
+            :aria-haspopup="item.items && item.items.length > 0 ? 'true' : undefined"
+            :aria-expanded="item.items && item.items.length > 0 ? activeSubmenu === index : undefined"
+            @click="onItemClick($event, item)"
+            @keydown="onItemKeydown($event, index, item)"
+          >
+            <i v-if="item.icon" :class="item.icon" class="tieredmenu__icon"></i>
+            <span class="tieredmenu__label">{{ item.label }}</span>
+            <svg
+              v-if="item.items && item.items.length > 0"
+              class="tieredmenu__chevron"
+              viewBox="0 0 16 16"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+              aria-hidden="true"
+            >
+              <path
+                d="M6 4L10 8L6 12"
+                stroke="currentColor"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </a>
+          <button
+            v-else
+            type="button"
+            class="tieredmenu__link"
+            role="menuitem"
+            :tabindex="item.disabled ? -1 : 0"
+            :disabled="item.disabled"
+            :aria-haspopup="item.items && item.items.length > 0 ? 'true' : undefined"
+            :aria-expanded="item.items && item.items.length > 0 ? activeSubmenu === index : undefined"
+            @click="onItemClick($event, item)"
+            @keydown="onItemKeydown($event, index, item)"
+          >
+            <i v-if="item.icon" :class="item.icon" class="tieredmenu__icon"></i>
+            <span class="tieredmenu__label">{{ item.label }}</span>
+            <svg
+              v-if="item.items && item.items.length > 0"
+              class="tieredmenu__chevron"
+              viewBox="0 0 16 16"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+              aria-hidden="true"
+            >
+              <path
+                d="M6 4L10 8L6 12"
+                stroke="currentColor"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </button>
+
+          <!-- Submenu -->
+          <ul
+            v-if="item.items && item.items.length > 0"
+            class="tieredmenu__submenu"
+            :class="{ 'tieredmenu__submenu--state-visible': activeSubmenu === index }"
+            role="menu"
+          >
+            <TieredMenuSub
+              :items="item.items"
+              @item-click="onSubitemClick"
+            />
+          </ul>
+        </li>
+      </template>
+    </ul>
+  </div>
+</template>
+
+<style src="./TieredMenu.scss"></style>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted, watch } from "vue";
+import TieredMenuSub from "./TieredMenuSub.vue";
+
+const props = defineProps({
+  /**
+   * Array of menu items with nested items
+   */
+  model: {
+    type: Array,
+    default: () => [],
+    validator: (value) =>
+      value.every(
+        (item) =>
+          item.separator === true ||
+          (typeof item === "object" && (item.label !== undefined || item.icon !== undefined))
+      ),
+  },
+  /**
+   * Display as popup overlay
+   */
+  popup: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits<{
+  (e: "item-click", ...args: unknown[]): void;
+  (e: "show", ...args: unknown[]): void;
+  (e: "hide", ...args: unknown[]): void;
+}>();
+const menuRef = ref(null);
+const visible = ref(!props.popup);
+const activeSubmenu = ref(null);
+
+const additionalClasses = computed(() =>
+  [props.popup && "tieredmenu--mode-popup"].filter(Boolean).join(" ")
+);
+
+const show = (event) => {
+  if (props.popup) {
+    visible.value = true;
+    emit("show", event);
+
+    // Position the menu near the click/target
+    if (event && menuRef.value) {
+      const target = event.currentTarget || event.target;
+      if (target) {
+        const rect = target.getBoundingClientRect();
+        menuRef.value.style.top = `${rect.bottom + window.scrollY}px`;
+        menuRef.value.style.left = `${rect.left + window.scrollX}px`;
+      }
+    }
+  }
+};
+
+const hide = () => {
+  if (props.popup) {
+    visible.value = false;
+    activeSubmenu.value = null;
+    emit("hide");
+  }
+};
+
+const toggle = (event) => {
+  if (visible.value) {
+    hide();
+  } else {
+    show(event);
+  }
+};
+
+// Handle click outside
+const onClickOutside = (event) => {
+  if (props.popup && visible.value && menuRef.value && !menuRef.value.contains(event.target)) {
+    hide();
+  }
+};
+
+onMounted(() => {
+  if (props.popup) {
+    document.addEventListener("click", onClickOutside);
+  }
+});
+
+onUnmounted(() => {
+  document.removeEventListener("click", onClickOutside);
+});
+
+const onItemMouseEnter = (index, item) => {
+  if (!item.disabled && item.items && item.items.length > 0) {
+    activeSubmenu.value = index;
+  }
+};
+
+const onItemMouseLeave = () => {
+  // Delay to allow moving to submenu
+};
+
+const onItemClick = (event, item) => {
+  if (item.disabled) {
+    event.preventDefault();
+    return;
+  }
+
+  if (item.command) {
+    item.command({ originalEvent: event, item });
+  }
+
+  emit("item-click", { originalEvent: event, item });
+
+  // Close menu after click if no submenu
+  if (!item.items || item.items.length === 0) {
+    if (props.popup) {
+      hide();
+    }
+  }
+};
+
+const onSubitemClick = ({ originalEvent, item }) => {
+  emit("item-click", { originalEvent, item });
+
+  if (props.popup) {
+    hide();
+  }
+};
+
+const onItemKeydown = (event, index, item) => {
+  switch (event.key) {
+    case "ArrowRight":
+      event.preventDefault();
+      if (item.items && item.items.length > 0) {
+        activeSubmenu.value = index;
+      }
+      break;
+    case "ArrowLeft":
+      event.preventDefault();
+      activeSubmenu.value = null;
+      break;
+    case "ArrowDown":
+      event.preventDefault();
+      // Focus next item
+      break;
+    case "ArrowUp":
+      event.preventDefault();
+      // Focus previous item
+      break;
+    case "Escape":
+      event.preventDefault();
+      if (activeSubmenu.value !== null) {
+        activeSubmenu.value = null;
+      } else if (props.popup) {
+        hide();
+      }
+      break;
+    case "Enter":
+    case " ":
+      if (item.items && item.items.length > 0) {
+        event.preventDefault();
+        activeSubmenu.value = activeSubmenu.value === index ? null : index;
+      }
+      break;
+  }
+};
+
+const onKeydown = (event) => {
+  if (event.key === "Escape" && props.popup) {
+    hide();
+  }
+};
+
+// Expose methods for parent components
+defineExpose({ show, hide, toggle });
+</script>

package/src/components/TieredMenu/TieredMenuSub.vue

@@ -0,0 +1,133 @@
+<template>
+  <template v-for="(item, index) in items" :key="item.key || index">
+    <!-- Separator -->
+    <li v-if="item.separator" class="tieredmenu__separator" role="separator"></li>
+
+    <!-- Menu Item -->
+    <li
+      v-else
+      class="tieredmenu__item"
+      :class="{
+        'tieredmenu__item--state-active': item.active,
+        'tieredmenu__item--state-disabled': item.disabled,
+        'tieredmenu__item--has-submenu': item.items && item.items.length > 0,
+        'tieredmenu__item--state-submenu-open': activeSubmenu === index
+      }"
+      role="none"
+      @mouseenter="onItemMouseEnter(index, item)"
+      @mouseleave="onItemMouseLeave"
+    >
+      <a
+        v-if="item.url"
+        :href="item.url"
+        :target="item.target"
+        class="tieredmenu__link"
+        role="menuitem"
+        :tabindex="item.disabled ? -1 : 0"
+        :aria-disabled="item.disabled || undefined"
+        :aria-haspopup="item.items && item.items.length > 0 ? 'true' : undefined"
+        @click="onItemClick($event, item)"
+      >
+        <i v-if="item.icon" :class="item.icon" class="tieredmenu__icon"></i>
+        <span class="tieredmenu__label">{{ item.label }}</span>
+        <svg
+          v-if="item.items && item.items.length > 0"
+          class="tieredmenu__chevron"
+          viewBox="0 0 16 16"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          aria-hidden="true"
+        >
+          <path
+            d="M6 4L10 8L6 12"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+      </a>
+      <button
+        v-else
+        type="button"
+        class="tieredmenu__link"
+        role="menuitem"
+        :tabindex="item.disabled ? -1 : 0"
+        :disabled="item.disabled"
+        :aria-haspopup="item.items && item.items.length > 0 ? 'true' : undefined"
+        @click="onItemClick($event, item)"
+      >
+        <i v-if="item.icon" :class="item.icon" class="tieredmenu__icon"></i>
+        <span class="tieredmenu__label">{{ item.label }}</span>
+        <svg
+          v-if="item.items && item.items.length > 0"
+          class="tieredmenu__chevron"
+          viewBox="0 0 16 16"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          aria-hidden="true"
+        >
+          <path
+            d="M6 4L10 8L6 12"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+      </button>
+
+      <!-- Nested Submenu -->
+      <ul
+        v-if="item.items && item.items.length > 0"
+        class="tieredmenu__submenu"
+        :class="{ 'tieredmenu__submenu--state-visible': activeSubmenu === index }"
+        role="menu"
+      >
+        <TieredMenuSub
+          :items="item.items"
+          @item-click="$emit('item-click', $event)"
+        />
+      </ul>
+    </li>
+  </template>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+
+interface Props {
+  items?: unknown[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  items: () => [],
+});
+const emit = defineEmits<{
+  (e: "item-click", ...args: unknown[]): void;
+}>();
+const activeSubmenu = ref(null);
+
+const onItemMouseEnter = (index, item) => {
+  if (!item.disabled && item.items && item.items.length > 0) {
+    activeSubmenu.value = index;
+  }
+};
+
+const onItemMouseLeave = () => {
+  // Keep open while hovering submenu
+};
+
+const onItemClick = (event, item) => {
+  if (item.disabled) {
+    event.preventDefault();
+    return;
+  }
+
+  if (item.command) {
+    item.command({ originalEvent: event, item });
+  }
+
+  emit("item-click", { originalEvent: event, item });
+};
+</script>

package/src/components/Timeline/Timeline.matrix.ts

@@ -0,0 +1,19 @@
+import type { ComponentMatrix } from '../../types/matrix'
+
+export const matrix: ComponentMatrix = {
+  rootSelector: '.timeline',
+  baseQuery: {
+    value: '[{"status":"Ordered","date":"15/05","icon":"pi pi-shopping-cart","color":"#2a8a3a"},{"status":"Processing","date":"16/05","icon":"pi pi-cog"},{"status":"Shipped","date":"17/05","icon":"pi pi-shopping-bag"},{"status":"Delivered","date":"18/05","icon":"pi pi-check"}]'
+  },
+  variants: [
+    {
+      name: 'Layout',
+      subvariants: [
+        { name: 'vertical-left',   query: { layout: 'vertical', align: 'left' } },
+        { name: 'vertical-right',  query: { layout: 'vertical', align: 'right' } },
+        { name: 'vertical-alt',    query: { layout: 'vertical', align: 'alternate' } },
+        { name: 'horizontal',      query: { layout: 'horizontal' } }
+      ]
+    }
+  ]
+}