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

package/src/components/OrganizationChart/OrganizationChart.vue

@@ -0,0 +1,220 @@
+<template>
+  <div class="organization-chart">
+    <OrganizationChartNode
+      v-if="value"
+      :node="value"
+      :selection-mode="selectionMode"
+      :selected-keys="selectedKeys"
+      :expanded-keys="internalExpandedKeys"
+      @node-select="onNodeSelect"
+      @node-toggle="onNodeToggle"
+    >
+      <template #default="{ node }">
+        <slot :node="node">
+          <div class="organization-chart__node-content">
+            <div v-if="node.label" class="organization-chart__node-title">
+              {{ node.label }}
+            </div>
+            <div v-if="node.type" class="organization-chart__node-subtitle">
+              {{ node.type }}
+            </div>
+          </div>
+        </slot>
+      </template>
+    </OrganizationChartNode>
+  </div>
+</template>
+
+<style src="./OrganizationChart.scss"></style>
+
+<script setup lang="ts">
+import type { OrganizationChartProps, OrganizationChartEmits } from '../../types';
+import { ref, watch, h, defineComponent } from "vue";
+
+const props = withDefaults(defineProps<OrganizationChartProps>(), {
+  value: null,
+  selectionMode: undefined,
+  selectedKeys: () => ({}),
+  expandedKeys: () => ({}),
+  collapsible: false,
+});
+
+const emit = defineEmits([
+  "update:selectedKeys",
+  "update:expandedKeys",
+  "node-select",
+  "node-unselect",
+  "node-expand",
+  "node-collapse",
+]);
+
+defineOptions({
+  name: "FtpOrganizationChart",
+});
+
+const internalExpandedKeys = ref({ ...props.expandedKeys });
+
+watch(
+  () => props.expandedKeys,
+  (val) => {
+    internalExpandedKeys.value = { ...val };
+  },
+  { deep: true }
+);
+
+const onNodeSelect = (event: any) => {
+  const { node, selected } = event;
+  const key = node.key || node.label;
+  const newSelectedKeys = { ...props.selectedKeys };
+
+  if (props.selectionMode === "single") {
+    Object.keys(newSelectedKeys).forEach((k) => delete newSelectedKeys[k]);
+  }
+
+  if (selected) {
+    newSelectedKeys[key] = true;
+    emit("node-select", { node });
+  } else {
+    delete newSelectedKeys[key];
+    emit("node-unselect", { node });
+  }
+
+  emit("update:selectedKeys", newSelectedKeys);
+};
+
+const onNodeToggle = (event: any) => {
+  const { node, expanded } = event;
+  const key = node.key || node.label;
+  const newExpandedKeys = { ...internalExpandedKeys.value };
+
+  if (expanded) {
+    newExpandedKeys[key] = true;
+    emit("node-expand", { node });
+  } else {
+    delete newExpandedKeys[key];
+    emit("node-collapse", { node });
+  }
+
+  internalExpandedKeys.value = newExpandedKeys;
+  emit("update:expandedKeys", newExpandedKeys);
+};
+
+// Internal recursive node component
+const OrganizationChartNode = defineComponent({
+  name: "OrganizationChartNode",
+  props: {
+    node: Object,
+    selectionMode: String,
+    selectedKeys: Object,
+    expandedKeys: Object,
+  },
+  emits: ["node-select", "node-toggle"],
+  setup(nodeProps, { emit: nodeEmit, slots }) {
+    const hasChildren = () =>
+      nodeProps.node!.children && nodeProps.node!.children.length > 0;
+
+    const isExpanded = () => {
+      const key = nodeProps.node!.key || nodeProps.node!.label;
+      return nodeProps.expandedKeys![key] !== false;
+    };
+
+    const isSelected = () => {
+      const key = nodeProps.node!.key || nodeProps.node!.label;
+      return !!nodeProps.selectedKeys![key];
+    };
+
+    const onNodeClick = () => {
+      if (nodeProps.selectionMode) {
+        nodeEmit("node-select", {
+          node: nodeProps.node!,
+          selected: !isSelected(),
+        });
+      }
+    };
+
+    const onToggleClick = (e: MouseEvent) => {
+      e.stopPropagation();
+      nodeEmit("node-toggle", {
+        node: nodeProps.node!,
+        expanded: !isExpanded(),
+      });
+    };
+
+    return () => {
+      const nodeClasses = [
+        "organization-chart__node-wrapper",
+        isSelected() && "organization-chart__node-wrapper--selected",
+      ]
+        .filter(Boolean)
+        .join(" ");
+
+      const nodeBox = h(
+        "div",
+        {
+          class: [
+            "organization-chart__node",
+            isSelected() && "organization-chart__node--selected",
+            nodeProps.selectionMode && "organization-chart__node--selectable",
+          ]
+            .filter(Boolean)
+            .join(" "),
+          onClick: onNodeClick,
+        },
+        [
+          slots.default
+            ? slots.default({ node: nodeProps.node! })
+            : h("span", nodeProps.node!.label),
+        ]
+      );
+
+      const toggleButton =
+        hasChildren() &&
+        h(
+          "button",
+          {
+            class: "organization-chart__toggle",
+            onClick: onToggleClick,
+            "aria-label": isExpanded() ? "Collapse" : "Expand",
+          },
+          [
+            h(
+              "svg",
+              {
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                "stroke-width": "2",
+              },
+              [
+                h("polyline", {
+                  points: isExpanded() ? "18 15 12 9 6 15" : "6 9 12 15 18 9",
+                }),
+              ]
+            ),
+          ]
+        );
+
+      const children =
+        hasChildren() &&
+        isExpanded() &&
+        h(
+          "div",
+          { class: "organization-chart__children" },
+          nodeProps.node!.children.map((child: any, index: any) =>
+            h(OrganizationChartNode, {
+              key: child.key || index,
+              node: child,
+              selectionMode: nodeProps.selectionMode,
+              selectedKeys: nodeProps.selectedKeys!,
+              expandedKeys: nodeProps.expandedKeys!,
+              "onNode-select": (e) => nodeEmit("node-select", e),
+              "onNode-toggle": (e) => nodeEmit("node-toggle", e),
+            })
+          )
+        );
+
+      return h("div", { class: nodeClasses }, [nodeBox, toggleButton, children]);
+    };
+  },
+});
+</script>

