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

package/src/components/Menu/Menu.vue

@@ -0,0 +1,221 @@
+<template>
+  <div
+    v-if="!popup || isVisible"
+    ref="menuRef"
+    class="menu"
+    :class="additionalClasses"
+    role="menu"
+    :style="popupStyle"
+  >
+    <ul class="menu__list">
+      <template v-for="(item, index) in model" :key="index">
+        <!-- Separator -->
+        <li v-if="item.separator" class="menu__separator" role="separator"></li>
+
+        <!-- Menu Item -->
+        <li
+          v-else
+          class="menu__item"
+          :class="{
+            'menu__item--disabled': item.disabled,
+          }"
+          role="menuitem"
+          :aria-disabled="item.disabled || undefined"
+          tabindex="0"
+          @click="onItemClick($event, item)"
+          @keydown.enter="onItemClick($event, item)"
+          @keydown.space.prevent="onItemClick($event, item)"
+        >
+          <i
+            v-if="item.icon"
+            :class="item.icon"
+            class="menu__item-icon"
+            aria-hidden="true"
+          ></i>
+          <span class="menu__item-label">{{ item.label }}</span>
+        </li>
+      </template>
+    </ul>
+  </div>
+</template>
+
+<style src="./Menu.scss"></style>
+
+<script setup lang="ts">
+import type { MenuProps, MenuEmits } from '../../types';
+import { computed, ref, onMounted, onBeforeUnmount, watch, nextTick } from "vue";
+
+defineOptions({ name: 'FtpMenu' });
+
+const props = withDefaults(defineProps<MenuProps>(), {
+  model: () => [],
+  popup: false,
+});
+
+const emit = defineEmits(["item-click", "show", "hide"]);
+
+const menuRef = ref<HTMLElement | null>(null);
+const isVisible = ref(false);
+const triggerElement = ref<HTMLElement | null>(null);
+const position = ref({ top: 0, left: 0 });
+const initialScrollY = ref(0);
+
+const additionalClasses = computed(() =>
+  [props.popup && "menu--popup", isVisible.value && "menu--visible"]
+    .filter(Boolean)
+    .join(" ")
+);
+
+const popupStyle = computed(() => {
+  if (!props.popup) return {};
+  return {
+    top: `${position.value.top}px`,
+    left: `${position.value.left}px`,
+  };
+});
+
+const onItemClick = (event: MouseEvent | KeyboardEvent, item: any) => {
+  if (item.disabled) return;
+
+  emit("item-click", {
+    originalEvent: event,
+    item,
+  });
+
+  if (typeof item.command === "function") {
+    item.command({
+      originalEvent: event,
+      item,
+    });
+  }
+
+  if (props.popup) {
+    hide();
+  }
+};
+
+const show = (event: any) => {
+  if (!props.popup) return;
+
+  triggerElement.value = event.currentTarget || event.target;
+  initialScrollY.value = window.scrollY;
+  calculatePosition(event);
+  isVisible.value = true;
+  emit("show");
+
+  nextTick(() => {
+    document.addEventListener("click", onDocumentClick);
+    document.addEventListener("keydown", onDocumentKeydown);
+    window.addEventListener("scroll", onWindowScroll, true);
+  });
+};
+
+const hide = () => {
+  if (!props.popup) return;
+
+  isVisible.value = false;
+  emit("hide");
+
+  document.removeEventListener("click", onDocumentClick);
+  document.removeEventListener("keydown", onDocumentKeydown);
+  window.removeEventListener("scroll", onWindowScroll, true);
+};
+
+const toggle = (event: Event) => {
+  if (isVisible.value) {
+    hide();
+  } else {
+    show(event);
+  }
+};
+
+const calculatePosition = (event: any) => {
+  const triggerRect = event.currentTarget?.getBoundingClientRect() || {
+    top: event.clientY ?? 0,
+    bottom: event.clientY ?? 0,
+    left: event.clientX ?? 0,
+    right: event.clientX ?? 0,
+  };
+
+  const padding = 8;
+  const gap = 4;
+
+  // Initial position: below trigger, left-aligned
+  let top = triggerRect.bottom + gap;
+  let left = triggerRect.left;
+
+  position.value = { top, left };
+
+  // Refine position after menu renders
+  nextTick(() => {
+    if (!menuRef.value) return;
+
+    const menuRect = menuRef.value.getBoundingClientRect();
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+
+    // Vertical positioning: prefer below, fall back to above
+    const spaceBelow = viewportHeight - triggerRect.bottom - padding;
+    const spaceAbove = triggerRect.top - padding;
+
+    if (menuRect.height <= spaceBelow) {
+      top = triggerRect.bottom + gap;
+    } else if (menuRect.height <= spaceAbove) {
+      top = triggerRect.top - menuRect.height - gap;
+    } else {
+      // Clamp to viewport
+      top = Math.max(padding, Math.min(triggerRect.bottom + gap, viewportHeight - menuRect.height - padding));
+    }
+
+    // Horizontal positioning: prefer left-aligned, fall back to right-aligned
+    const spaceRight = viewportWidth - triggerRect.left - padding;
+    const spaceLeft = triggerRect.right - padding;
+
+    if (menuRect.width <= spaceRight) {
+      left = triggerRect.left;
+    } else if (menuRect.width <= spaceLeft) {
+      left = triggerRect.right - menuRect.width;
+    } else {
+      // Clamp to viewport
+      left = Math.max(padding, Math.min(triggerRect.left, viewportWidth - menuRect.width - padding));
+    }
+
+    position.value = { top, left };
+  });
+};
+
+const onDocumentClick = (event: MouseEvent) => {
+  if (
+    menuRef.value &&
+    !menuRef.value.contains(event.target as Node) &&
+    triggerElement.value !== event.target &&
+    !triggerElement.value?.contains(event.target as Node)
+  ) {
+    hide();
+  }
+};
+
+const onDocumentKeydown = (event: KeyboardEvent) => {
+  if (event.key === "Escape") {
+    hide();
+  }
+};
+
+const onWindowScroll = () => {
+  if (Math.abs(window.scrollY - initialScrollY.value) > 15) {
+    hide();
+  }
+};
+
+onBeforeUnmount(() => {
+  document.removeEventListener("click", onDocumentClick);
+  document.removeEventListener("keydown", onDocumentKeydown);
+  window.removeEventListener("scroll", onWindowScroll, true);
+});
+
+defineExpose({
+  show,
+  hide,
+  toggle,
+});
+</script>

