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

package/src/components/TreeTable/TreeTable.vue

@@ -0,0 +1,285 @@
+<template>
+  <div class="treetable" :class="additionalClasses">
+    <table class="treetable__table" role="treegrid">
+      <thead class="treetable__head">
+        <tr class="treetable__row treetable__row--header">
+          <th
+            v-for="col in columns"
+            :key="col.field"
+            class="treetable__cell treetable__cell--header"
+            :style="col.style"
+          >
+            {{ col.header }}
+          </th>
+        </tr>
+      </thead>
+      <tbody class="treetable__body">
+        <TreeTableRow
+          v-for="node in filteredNodes"
+          :key="getNodeKey(node)"
+          :node="node"
+          :level="0"
+          :columns="columns"
+          :selection-mode="selectionMode"
+          :selected-keys="selectedKeysSet"
+          :expanded-keys="expandedKeysInternal"
+          :key-field="keyField"
+          :children-field="childrenField"
+          :striped="striped"
+          @select="onNodeSelect"
+          @toggle="onNodeToggle"
+        />
+        <tr v-if="filteredNodes.length === 0">
+          <td :colspan="columns.length" class="treetable__empty">
+            No records found
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<style src="./TreeTable.scss"></style>
+
+<script setup lang="ts">
+import type { TreeTableProps, TreeTableEmits } from '../../types';
+import { computed, ref, watch, h } from "vue";
+
+defineOptions({ name: 'FtpTreeTable' });
+
+// TreeTableRow subcomponent
+const TreeTableRow = {
+  name: "TreeTableRow",
+  props: {
+    node: Object,
+    level: Number,
+    columns: Array,
+    selectionMode: String,
+    selectedKeys: Set,
+    expandedKeys: Set,
+    keyField: String,
+    childrenField: String,
+    striped: Boolean,
+    rowIndex: Number,
+  },
+  emits: ["select", "toggle"],
+  setup(props: any, { emit }: { emit: any }) {
+    const hasChildren = computed(() => {
+      const children = props.node[props.childrenField];
+      return children && children.length > 0;
+    });
+
+    const isExpanded = computed(() => {
+      return props.expandedKeys.has(props.node[props.keyField]);
+    });
+
+    const isSelected = computed(() => {
+      return props.selectedKeys.has(props.node[props.keyField]);
+    });
+
+    const onToggle = (event: Event) => {
+      event.stopPropagation();
+      emit("toggle", props.node);
+    };
+
+    const onSelect = () => {
+      emit("select", props.node);
+    };
+
+    const onKeydown = (event: KeyboardEvent) => {
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        onSelect();
+      }
+    };
+
+    return () => {
+      const rows = [];
+
+      // Main row
+      const cells = props.columns.map((col: any, colIndex: any) => {
+        const cellContent = [];
+
+        // First column gets toggle and checkbox
+        if (colIndex === 0) {
+          // Indent spacer
+          if (props.level > 0) {
+            cellContent.push(h("span", {
+              class: "treetable__indent",
+              style: { width: `${props.level * 24}px` }
+            }));
+          }
+
+          // Toggle button
+          if (hasChildren.value) {
+            cellContent.push(h("button", {
+              type: "button",
+              class: ["treetable__toggler", isExpanded.value && "treetable__toggler--expanded"],
+              onClick: onToggle,
+              "aria-label": isExpanded.value ? "Collapse" : "Expand",
+            }, [
+              h("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none" }, [
+                h("path", {
+                  d: "M6 4L10 8L6 12",
+                  stroke: "currentColor",
+                  "stroke-width": "1.5",
+                  "stroke-linecap": "round",
+                  "stroke-linejoin": "round"
+                })
+              ])
+            ]));
+          } else {
+            cellContent.push(h("span", { class: "treetable__toggler-spacer" }));
+          }
+
+          // Checkbox for selection
+          if (props.selectionMode === "checkbox" || props.selectionMode === "multiple") {
+            cellContent.push(h("span", {
+              class: ["treetable__checkbox", isSelected.value && "treetable__checkbox--checked"]
+            }, [
+              isSelected.value ? h("svg", { width: 12, height: 12, viewBox: "0 0 12 12", fill: "none" }, [
+                h("path", {
+                  d: "M10 3L4.5 8.5L2 6",
+                  stroke: "currentColor",
+                  "stroke-width": "2",
+                  "stroke-linecap": "round",
+                  "stroke-linejoin": "round"
+                })
+              ]) : null
+            ]));
+          }
+        }
+
+        // Cell content
+        cellContent.push(h("span", { class: "treetable__cell-content" }, props.node[col.field]));
+
+        return h("td", {
+          class: "treetable__cell",
+          style: col.style,
+        }, cellContent);
+      });
+
+      const row = h("tr", {
+        class: [
+          "treetable__row",
+          isSelected.value && "treetable__row--selected"
+        ],
+        role: "row",
+        "aria-selected": isSelected.value,
+        "aria-expanded": hasChildren.value ? isExpanded.value : undefined,
+        "aria-level": props.level + 1,
+        tabindex: 0,
+        onClick: onSelect,
+        onKeydown: onKeydown,
+      }, cells);
+
+      rows.push(row);
+
+      // Children rows
+      if (hasChildren.value && isExpanded.value) {
+        const nodeChildren = props.node[props.childrenField];
+        nodeChildren.forEach((child: any, index: any) => {
+          rows.push(h(TreeTableRow, {
+            key: child[props.keyField],
+            node: child,
+            level: props.level + 1,
+            columns: props.columns,
+            selectionMode: props.selectionMode,
+            selectedKeys: props.selectedKeys,
+            expandedKeys: props.expandedKeys,
+            keyField: props.keyField,
+            childrenField: props.childrenField,
+            striped: props.striped,
+            rowIndex: index,
+            onSelect: (n: any) => emit("select", n),
+            onToggle: (n: any) => emit("toggle", n),
+          }));
+        });
+      }
+
+      return rows;
+    };
+  }
+};
+
+const props = withDefaults(defineProps<TreeTableProps>(), {
+  modelValue: null,
+  nodes: () => [],
+  columns: () => [],
+  expandedKeys: () => [],
+  selectionMode: null,
+  keyField: "key",
+  childrenField: "children",
+  striped: false,
+  isDisabled: false,
+});
+
+const emit = defineEmits(["update:modelValue", "update:expandedKeys", "node-select", "node-expand", "node-collapse"]);
+
+const expandedKeysInternal = ref(new Set(props.expandedKeys));
+
+watch(() => props.expandedKeys, (newKeys) => {
+  expandedKeysInternal.value = new Set(newKeys);
+}, { deep: true });
+
+const getNodeKey = (node: any) => node[props.keyField];
+
+const selectedKeysSet = computed(() => {
+  if (props.modelValue === null || props.modelValue === undefined) {
+    return new Set();
+  }
+  if (Array.isArray(props.modelValue)) {
+    return new Set(props.modelValue);
+  }
+  return new Set([props.modelValue]);
+});
+
+const filteredNodes = computed(() => props.nodes);
+
+const onNodeSelect = (node: any) => {
+  if (props.isDisabled || !props.selectionMode) return;
+
+  const key = node[props.keyField];
+
+  if (props.selectionMode === "single") {
+    emit("update:modelValue", key);
+    emit("node-select", { node, key });
+  } else {
+    let newValue;
+    if (selectedKeysSet.value.has(key)) {
+      newValue = Array.isArray(props.modelValue)
+        ? props.modelValue.filter((k) => k !== key)
+        : [];
+    } else {
+      newValue = Array.isArray(props.modelValue)
+        ? [...props.modelValue, key]
+        : [key];
+    }
+    emit("update:modelValue", newValue);
+    emit("node-select", { node, key, selectedKeys: newValue });
+  }
+};
+
+const onNodeToggle = (node: any) => {
+  const key = node[props.keyField];
+  const newExpanded = new Set(expandedKeysInternal.value);
+
+  if (newExpanded.has(key)) {
+    newExpanded.delete(key);
+    emit("node-collapse", { node, key });
+  } else {
+    newExpanded.add(key);
+    emit("node-expand", { node, key });
+  }
+
+  expandedKeysInternal.value = newExpanded;
+  emit("update:expandedKeys", Array.from(newExpanded));
+};
+
+const additionalClasses = computed(() =>
+  [
+    props.isDisabled && "treetable--disabled",
+    props.striped && "treetable--striped",
+  ].filter(Boolean).join(" ")
+);
+</script>