package/src/components/OverlayPanel/OverlayPanel.scss

@@ -0,0 +1,69 @@
+@use "../../../dist/scss/tokens" as *;
+@use "../../scss/mixins/elevation" as *;
+
+$c: overlay-panel;
+
+.#{$c} {
+  @include elevation(3);
+  position: fixed;
+  z-index: var(--overlayPanel-zIndex, $overlayPanel-zIndex);
+  padding: var(--overlayPanel-padding-y, $overlayPanel-padding-y) var(--overlayPanel-padding-x, $overlayPanel-padding-x);
+  // Component token overrides
+  background-color: var(--overlayPanel-background, $overlayPanel-background);
+  border-radius: var(--overlayPanel-radius, $overlayPanel-radius);
+  box-shadow: var(--overlayPanel-shadow, $overlayPanel-shadow);
+  border-color: var(--overlayPanel-border-color, $overlayPanel-border-color);
+  border-width: var(--overlayPanel-border-width, $overlayPanel-border-width);
+  max-width: var(--overlayPanel-maxWidth, $overlayPanel-maxWidth);
+}
+
+.#{$c}__content {
+  display: block;
+}
+
+// Close button
+.#{$c}__close {
+  position: absolute;
+  top: var(--inset-xs, $inset-xs);
+  right: var(--inset-xs, $inset-xs);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--overlayPanel-closeButton-size, $overlayPanel-closeButton-size);
+  height: var(--overlayPanel-closeButton-size, $overlayPanel-closeButton-size);
+  padding: 0;
+  margin: 0;
+  border: none;
+  background: transparent;
+  border-radius: var(--overlayPanel-closeButton-radius, $overlayPanel-closeButton-radius);
+  color: var(--overlayPanel-closeButton-color-default, $overlayPanel-closeButton-color-default);
+  cursor: pointer;
+  transition: background-color 0.15s ease, color 0.15s ease;
+
+  &:hover {
+    background-color: var(--overlayPanel-closeButton-background-hover, $overlayPanel-closeButton-background-hover);
+    color: var(--overlayPanel-closeButton-color-hover, $overlayPanel-closeButton-color-hover);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--focus-ring, $focus-ring);
+    outline-offset: 2px;
+  }
+}
+
+.#{$c}__close-icon {
+  width: var(--overlayPanel-closeButton-iconSize, $overlayPanel-closeButton-iconSize);
+  height: var(--overlayPanel-closeButton-iconSize, $overlayPanel-closeButton-iconSize);
+}
+
+// Transition animation
+.#{$c}-fade-enter-active,
+.#{$c}-fade-leave-active {
+  transition: opacity 0.15s ease, transform 0.15s ease;
+}
+
+.#{$c}-fade-enter-from,
+.#{$c}-fade-leave-to {
+  opacity: 0;
+  transform: translateY(-4px);
+}

package/src/components/OverlayPanel/OverlayPanel.vue

