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

package/src/components/PanelMenu/PanelMenu.vue

@@ -0,0 +1,295 @@
+<template>
+  <div class="panelmenu">
+    <div
+      v-for="(panel, panelIndex) in model"
+      :key="panel.key || panelIndex"
+      class="panelmenu__panel"
+      :class="{
+        'panelmenu__panel--expanded': isExpanded(panelIndex),
+        'panelmenu__panel--disabled': panel.disabled
+      }"
+    >
+      <!-- Panel Header -->
+      <button
+        type="button"
+        class="panelmenu__header"
+        :disabled="panel.disabled"
+        :aria-expanded="isExpanded(panelIndex)"
+        :aria-controls="`panelmenu-content-${panelIndex}`"
+        @click="togglePanel(panelIndex, panel)"
+        @keydown="onHeaderKeydown($event, panelIndex)"
+      >
+        <i v-if="panel.icon" :class="panel.icon" class="panelmenu__header-icon"></i>
+        <span class="panelmenu__header-text">{{ panel.label }}</span>
+        <svg
+          class="panelmenu__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>
+
+      <!-- Panel Content -->
+      <div
+        :id="`panelmenu-content-${panelIndex}`"
+        class="panelmenu__content-wrapper"
+        role="region"
+        :aria-labelledby="`panelmenu-header-${panelIndex}`"
+      >
+        <div class="panelmenu__content">
+          <ul class="panelmenu__list" role="menu">
+            <template v-for="(item, itemIndex) in panel.items" :key="item.key || itemIndex">
+              <!-- Separator -->
+              <li v-if="item.separator" class="panelmenu__separator" role="separator"></li>
+
+              <!-- Menu Item -->
+              <li
+                v-else
+                class="panelmenu__item"
+                :class="{
+                  'panelmenu__item--active': item.active,
+                  'panelmenu__item--disabled': item.disabled,
+                  'panelmenu__item--has-submenu': item.items && item.items.length > 0,
+                  'panelmenu__item--expanded': isSubmenuExpanded(panelIndex, itemIndex)
+                }"
+                role="none"
+              >
+                <a
+                  v-if="item.url"
+                  :href="item.url"
+                  :target="item.target"
+                  class="panelmenu__link"
+                  role="menuitem"
+                  :tabindex="item.disabled ? -1 : 0"
+                  :aria-disabled="item.disabled || undefined"
+                  @click="onItemClick($event, item, panelIndex, itemIndex)"
+                >
+                  <i v-if="item.icon" :class="item.icon" class="panelmenu__icon"></i>
+                  <span class="panelmenu__label">{{ item.label }}</span>
+                </a>
+                <button
+                  v-else
+                  type="button"
+                  class="panelmenu__link"
+                  role="menuitem"
+                  :tabindex="item.disabled ? -1 : 0"
+                  :disabled="item.disabled"
+                  :aria-expanded="item.items && item.items.length > 0 ? isSubmenuExpanded(panelIndex, itemIndex) : undefined"
+                  @click="onItemClick($event, item, panelIndex, itemIndex)"
+                >
+                  <i v-if="item.icon" :class="item.icon" class="panelmenu__icon"></i>
+                  <span class="panelmenu__label">{{ item.label }}</span>
+                  <svg
+                    v-if="item.items && item.items.length > 0"
+                    class="panelmenu__submenu-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="panelmenu__submenu"
+                  role="menu"
+                >
+                  <template v-for="(subitem, subitemIndex) in item.items" :key="subitem.key || subitemIndex">
+                    <li v-if="subitem.separator" class="panelmenu__separator" role="separator"></li>
+                    <li
+                      v-else
+                      class="panelmenu__item panelmenu__item--nested"
+                      :class="{
+                        'panelmenu__item--active': subitem.active,
+                        'panelmenu__item--disabled': subitem.disabled
+                      }"
+                      role="none"
+                    >
+                      <a
+                        v-if="subitem.url"
+                        :href="subitem.url"
+                        :target="subitem.target"
+                        class="panelmenu__link"
+                        role="menuitem"
+                        :tabindex="subitem.disabled ? -1 : 0"
+                        :aria-disabled="subitem.disabled || undefined"
+                        @click="onSubitemClick($event, subitem)"
+                      >
+                        <i v-if="subitem.icon" :class="subitem.icon" class="panelmenu__icon"></i>
+                        <span class="panelmenu__label">{{ subitem.label }}</span>
+                      </a>
+                      <button
+                        v-else
+                        type="button"
+                        class="panelmenu__link"
+                        role="menuitem"
+                        :tabindex="subitem.disabled ? -1 : 0"
+                        :disabled="subitem.disabled"
+                        @click="onSubitemClick($event, subitem)"
+                      >
+                        <i v-if="subitem.icon" :class="subitem.icon" class="panelmenu__icon"></i>
+                        <span class="panelmenu__label">{{ subitem.label }}</span>
+                      </button>
+                    </li>
+                  </template>
+                </ul>
+              </li>
+            </template>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style src="./PanelMenu.scss"></style>
+
+<script setup lang="ts">
+import type { PanelMenuProps, PanelMenuEmits } from '../../types';
+import { ref, computed, watch } from "vue";
+
+defineOptions({ name: 'FtpPanelMenu' });
+
+const props = withDefaults(defineProps<PanelMenuProps>(), {
+  model: () => [],
+  expandedKeys: () => ({}),
+  multiple: false,
+});
+
+const emit = defineEmits(["update:expandedKeys", "panel-open", "panel-close", "item-click"]);
+
+// Internal state
+const internalExpandedKeys = ref<Record<string, boolean>>({ ...props.expandedKeys });
+const expandedSubmenus = ref<Record<string, boolean>>({});
+
+// Watch for external changes
+watch(
+  () => props.expandedKeys,
+  (newVal) => {
+    internalExpandedKeys.value = { ...newVal };
+  },
+  { deep: true }
+);
+
+const isExpanded = (panelIndex: any) => {
+  return internalExpandedKeys.value[panelIndex] === true;
+};
+
+const isSubmenuExpanded = (panelIndex: any, itemIndex: any) => {
+  const key = `${panelIndex}-${itemIndex}`;
+  return expandedSubmenus.value[key] === true;
+};
+
+const togglePanel = (panelIndex: any, panel: any) => {
+  if (panel.disabled) return;
+
+  const wasExpanded = isExpanded(panelIndex);
+
+  if (props.multiple) {
+    internalExpandedKeys.value = {
+      ...internalExpandedKeys.value,
+      [panelIndex]: !wasExpanded,
+    };
+  } else {
+    // Close all panels except the clicked one
+    const newKeys: Record<string, boolean> = {};
+    if (!wasExpanded) {
+      newKeys[panelIndex] = true;
+    }
+    internalExpandedKeys.value = newKeys;
+  }
+
+  emit("update:expandedKeys", { ...internalExpandedKeys.value });
+
+  if (wasExpanded) {
+    emit("panel-close", { index: panelIndex, panel });
+  } else {
+    emit("panel-open", { index: panelIndex, panel });
+  }
+};
+
+const toggleSubmenu = (panelIndex: any, itemIndex: any) => {
+  const key = `${panelIndex}-${itemIndex}`;
+  expandedSubmenus.value = {
+    ...expandedSubmenus.value,
+    [key]: !expandedSubmenus.value[key],
+  };
+};
+
+const onItemClick = (event: MouseEvent, item: any, panelIndex: any, itemIndex: any) => {
+  if (item.disabled) {
+    event.preventDefault();
+    return;
+  }
+
+  // Toggle submenu if item has children
+  if (item.items && item.items.length > 0) {
+    event.preventDefault();
+    toggleSubmenu(panelIndex, itemIndex);
+    return;
+  }
+
+  if (item.command) {
+    item.command({ originalEvent: event, item });
+  }
+
+  emit("item-click", { originalEvent: event, item });
+};
+
+const onSubitemClick = (event: MouseEvent, item: any) => {
+  if (item.disabled) {
+    event.preventDefault();
+    return;
+  }
+
+  if (item.command) {
+    item.command({ originalEvent: event, item });
+  }
+
+  emit("item-click", { originalEvent: event, item });
+};
+
+const onHeaderKeydown = (event: KeyboardEvent, panelIndex: any) => {
+  switch (event.key) {
+    case "ArrowDown":
+      event.preventDefault();
+      // Focus next panel header or first item
+      break;
+    case "ArrowUp":
+      event.preventDefault();
+      // Focus previous panel header
+      break;
+    case "Home":
+      event.preventDefault();
+      // Focus first panel header
+      break;
+    case "End":
+      event.preventDefault();
+      // Focus last panel header
+      break;
+    case "Enter":
+    case " ":
+      event.preventDefault();
+      togglePanel(panelIndex, props.model[panelIndex]);
+      break;
+  }
+};
+</script>