package/src/components/VirtualScroller/VirtualScroller.scss

@@ -0,0 +1,107 @@
+@use "../../../dist/scss/tokens" as *;
+
+$c: virtualscroller;
+
+.#{$c} {
+  position: relative;
+  background-color: var(--virtualscroller-background-default, $virtualscroller-background-default);
+
+  // Custom scrollbar
+  &::-webkit-scrollbar {
+    width: var(--virtualscroller-scrollbar-width, $virtualscroller-scrollbar-width);
+    height: var(--virtualscroller-scrollbar-width, $virtualscroller-scrollbar-width);
+  }
+
+  &::-webkit-scrollbar-track {
+    background-color: var(--virtualscroller-scrollbar-track, $virtualscroller-scrollbar-track);
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: var(--virtualscroller-scrollbar-thumb, $virtualscroller-scrollbar-thumb);
+    border-radius: 4px;
+
+    &:hover {
+      background-color: var(--virtualscroller-scrollbar-thumbHover, $virtualscroller-scrollbar-thumbHover);
+    }
+  }
+}
+
+.#{$c}--bordered {
+  border: var(--virtualscroller-border-width, $virtualscroller-border-width) solid var(--virtualscroller-border-color-default, $virtualscroller-border-color-default);
+  border-radius: var(--virtualscroller-border-radius, $virtualscroller-border-radius);
+}
+
+.#{$c}--vertical {
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.#{$c}--horizontal {
+  overflow-x: auto;
+  overflow-y: hidden;
+
+  .#{$c}__content {
+    display: flex;
+    flex-direction: row;
+    height: 100%;
+  }
+
+  .#{$c}__item {
+    flex-shrink: 0;
+  }
+}
+
+.#{$c}__spacer {
+  contain: strict;
+}
+
+.#{$c}__content {
+  will-change: transform;
+}
+
+.#{$c}__item {
+  display: flex;
+  align-items: center;
+  padding: var(--virtualscroller-item-padding-y, $virtualscroller-item-padding-y) var(--virtualscroller-item-padding-x, $virtualscroller-item-padding-x);
+  background-color: var(--virtualscroller-item-background-default, $virtualscroller-item-background-default);
+  color: var(--virtualscroller-item-text-default, $virtualscroller-item-text-default);
+  box-sizing: border-box;
+
+  &:not(:last-child) {
+    border-bottom: 1px solid var(--virtualscroller-item-borderColor, $virtualscroller-item-borderColor);
+  }
+}
+
+.#{$c}--horizontal .#{$c}__item {
+  &:not(:last-child) {
+    border-bottom: none;
+    border-right: 1px solid var(--virtualscroller-item-borderColor, $virtualscroller-item-borderColor);
+  }
+}
+
+.#{$c}__item--stripe {
+  background-color: var(--virtualscroller-item-background-stripe, $virtualscroller-item-background-stripe);
+}
+
+.#{$c}__item:hover {
+  background-color: var(--virtualscroller-item-background-hover, $virtualscroller-item-background-hover);
+}
+
+// Loader
+.#{$c}__loader {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--virtualscroller-loader-padding, $virtualscroller-loader-padding);
+  background-color: var(--virtualscroller-loader-background, $virtualscroller-loader-background);
+  color: var(--virtualscroller-loader-text, $virtualscroller-loader-text);
+  font-size: 14px;
+}
+
+.#{$c}--loading {
+  pointer-events: none;
+}