@@ -0,0 +1,180 @@
+<template>
+  <Teleport :to="appendTo">
+    <Transition name="overlay-panel-fade">
+      <div
+        v-if="isVisible"
+        ref="panelRef"
+        class="overlay-panel"
+        :style="panelStyle"
+        role="dialog"
+        aria-modal="false"
+        @click.stop
+      >
+        <button
+          v-if="showCloseIcon"
+          type="button"
+          class="overlay-panel__close"
+          aria-label="Close"
+          @click="hide"
+        >
+          <svg
+            class="overlay-panel__close-icon"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <line x1="18" y1="6" x2="6" y2="18" />
+            <line x1="6" y1="6" x2="18" y2="18" />
+          </svg>
+        </button>
+        <div class="overlay-panel__content">
+          <slot />
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<style src="./OverlayPanel.scss"></style>
+
+<script setup lang="ts">
+import type { OverlayPanelProps, OverlayPanelEmits } from '../../types';
+import { ref, computed, watch, nextTick, onMounted, onUnmounted } from "vue";
+
+defineOptions({ name: 'FtpOverlayPanel' });
+
+const props = withDefaults(defineProps<OverlayPanelProps>(), {
+  appendTo: "body",
+  dismissable: true,
+  showCloseIcon: false,
+});
+
+const emit = defineEmits(["update:visible", "show", "hide"]);
+
+const internalVisible = ref(false);
+const panelRef = ref<HTMLElement | null>(null);
+const panelStyle = ref({});
+let targetElement: HTMLElement | null = null;
+
+// Support both controlled (v-model) and uncontrolled modes
+const isVisible = computed(() => {
+  return props.visible !== undefined ? props.visible : internalVisible.value;
+});
+
+function show(event: Event) {
+  if (event?.currentTarget) {
+    targetElement = event.currentTarget as HTMLElement;
+  } else if (event?.target) {
+    targetElement = event.target as HTMLElement;
+  }
+
+  if (props.visible !== undefined) {
+    emit("update:visible", true);
+  } else {
+    internalVisible.value = true;
+  }
+  emit("show");
+  nextTick(updatePosition);
+}
+
+function hide() {
+  if (props.visible !== undefined) {
+    emit("update:visible", false);
+  } else {
+    internalVisible.value = false;
+  }
+  emit("hide");
+}
+
+function toggle(event: Event) {
+  if (isVisible.value) {
+    hide();
+  } else {
+    show(event);
+  }
+}
+
+function updatePosition() {
+  if (!targetElement || !panelRef.value) return;
+
+  const targetRect = targetElement.getBoundingClientRect();
+  const panelRect = panelRef.value.getBoundingClientRect();
+  const offset = 10; // Matches overlayPanel.offset token
+
+  // Position below the target by default
+  let top = targetRect.bottom + offset;
+  let left = targetRect.left;
+
+  // Adjust horizontal position if panel goes off screen
+  if (left + panelRect.width > window.innerWidth) {
+    left = targetRect.right - panelRect.width;
+  }
+
+  // Keep panel within viewport
+  const viewportPadding = 8;
+  left = Math.max(viewportPadding, Math.min(left, window.innerWidth - panelRect.width - viewportPadding));
+
+  // If panel would go below viewport, position above target
+  if (top + panelRect.height > window.innerHeight) {
+    top = targetRect.top - panelRect.height - offset;
+  }
+
+  top = Math.max(viewportPadding, top);
+
+  panelStyle.value = {
+    top: `${top}px`,
+    left: `${left}px`,
+  };
+}
+
+function handleClickOutside(event: MouseEvent) {
+  if (props.dismissable && isVisible.value && panelRef.value && !panelRef.value.contains(event.target as Node)) {
+    if (targetElement && targetElement.contains(event.target as Node)) {
+      return;
+    }
+    hide();
+  }
+}
+
+function handleScroll() {
+  if (isVisible.value) {
+    updatePosition();
+  }
+}
+
+function handleResize() {
+  if (isVisible.value) {
+    updatePosition();
+  }
+}
+
+function handleEscape(event: KeyboardEvent) {
+  if (props.dismissable && isVisible.value && event.key === "Escape") {
+    hide();
+  }
+}
+
+onMounted(() => {
+  document.addEventListener("click", handleClickOutside, true);
+  document.addEventListener("keydown", handleEscape);
+  window.addEventListener("scroll", handleScroll, true);
+  window.addEventListener("resize", handleResize);
+});
+
+onUnmounted(() => {
+  document.removeEventListener("click", handleClickOutside, true);
+  document.removeEventListener("keydown", handleEscape);
+  window.removeEventListener("scroll", handleScroll, true);
+  window.removeEventListener("resize", handleResize);
+});
+
+// Expose methods for external control
+defineExpose({
+  show,
+  hide,
+  toggle,
+});
+</script>

package/src/components/Paginator/Paginator.scss