package/src/components/ParticleBackground/ParticleBackground.vue

@@ -0,0 +1,310 @@
+<template>
+  <canvas
+    ref="canvasRef"
+    class="particle-background"
+    :class="{ 'particle-background--fixed': fixed }"
+  />
+</template>
+
+<script setup lang="ts">
+import type { ParticleBackgroundProps } from '../../types';
+import { ref, onMounted, onUnmounted, watch, nextTick } from "vue";
+
+defineOptions({ name: 'FtpParticleBackground' });
+
+const props = withDefaults(defineProps<ParticleBackgroundProps>(), {
+  particleCount: 150,
+  staticStarCount: 300,
+  clusterCount: 8,
+  starsPerCluster: 15,
+  particleColor: "rgba(255, 255, 255, 0.8)",
+  minSize: 0.5,
+  maxSize: 2,
+  speed: 0.2,
+  twinkle: true,
+  parallax: false,
+  fixed: false,
+});
+
+const canvasRef = ref<HTMLCanvasElement | null>(null);
+let ctx: CanvasRenderingContext2D | null = null;
+let particles: Particle[] = [];
+let staticStars: StaticStar[] = [];
+let animationId: number | null = null;
+let mouseX = 0;
+let mouseY = 0;
+
+// Static star - doesn't move, only ~10% twinkle
+class StaticStar {
+  canvas: any; x: number; y: number; size: number; opacity: number;
+  doesTwinkle: boolean; twinkleSpeed: number; twinklePhase: number; currentOpacity: number;
+  constructor(canvas: any, x: number | null = null, y: number | null = null, sizeMultiplier = 1) {
+    this.canvas = canvas;
+    // Allow preset position for clusters
+    this.x = x !== null ? x : Math.random() * canvas.width;
+    this.y = y !== null ? y : Math.random() * canvas.height;
+    // Static stars are generally smaller
+    const baseSize = props.minSize + Math.random() * (props.maxSize - props.minSize) * 0.7;
+    this.size = baseSize * sizeMultiplier;
+    this.opacity = 0.2 + Math.random() * 0.6;
+    // Only ~10% of stars twinkle
+    this.doesTwinkle = Math.random() < 0.1;
+    this.twinkleSpeed = 0.003 + Math.random() * 0.006;
+    this.twinklePhase = Math.random() * Math.PI * 2;
+    this.currentOpacity = this.opacity;
+  }
+
+  update(deltaTime: any) {
+    if (this.doesTwinkle && props.twinkle) {
+      this.twinklePhase += this.twinkleSpeed * deltaTime;
+      this.currentOpacity = this.opacity * (0.6 + 0.4 * Math.sin(this.twinklePhase));
+    }
+  }
+
+  draw(ctx: any) {
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
+    ctx!.fillStyle = props.particleColor.replace(
+      /[\d.]+\)$/,
+      `${this.currentOpacity})`
+    );
+    ctx.fill();
+  }
+}
+
+// Moving particle
+class Particle {
+  canvas: any; x: number = 0; y: number = 0; size: number = 0; speedX: number = 0; speedY: number = 0;
+  opacity: number = 0; twinkleSpeed: number = 0; twinklePhase: number = 0; depth: number = 0; currentOpacity: number = 0;
+  constructor(canvas: any) {
+    this.canvas = canvas;
+    this.reset();
+  }
+
+  reset() {
+    this.x = Math.random() * this.canvas.width;
+    this.y = Math.random() * this.canvas.height;
+    this.size = props.minSize + Math.random() * (props.maxSize - props.minSize);
+    this.speedX = (Math.random() - 0.5) * props.speed;
+    this.speedY = (Math.random() - 0.5) * props.speed;
+    this.opacity = 0.3 + Math.random() * 0.7;
+    this.twinkleSpeed = 0.005 + Math.random() * 0.01;
+    this.twinklePhase = Math.random() * Math.PI * 2;
+    // Depth for parallax (0 = far, 1 = close)
+    this.depth = Math.random();
+  }
+
+  update(deltaTime: any) {
+    // Movement
+    this.x += this.speedX * deltaTime;
+    this.y += this.speedY * deltaTime;
+
+    // Wrap around edges
+    if (this.x < 0) this.x = this.canvas.width;
+    if (this.x > this.canvas.width) this.x = 0;
+    if (this.y < 0) this.y = this.canvas.height;
+    if (this.y > this.canvas.height) this.y = 0;
+
+    // Twinkle effect
+    if (props.twinkle) {
+      this.twinklePhase += this.twinkleSpeed * deltaTime;
+      this.currentOpacity = this.opacity * (0.5 + 0.5 * Math.sin(this.twinklePhase));
+    } else {
+      this.currentOpacity = this.opacity;
+    }
+  }
+
+  draw(ctx: any, offsetX = 0, offsetY = 0) {
+    const parallaxMultiplier = props.parallax ? this.depth * 0.02 : 0;
+    const drawX = this.x + offsetX * parallaxMultiplier;
+    const drawY = this.y + offsetY * parallaxMultiplier;
+
+    ctx.beginPath();
+    ctx.arc(drawX, drawY, this.size, 0, Math.PI * 2);
+    ctx.fillStyle = props.particleColor.replace(
+      /[\d.]+\)$/,
+      `${this.currentOpacity})`
+    );
+    ctx.fill();
+
+    // Add subtle glow for larger particles
+    if (this.size > 1.2) {
+      ctx.beginPath();
+      ctx.arc(drawX, drawY, this.size * 2, 0, Math.PI * 2);
+      const gradient = ctx.createRadialGradient(
+        drawX, drawY, 0,
+        drawX, drawY, this.size * 2
+      );
+      gradient.addColorStop(0, props.particleColor.replace(/[\d.]+\)$/, `${this.currentOpacity * 0.3})`));
+      gradient.addColorStop(1, "transparent");
+      ctx.fillStyle = gradient;
+      ctx.fill();
+    }
+  }
+}
+
+function initParticles() {
+  const canvas = canvasRef.value;
+  if (!canvas) return;
+
+  // Initialize moving particles
+  particles = [];
+  for (let i = 0; i < props.particleCount; i++) {
+    particles.push(new Particle(canvas));
+  }
+
+  // Initialize static stars
+  staticStars = [];
+
+  // Random scattered static stars
+  for (let i = 0; i < props.staticStarCount; i++) {
+    staticStars.push(new StaticStar(canvas));
+  }
+
+  // Create star clusters
+  for (let c = 0; c < props.clusterCount; c++) {
+    // Random cluster center
+    const clusterX = Math.random() * canvas.width;
+    const clusterY = Math.random() * canvas.height;
+    // Cluster radius varies
+    const clusterRadius = 30 + Math.random() * 80;
+    // Number of stars in this cluster
+    const starCount = Math.floor(props.starsPerCluster * (0.5 + Math.random()));
+
+    for (let i = 0; i < starCount; i++) {
+      // Gaussian-like distribution for more stars near center
+      const angle = Math.random() * Math.PI * 2;
+      const distance = Math.random() * Math.random() * clusterRadius; // Squared for density toward center
+      const x = clusterX + Math.cos(angle) * distance;
+      const y = clusterY + Math.sin(angle) * distance;
+
+      // Stars near cluster center can be slightly larger
+      const sizeMultiplier = 0.6 + (1 - distance / clusterRadius) * 0.6;
+
+      staticStars.push(new StaticStar(canvas, x, y, sizeMultiplier));
+    }
+  }
+}
+
+function resizeCanvas() {
+  const canvas = canvasRef.value;
+  if (!canvas) return;
+
+  const rect = canvas.getBoundingClientRect();
+
+  // If canvas has no dimensions yet, retry after a frame
+  if (rect.width === 0 || rect.height === 0) {
+    requestAnimationFrame(resizeCanvas);
+    return;
+  }
+
+  const dpr = window.devicePixelRatio || 1;
+
+  canvas.width = rect.width * dpr;
+  canvas.height = rect.height * dpr;
+
+  ctx = canvas.getContext("2d");
+  ctx!.scale(dpr, dpr);
+
+  // Reinitialize particles with new dimensions
+  initParticles();
+}
+
+let lastTime = 0;
+function animate(currentTime: any) {
+  const deltaTime = lastTime ? (currentTime - lastTime) / 16.67 : 1; // Normalize to ~60fps
+  lastTime = currentTime;
+
+  const canvas = canvasRef.value;
+  if (!canvas || !ctx) return;
+
+  const rect = canvas.getBoundingClientRect();
+
+  // Clear canvas
+  ctx!.clearRect(0, 0, rect.width, rect.height);
+
+  // Calculate parallax offset
+  const offsetX = props.parallax ? (mouseX - rect.width / 2) : 0;
+  const offsetY = props.parallax ? (mouseY - rect.height / 2) : 0;
+
+  // Draw static stars first (background layer)
+  for (const star of staticStars) {
+    star.update(deltaTime);
+    star.draw(ctx);
+  }
+
+  // Update and draw moving particles (foreground layer)
+  for (const particle of particles) {
+    particle.update(deltaTime);
+    particle.draw(ctx, offsetX, offsetY);
+  }
+
+  animationId = requestAnimationFrame(animate);
+}
+
+function handleMouseMove(e: MouseEvent) {
+  if (!props.parallax) return;
+  const canvas = canvasRef.value;
+  if (!canvas) return;
+
+  const rect = canvas.getBoundingClientRect();
+  mouseX = e.clientX - rect.left;
+  mouseY = e.clientY - rect.top;
+}
+
+function handleResize() {
+  resizeCanvas();
+}
+
+onMounted(async () => {
+  // Wait for layout to complete before measuring canvas
+  await nextTick();
+
+  // Additional delay to ensure CSS has been applied
+  requestAnimationFrame(() => {
+    resizeCanvas();
+    animationId = requestAnimationFrame(animate);
+  });
+
+  window.addEventListener("resize", handleResize);
+  if (props.parallax) {
+    window.addEventListener("mousemove", handleMouseMove);
+  }
+});
+
+onUnmounted(() => {
+  if (animationId) {
+    cancelAnimationFrame(animationId);
+  }
+  window.removeEventListener("resize", handleResize);
+  window.removeEventListener("mousemove", handleMouseMove);
+});
+
+// Watch for prop changes
+watch(() => props.particleCount, initParticles);
+watch(() => props.parallax, (newVal) => {
+  if (newVal) {
+    window.addEventListener("mousemove", handleMouseMove);
+  } else {
+    window.removeEventListener("mousemove", handleMouseMove);
+  }
+});
+</script>
+
+<style>
+.particle-background {
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+
+.particle-background--fixed {
+  position: fixed;
+  inset: 0;
+  z-index: 0;
+}
+</style>