package/src/components/VirtualScroller/VirtualScroller.vue

@@ -0,0 +1,234 @@
+<template>
+  <div
+    ref="containerRef"
+    class="virtualscroller"
+    :class="additionalClasses"
+    :style="containerStyle"
+    @scroll="onScroll"
+  >
+    <div class="virtualscroller__spacer" :style="spacerStyle">
+      <div
+        class="virtualscroller__content"
+        :style="contentStyle"
+      >
+        <div
+          v-for="(item, index) in visibleItems"
+          :key="getItemKey(item, startIndex + index)"
+          class="virtualscroller__item"
+          :class="{
+            'virtualscroller__item--stripe': striped && (startIndex + index) % 2 === 1
+          }"
+          :style="itemStyle"
+        >
+          <slot :item="item" :index="startIndex + index">
+            {{ item }}
+          </slot>
+        </div>
+      </div>
+    </div>
+    <div v-if="loading" class="virtualscroller__loader">
+      <slot name="loader">Loading...</slot>
+    </div>
+  </div>
+</template>
+
+<style src="./VirtualScroller.scss"></style>
+
+<script setup lang="ts">
+import type { VirtualScrollerProps, VirtualScrollerEmits } from '../../types';
+import { ref, computed, onMounted, onBeforeUnmount, watch, nextTick } from "vue";
+
+defineOptions({ name: 'FtpVirtualScroller' });
+
+const props = withDefaults(defineProps<VirtualScrollerProps>(), {
+  items: () => [],
+  itemSize: 40,
+  scrollHeight: "400px",
+  orientation: "vertical",
+  numToleratedItems: 5,
+  loading: false,
+  striped: false,
+  showBorder: true,
+  dataKey: null,
+});
+
+const emit = defineEmits(["scroll", "scroll-index-change"]);
+
+const containerRef = ref<HTMLElement | null>(null);
+const scrollPosition = ref(0);
+
+const isVertical = computed(() => props.orientation === "vertical");
+
+const totalSize = computed(() => props.items.length * props.itemSize);
+
+const viewportSize = computed(() => {
+  if (!containerRef.value) return 0;
+  return isVertical.value
+    ? containerRef.value!.clientHeight
+    : containerRef.value!.clientWidth;
+});
+
+const visibleCount = computed(() => {
+  if (viewportSize.value === 0) return 10; // Default during initial render
+  return Math.ceil(viewportSize.value / props.itemSize) + props.numToleratedItems * 2;
+});
+
+const startIndex = computed(() => {
+  const index = Math.floor(scrollPosition.value / props.itemSize) - props.numToleratedItems;
+  return Math.max(0, index);
+});
+
+const endIndex = computed(() => {
+  return Math.min(startIndex.value + visibleCount.value, props.items.length);
+});
+
+const visibleItems = computed(() => {
+  return props.items.slice(startIndex.value, endIndex.value);
+});
+
+const getItemKey = (item: any, index: any) => {
+  if (props.dataKey && typeof item === "object") {
+    return item[props.dataKey];
+  }
+  return index;
+};
+
+const containerStyle = computed(() => ({
+  height: isVertical.value ? props.scrollHeight : "auto",
+  width: isVertical.value ? "100%" : props.scrollHeight,
+  overflowY: isVertical.value ? 'auto' as const : 'hidden' as const,
+  overflowX: isVertical.value ? 'hidden' as const : 'auto' as const,
+}));
+
+const spacerStyle = computed(() => ({
+  position: 'relative' as const,
+  height: isVertical.value ? `${totalSize.value}px` : "100%",
+  width: isVertical.value ? "100%" : `${totalSize.value}px`,
+}));
+
+const contentStyle = computed(() => ({
+  position: 'absolute' as const,
+  top: isVertical.value ? `${startIndex.value * props.itemSize}px` : "0",
+  left: isVertical.value ? "0" : `${startIndex.value * props.itemSize}px`,
+  width: isVertical.value ? "100%" : "auto",
+  height: isVertical.value ? "auto" : "100%",
+}));
+
+const itemStyle = computed(() => ({
+  height: isVertical.value ? `${props.itemSize}px` : "100%",
+  width: isVertical.value ? "100%" : `${props.itemSize}px`,
+}));
+
+const onScroll = (event: Event) => {
+  const target = event.target;
+  const newPosition = isVertical.value ? (target as HTMLElement).scrollTop : (target as HTMLElement).scrollLeft;
+  const oldStartIndex = startIndex.value;
+
+  scrollPosition.value = newPosition;
+
+  emit("scroll", {
+    originalEvent: event,
+    scrollPosition: newPosition,
+  });
+
+  if (startIndex.value !== oldStartIndex) {
+    emit("scroll-index-change", {
+      first: startIndex.value,
+      last: endIndex.value,
+    });
+  }
+};
+
+const scrollToIndex = (index: any, behavior: ScrollBehavior = "auto") => {
+  if (!containerRef.value) return;
+
+  const position = index * props.itemSize;
+
+  if (isVertical.value) {
+    containerRef.value!.scrollTo({ top: position, behavior });
+  } else {
+    containerRef.value!.scrollTo({ left: position, behavior });
+  }
+};
+
+const scrollIntoView = (index: any, behavior: ScrollBehavior = "auto", align = "start") => {
+  if (!containerRef.value) return;
+
+  const itemPosition = index * props.itemSize;
+  const currentScroll = scrollPosition.value;
+  const viewport = viewportSize.value;
+
+  let targetScroll;
+
+  if (align === "start") {
+    targetScroll = itemPosition;
+  } else if (align === "center") {
+    targetScroll = itemPosition - (viewport - props.itemSize) / 2;
+  } else if (align === "end") {
+    targetScroll = itemPosition - viewport + props.itemSize;
+  } else {
+    // Auto - only scroll if needed
+    if (itemPosition < currentScroll) {
+      targetScroll = itemPosition;
+    } else if (itemPosition + props.itemSize > currentScroll + viewport) {
+      targetScroll = itemPosition - viewport + props.itemSize;
+    } else {
+      return; // Already visible
+    }
+  }
+
+  targetScroll = Math.max(0, Math.min(targetScroll, totalSize.value - viewport));
+
+  if (isVertical.value) {
+    containerRef.value!.scrollTo({ top: targetScroll, behavior });
+  } else {
+    containerRef.value!.scrollTo({ left: targetScroll, behavior });
+  }
+};
+
+// Recalculate on mount and resize
+let resizeObserver: ResizeObserver | null = null;
+
+onMounted(() => {
+  if (containerRef.value && typeof ResizeObserver !== "undefined") {
+    resizeObserver = new ResizeObserver(() => {
+      // Force reactivity update
+      scrollPosition.value = isVertical.value
+        ? containerRef.value!.scrollTop
+        : containerRef.value!.scrollLeft;
+    });
+    resizeObserver.observe(containerRef.value);
+  }
+});
+
+onBeforeUnmount(() => {
+  if (resizeObserver) {
+    resizeObserver.disconnect();
+  }
+});
+
+// Watch for items change
+watch(() => props.items, () => {
+  nextTick(() => {
+    if (containerRef.value) {
+      scrollPosition.value = isVertical.value
+        ? containerRef.value!.scrollTop
+        : containerRef.value!.scrollLeft;
+    }
+  });
+}, { deep: true });
+
+// Expose methods
+defineExpose({
+  scrollToIndex,
+  scrollIntoView,
+});
+
+const additionalClasses = computed(() =>
+  [
+    `virtualscroller--${props.orientation}`,
+    props.showBorder && "virtualscroller--bordered",
+    props.loading && "virtualscroller--loading",
+  ].filter(Boolean).join(" ")
+);
+</script>

