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

package/src/components/TieredMenu/TieredMenu.vue

@@ -0,0 +1,270 @@
+<template>
+  <div
+    v-if="!popup || visible"
+    ref="menuRef"
+    class="tieredmenu"
+    :class="additionalClasses"
+    role="menu"
+    tabindex="-1"
+    @keydown="onKeydown"
+  >
+    <ul class="tieredmenu__list">
+      <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--active': item.active,
+            'tieredmenu__item--disabled': item.disabled,
+            'tieredmenu__item--has-submenu': item.items && item.items.length > 0,
+            'tieredmenu__item--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--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 type { TieredMenuProps, TieredMenuEmits } from '../../types';
+import { ref, computed, onMounted, onUnmounted, watch } from "vue";
+import TieredMenuSub from "./TieredMenuSub.vue";
+
+defineOptions({ name: 'FtpTieredMenu' });
+
+const props = withDefaults(defineProps<TieredMenuProps>(), {
+  model: () => [],
+  popup: false,
+});
+
+const emit = defineEmits(["item-click", "show", "hide"]);
+
+const menuRef = ref<HTMLElement | null>(null);
+const visible = ref(!props.popup);
+const activeSubmenu = ref(null);
+
+const additionalClasses = computed(() =>
+  [props.popup && "tieredmenu--popup"].filter(Boolean).join(" ")
+);
+
+const show = (event: any) => {
+  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: Event) => {
+  if (visible.value) {
+    hide();
+  } else {
+    show(event);
+  }
+};
+
+// Handle click outside
+const onClickOutside = (event: MouseEvent) => {
+  if (props.popup && visible.value && menuRef.value && !menuRef.value.contains(event.target as Node)) {
+    hide();
+  }
+};
+
+onMounted(() => {
+  if (props.popup) {
+    document.addEventListener("click", onClickOutside);
+  }
+});
+
+onUnmounted(() => {
+  document.removeEventListener("click", onClickOutside);
+});
+
+const onItemMouseEnter = (index: any, item: any) => {
+  if (!item.disabled && item.items && item.items.length > 0) {
+    activeSubmenu.value = index;
+  }
+};
+
+const onItemMouseLeave = () => {
+  // Delay to allow moving to submenu
+};
+
+const onItemClick = (event: MouseEvent, item: any) => {
+  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 }: { originalEvent: any; item: any }) => {
+  emit("item-click", { originalEvent, item });
+
+  if (props.popup) {
+    hide();
+  }
+};
+
+const onItemKeydown = (event: KeyboardEvent, index: any, item: any) => {
+  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: KeyboardEvent) => {
+  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,132 @@
+<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--active': item.active,
+        'tieredmenu__item--disabled': item.disabled,
+        'tieredmenu__item--has-submenu': item.items && item.items.length > 0,
+        'tieredmenu__item--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--visible': activeSubmenu === index }"
+        role="menu"
+      >
+        <TieredMenuSub
+          :items="item.items"
+          @item-click="$emit('item-click', $event)"
+        />
+      </ul>
+    </li>
+  </template>
+</template>
+
+<script setup lang="ts">
+import type { TieredMenuSubProps, TieredMenuSubEmits } from '../../types';
+import { ref } from "vue";
+
+defineOptions({ name: 'FtpTieredMenuSub' });
+
+const props = withDefaults(defineProps<TieredMenuSubProps>(), {
+  items: () => [],
+});
+
+const emit = defineEmits(["item-click"]);
+
+const activeSubmenu = ref(null);
+
+const onItemMouseEnter = (index: any, item: any) => {
+  if (!item.disabled && item.items && item.items.length > 0) {
+    activeSubmenu.value = index;
+  }
+};
+
+const onItemMouseLeave = () => {
+  // Keep open while hovering submenu
+};
+
+const onItemClick = (event: MouseEvent, item: any) => {
+  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.scss

@@ -0,0 +1,190 @@
+@use "../../../dist/scss/tokens" as *;
+
+$c: timeline;
+
+.#{$c} {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+
+.#{$c}__item {
+  display: flex;
+  position: relative;
+  min-height: 70px;
+}
+
+.#{$c}__opposite {
+  flex: 1;
+  display: flex;
+  align-items: flex-start;
+  padding: var(--timeline-content-padding, $timeline-content-padding);
+}
+
+.#{$c}__separator {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex-shrink: 0;
+  position: relative;
+}
+
+.#{$c}__connector {
+  width: var(--timeline-line-width, $timeline-line-width);
+  background-color: var(--timeline-line-color, $timeline-line-color);
+  flex-grow: 1;
+}
+
+.#{$c}__connector--before {
+  min-height: 16px;
+}
+
+.#{$c}__connector--after {
+  min-height: 16px;
+}
+
+.#{$c}__marker {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--timeline-marker-ring-size, $timeline-marker-ring-size);
+  height: var(--timeline-marker-ring-size, $timeline-marker-ring-size);
+  border-radius: 50%;
+  background-color: var(--timeline-marker-ring-color, $timeline-marker-ring-color);
+  flex-shrink: 0;
+  z-index: 1;
+}
+
+.#{$c}__marker-dot {
+  width: var(--timeline-marker-size, $timeline-marker-size);
+  height: var(--timeline-marker-size, $timeline-marker-size);
+  border-radius: 50%;
+  background-color: var(--timeline-marker-color, var(--timeline-marker-background, $timeline-marker-background));
+  border: var(--timeline-marker-border-width, $timeline-marker-border-width) solid var(--timeline-marker-border-color, $timeline-marker-border-color);
+}
+
+.#{$c}__content {
+  flex: 1;
+  display: flex;
+  align-items: flex-start;
+  padding: var(--timeline-content-padding, $timeline-content-padding);
+}
+
+.#{$c}__event {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.#{$c}__title {
+  margin: 0;
+  font-size: var(--timeline-event-title-fontSize, $timeline-event-title-fontSize);
+  font-weight: var(--timeline-event-title-fontWeight, $timeline-event-title-fontWeight);
+  color: var(--timeline-event-title-color, $timeline-event-title-color);
+  line-height: 1.4;
+}
+
+.#{$c}__date {
+  font-size: var(--timeline-event-date-fontSize, $timeline-event-date-fontSize);
+  color: var(--timeline-event-date-color, $timeline-event-date-color);
+}
+
+.#{$c}__description {
+  margin: 0;
+  font-size: var(--timeline-event-description-fontSize, $timeline-event-description-fontSize);
+  color: var(--timeline-event-description-color, $timeline-event-description-color);
+  line-height: 1.5;
+}
+
+// Align left - content on right, opposite hidden
+.#{$c}--align-left {
+  .#{$c}__opposite {
+    display: none;
+  }
+
+  .#{$c}__content {
+    text-align: left;
+  }
+}
+
+// Align right - content on left, opposite hidden
+.#{$c}--align-right {
+  .#{$c}__item {
+    flex-direction: row-reverse;
+  }
+
+  .#{$c}__opposite {
+    display: none;
+  }
+
+  .#{$c}__content {
+    text-align: right;
+    justify-content: flex-end;
+  }
+}
+
+// Alternate - alternating sides
+.#{$c}--align-alternate {
+  .#{$c}__opposite {
+    display: flex;
+    justify-content: flex-end;
+    text-align: right;
+  }
+
+  .#{$c}__content {
+    text-align: left;
+  }
+
+  .#{$c}__item--right {
+    flex-direction: row-reverse;
+
+    .#{$c}__opposite {
+      justify-content: flex-start;
+      text-align: left;
+    }
+
+    .#{$c}__content {
+      text-align: right;
+      justify-content: flex-end;
+    }
+  }
+}
+
+// Horizontal layout
+.#{$c}--layout-horizontal {
+  flex-direction: row;
+  overflow-x: auto;
+
+  .#{$c}__item {
+    flex-direction: column;
+    min-width: 150px;
+    min-height: auto;
+  }
+
+  .#{$c}__separator {
+    flex-direction: row;
+    width: 100%;
+  }
+
+  .#{$c}__connector {
+    width: auto;
+    height: var(--timeline-line-width, $timeline-line-width);
+    flex-grow: 1;
+  }
+
+  .#{$c}__connector--before,
+  .#{$c}__connector--after {
+    min-height: auto;
+    min-width: 16px;
+  }
+
+  .#{$c}__opposite {
+    justify-content: center;
+    text-align: center;
+  }
+
+  .#{$c}__content {
+    justify-content: center;
+    text-align: center;
+  }
+}