package/src/components/MenuBar/MenuBar.scss

@@ -0,0 +1,208 @@
+@use "../../../dist/scss/tokens" as *;
+
+$c: menubar;
+
+.#{$c} {
+  display: flex;
+  align-items: center;
+  background-color: var(--menubar-background, $menubar-background);
+  padding: var(--menubar-padding, $menubar-padding);
+  border: var(--menubar-border-width, $menubar-border-width) solid var(--menubar-border-color, $menubar-border-color);
+  border-radius: var(--menubar-border-radius, $menubar-border-radius);
+}
+
+.#{$c}__list {
+  display: flex;
+  align-items: center;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  gap: var(--menubar-item-gap, 2px);
+}
+
+.#{$c}__item {
+  position: relative;
+}
+
+.#{$c}__link {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--menubar-item-gap, $menubar-item-gap);
+  padding: var(--menubar-item-padding, $menubar-item-padding);
+  background-color: var(--menubar-item-background-default, $menubar-item-background-default);
+  color: var(--menubar-item-color-default, $menubar-item-color-default);
+  border: none;
+  border-radius: var(--menubar-item-borderRadius, $menubar-item-borderRadius);
+  text-decoration: none;
+  font-family: inherit;
+  font-size: inherit;
+  cursor: pointer;
+  transition: background-color var(--menubar-transition-duration, $menubar-transition-duration) ease,
+              color var(--menubar-transition-duration, $menubar-transition-duration) ease;
+
+  &:hover {
+    background-color: var(--menubar-item-background-hover, $menubar-item-background-hover);
+    color: var(--menubar-item-color-hover, $menubar-item-color-hover);
+
+    .#{$c}__icon {
+      color: var(--menubar-icon-color-hover, $menubar-icon-color-hover);
+    }
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--menubar-item-color-active, $menubar-item-color-active);
+    outline-offset: 2px;
+  }
+
+  &:disabled,
+  &[aria-disabled="true"] {
+    cursor: not-allowed;
+    color: var(--menubar-item-color-disabled, $menubar-item-color-disabled);
+    pointer-events: none;
+  }
+}
+
+.#{$c}__item--active > .#{$c}__link {
+  background-color: var(--menubar-item-background-active, $menubar-item-background-active);
+  color: var(--menubar-item-color-active, $menubar-item-color-active);
+}
+
+.#{$c}__item--disabled > .#{$c}__link {
+  cursor: not-allowed;
+  color: var(--menubar-item-color-disabled, $menubar-item-color-disabled);
+  pointer-events: none;
+}
+
+.#{$c}__icon {
+  width: var(--menubar-icon-size, $menubar-icon-size);
+  height: var(--menubar-icon-size, $menubar-icon-size);
+  color: var(--menubar-icon-color-default, $menubar-icon-color-default);
+  flex-shrink: 0;
+  transition: color var(--menubar-transition-duration, $menubar-transition-duration) ease;
+}
+
+.#{$c}__label {
+  white-space: nowrap;
+}
+
+.#{$c}__submenu-icon {
+  width: 12px;
+  height: 12px;
+  margin-left: auto;
+  flex-shrink: 0;
+  opacity: 0.6;
+}
+
+.#{$c}__chevron-right {
+  width: 12px;
+  height: 12px;
+  margin-left: auto;
+  flex-shrink: 0;
+  opacity: 0.6;
+}
+
+// Submenu (dropdown)
+.#{$c}__submenu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  min-width: var(--menubar-submenu-minWidth, $menubar-submenu-minWidth);
+  margin: 0;
+  padding: var(--menubar-submenu-padding, $menubar-submenu-padding);
+  list-style: none;
+  background-color: var(--menubar-submenu-background, $menubar-submenu-background);
+  border-radius: var(--menubar-submenu-borderRadius, $menubar-submenu-borderRadius);
+  box-shadow: var(--menubar-submenu-shadow, $menubar-submenu-shadow);
+  z-index: 1000;
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(-4px);
+  transition: opacity var(--menubar-transition-duration, $menubar-transition-duration) ease,
+              visibility var(--menubar-transition-duration, $menubar-transition-duration) ease,
+              transform var(--menubar-transition-duration, $menubar-transition-duration) ease;
+}
+
+.#{$c}__submenu--visible {
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0);
+}
+
+.#{$c}__submenu--nested {
+  top: 0;
+  left: 100%;
+  margin-left: 2px;
+}
+
+.#{$c}__submenu-item {
+  position: relative;
+}
+
+.#{$c}__submenu-link {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  gap: var(--menubar-item-gap, $menubar-item-gap);
+  padding: var(--menubar-item-padding, $menubar-item-padding);
+  background-color: transparent;
+  color: var(--menubar-item-color-default, $menubar-item-color-default);
+  border: none;
+  border-radius: var(--menubar-item-borderRadius, $menubar-item-borderRadius);
+  text-decoration: none;
+  font-family: inherit;
+  font-size: inherit;
+  text-align: left;
+  cursor: pointer;
+  transition: background-color var(--menubar-transition-duration, $menubar-transition-duration) ease,
+              color var(--menubar-transition-duration, $menubar-transition-duration) ease;
+
+  &:hover {
+    background-color: var(--menubar-item-background-hover, $menubar-item-background-hover);
+    color: var(--menubar-item-color-hover, $menubar-item-color-hover);
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--menubar-item-color-active, $menubar-item-color-active);
+    outline-offset: -2px;
+  }
+
+  &:disabled,
+  &[aria-disabled="true"] {
+    cursor: not-allowed;
+    color: var(--menubar-item-color-disabled, $menubar-item-color-disabled);
+    pointer-events: none;
+  }
+}
+
+.#{$c}__submenu-item--disabled > .#{$c}__submenu-link {
+  cursor: not-allowed;
+  color: var(--menubar-item-color-disabled, $menubar-item-color-disabled);
+  pointer-events: none;
+}
+
+.#{$c}__submenu-item--has-submenu:hover > .#{$c}__submenu.#{$c}__submenu--nested {
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0);
+}
+
+// Separator
+.#{$c}__separator {
+  height: 1px;
+  margin: var(--menubar-separator-margin, $menubar-separator-margin) 0;
+  background-color: var(--menubar-separator-color, $menubar-separator-color);
+}
+
+.#{$c}__list > .#{$c}__separator {
+  width: 1px;
+  height: 20px;
+  margin: 0 var(--menubar-separator-margin, $menubar-separator-margin);
+}