package/src/scss/fonts.scss

@@ -0,0 +1,63 @@
+@font-face {
+  font-family: "DM Sans";
+  src: url("https://fonts.gstatic.com/s/dmsans/v15/rP2Hp2ywxg089UriCZOIHQ.woff2")
+    format("woff2");
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "DM Sans";
+  src: url("https://fonts.gstatic.com/s/dmsans/v15/rP2Hp2ywxg089UriCZOIHQ.woff2")
+    format("woff2");
+  font-weight: 500;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "DM Sans";
+  src: url("https://fonts.gstatic.com/s/dmsans/v15/rP2Hp2ywxg089UriCZOIHQ.woff2")
+    format("woff2");
+  font-weight: 600;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "DM Sans";
+  src: url("https://fonts.gstatic.com/s/dmsans/v15/rP2Hp2ywxg089UriCZOIHQ.woff2")
+    format("woff2");
+  font-weight: 700;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: Manrope;
+  src: url("https://fonts.gstatic.com/s/manrope/v15/xn7gYHE41ni1AdIRggexSg.woff2")
+    format("woff2");
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: Manrope;
+  src: url("https://fonts.gstatic.com/s/manrope/v15/xn7gYHE41ni1AdIRggexSg.woff2")
+    format("woff2");
+  font-weight: 500;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: Manrope;
+  src: url("https://fonts.gstatic.com/s/manrope/v15/xn7gYHE41ni1AdIRggexSg.woff2")
+    format("woff2");
+  font-weight: 600;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: Manrope;
+  src: url("https://fonts.gstatic.com/s/manrope/v15/xn7gYHE41ni1AdIRggexSg.woff2")
+    format("woff2");
+  font-weight: 700;
+  font-style: normal;
+}