package/src/components/Timeline/Timeline.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="timeline" :class="additionalClasses">
+    <div
+      v-for="(event, index) in value"
+      :key="index"
+      class="timeline__item"
+      :class="getItemClasses(index)"
+    >
+      <div class="timeline__opposite">
+        <slot name="opposite" :item="event" :index="index">
+          <span v-if="event.date" class="timeline__date">{{ event.date }}</span>
+        </slot>
+      </div>
+      <div class="timeline__separator">
+        <div class="timeline__connector timeline__connector--before" v-if="index > 0" />
+        <div class="timeline__marker" :style="getMarkerStyle(event)">
+          <slot name="marker" :item="event" :index="index">
+            <span class="timeline__marker-dot" />
+          </slot>
+        </div>
+        <div class="timeline__connector timeline__connector--after" v-if="index < value.length - 1" />
+      </div>
+      <div class="timeline__content">
+        <slot name="content" :item="event" :index="index">
+          <div class="timeline__event">
+            <h4 v-if="event.title" class="timeline__title">{{ event.title }}</h4>
+            <p v-if="event.description" class="timeline__description">{{ event.description }}</p>
+          </div>
+        </slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style src="./Timeline.scss"></style>
+
+<script setup lang="ts">
+import type { TimelineProps, TimelineEvent } from '../../types';
+import { computed } from "vue";
+
+defineOptions({ name: 'FtpTimeline' });
+
+const props = withDefaults(defineProps<TimelineProps>(), {
+  align: "left",
+  layout: "vertical",
+});
+
+const colorMap: Record<string, string> = {
+  primary: "var(--timeline-colors-primary)",
+  success: "var(--timeline-colors-success)",
+  warning: "var(--timeline-colors-warning)",
+  danger: "var(--timeline-colors-danger)",
+};
+
+function getMarkerStyle(event: TimelineEvent) {
+  if (event.color) {
+    const color = colorMap[event.color] || event.color;
+    return { "--timeline-marker-color": color };
+  }
+  return {};
+}
+
+function getItemClasses(index: any) {
+  const classes = [];
+  if (props.align === "alternate") {
+    classes.push(index % 2 === 0 ? "timeline__item--left" : "timeline__item--right");
+  }
+  return classes;
+}
+
+const additionalClasses = computed(() =>
+  [
+    `timeline--align-${props.align}`,
+    `timeline--layout-${props.layout}`,
+  ]
+    .filter(Boolean)
+    .join(" ")
+);
+</script>