@@ -0,0 +1,130 @@
+@use "../../../dist/scss/tokens" as *;
+
+$c: paginator;
+
+.#{$c} {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: var(--paginator-gap, $paginator-gap);
+  padding: var(--paginator-padding, $paginator-padding);
+  background-color: var(--paginator-background, $paginator-background);
+  border: var(--paginator-border-width, $paginator-border-width) solid var(--paginator-border-color, $paginator-border-color);
+  border-radius: var(--paginator-border-radius, $paginator-border-radius);
+}
+
+.#{$c}__info {
+  font-size: var(--paginator-info-fontSize, $paginator-info-fontSize);
+  color: var(--paginator-info-color, $paginator-info-color);
+  white-space: nowrap;
+}
+
+.#{$c}__controls {
+  display: flex;
+  align-items: center;
+  gap: var(--paginator-gap, $paginator-gap);
+}
+
+.#{$c}__pages {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.#{$c}__nav,
+.#{$c}__page {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  cursor: pointer;
+  user-select: none;
+  transition:
+    background-color var(--paginator-transition-duration, $paginator-transition-duration) ease,
+    color var(--paginator-transition-duration, $paginator-transition-duration) ease;
+
+  &:focus-visible {
+    outline: var(--paginator-focus-ringWidth, $paginator-focus-ringWidth) solid var(--paginator-focus-ringColor, $paginator-focus-ringColor);
+    outline-offset: var(--paginator-focus-ringOffset, $paginator-focus-ringOffset);
+  }
+}
+
+.#{$c}__nav {
+  width: var(--paginator-nav-size, $paginator-nav-size);
+  height: var(--paginator-nav-size, $paginator-nav-size);
+  background-color: var(--paginator-nav-background-default, $paginator-nav-background-default);
+  border-radius: var(--paginator-nav-radius, $paginator-nav-radius);
+  color: var(--paginator-nav-icon-color-default, $paginator-nav-icon-color-default);
+
+  &:hover:not(:disabled) {
+    background-color: var(--paginator-nav-background-hover, $paginator-nav-background-hover);
+    color: var(--paginator-nav-icon-color-hover, $paginator-nav-icon-color-hover);
+  }
+
+  &:disabled {
+    background-color: var(--paginator-nav-background-disabled, $paginator-nav-background-disabled);
+    color: var(--paginator-nav-icon-color-disabled, $paginator-nav-icon-color-disabled);
+    cursor: not-allowed;
+  }
+}
+
+.#{$c}__icon {
+  width: var(--paginator-nav-icon-size, $paginator-nav-icon-size);
+  height: var(--paginator-nav-icon-size, $paginator-nav-icon-size);
+  flex-shrink: 0;
+}
+
+.#{$c}__page {
+  min-width: var(--paginator-page-size, $paginator-page-size);
+  height: var(--paginator-page-size, $paginator-page-size);
+  padding: 0 8px;
+  background-color: var(--paginator-page-background-default, $paginator-page-background-default);
+  border-radius: var(--paginator-page-radius, $paginator-page-radius);
+  color: var(--paginator-page-text-default, $paginator-page-text-default);
+  font-size: var(--paginator-page-fontSize, $paginator-page-fontSize);
+  font-weight: var(--paginator-page-fontWeight, $paginator-page-fontWeight);
+
+  &:hover:not(:disabled):not(.#{$c}__page--active) {
+    background-color: var(--paginator-page-background-hover, $paginator-page-background-hover);
+    color: var(--paginator-page-text-hover, $paginator-page-text-hover);
+  }
+
+  &--active {
+    background-color: var(--paginator-page-background-active, $paginator-page-background-active);
+    color: var(--paginator-page-text-active, $paginator-page-text-active);
+    cursor: default;
+  }
+
+  &--ellipsis {
+    cursor: default;
+    pointer-events: none;
+  }
+}
+
+.#{$c}__rows-per-page {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.#{$c}__rows-label {
+  font-size: var(--paginator-info-fontSize, $paginator-info-fontSize);
+  color: var(--paginator-info-color, $paginator-info-color);
+  white-space: nowrap;
+}
+
+.#{$c}__rows-select {
+  padding: 6px 12px;
+  border: var(--paginator-border-width, $paginator-border-width) solid var(--paginator-border-color, $paginator-border-color);
+  border-radius: var(--paginator-page-radius, $paginator-page-radius);
+  background-color: var(--paginator-background, $paginator-background);
+  font-size: var(--paginator-page-fontSize, $paginator-page-fontSize);
+  color: var(--paginator-page-text-default, $paginator-page-text-default);
+  cursor: pointer;
+
+  &:focus-visible {
+    outline: var(--paginator-focus-ringWidth, $paginator-focus-ringWidth) solid var(--paginator-focus-ringColor, $paginator-focus-ringColor);
+    outline-offset: var(--paginator-focus-ringOffset, $paginator-focus-ringOffset);
+  }
+}