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

package/src/components/OrderList/OrderList.scss

@@ -0,0 +1,133 @@
+@use "../../../dist/scss/tokens" as *;
+
+$c: order-list;
+
+.#{$c} {
+  display: flex;
+  gap: var(--inset-m, $inset-m);
+}
+
+.#{$c}__controls {
+  display: flex;
+  flex-direction: column;
+  gap: var(--orderList-controls-gap, $orderList-controls-gap);
+  padding: var(--orderList-controls-padding, $orderList-controls-padding);
+}
+
+.#{$c}__btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--orderList-button-size, $orderList-button-size);
+  height: var(--orderList-button-size, $orderList-button-size);
+  padding: 0;
+  border: none;
+  background-color: var(--orderList-button-background-default, $orderList-button-background-default);
+  border-radius: var(--orderList-button-radius, $orderList-button-radius);
+  cursor: pointer;
+  transition: background-color var(--orderList-transition-duration, $orderList-transition-duration) ease;
+
+  svg {
+    width: 16px;
+    height: 16px;
+    color: var(--orderList-button-color-default, $orderList-button-color-default);
+  }
+
+  &:hover:not(:disabled) {
+    background-color: var(--orderList-button-background-hover, $orderList-button-background-hover);
+  }
+
+  &:disabled {
+    background-color: var(--orderList-button-background-disabled, $orderList-button-background-disabled);
+    cursor: not-allowed;
+
+    svg {
+      color: var(--orderList-button-color-disabled, $orderList-button-color-disabled);
+    }
+  }
+}
+
+.#{$c}__container {
+  flex: 1;
+  background-color: var(--orderList-background, $orderList-background);
+  border: var(--orderList-border-width, $orderList-border-width) solid var(--orderList-border-color, $orderList-border-color);
+  border-radius: var(--orderList-radius, $orderList-radius);
+  overflow: hidden;
+}
+
+.#{$c}__header {
+  padding: var(--orderList-header-padding, $orderList-header-padding);
+  background-color: var(--orderList-header-background, $orderList-header-background);
+  border-bottom: var(--orderList-border-width, $orderList-border-width) solid var(--orderList-header-borderColor, $orderList-header-borderColor);
+  font-size: var(--orderList-header-fontSize, $orderList-header-fontSize);
+  font-weight: var(--orderList-header-fontWeight, $orderList-header-fontWeight);
+  color: var(--orderList-header-color, $orderList-header-color);
+}
+
+.#{$c}__list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--orderList-list-gap, $orderList-list-gap);
+  padding: var(--orderList-list-padding, $orderList-list-padding);
+  min-height: 200px;
+}
+
+.#{$c}__item {
+  display: flex;
+  align-items: center;
+  gap: var(--inset-s, $inset-s);
+  padding: var(--orderList-item-padding, $orderList-item-padding);
+  background-color: var(--orderList-item-background-default, $orderList-item-background-default);
+  border: 1px solid var(--orderList-item-borderColor-default, $orderList-item-borderColor-default);
+  border-radius: var(--orderList-item-radius, $orderList-item-radius);
+  cursor: pointer;
+  user-select: none;
+  transition: background-color var(--orderList-transition-duration, $orderList-transition-duration) ease,
+              border-color var(--orderList-transition-duration, $orderList-transition-duration) ease;
+
+  &:hover {
+    background-color: var(--orderList-item-background-hover, $orderList-item-background-hover);
+  }
+
+  &--selected {
+    background-color: var(--orderList-item-background-selected, $orderList-item-background-selected);
+    border-color: var(--orderList-item-borderColor-selected, $orderList-item-borderColor-selected);
+  }
+
+  &--dragging {
+    opacity: 0.5;
+    background-color: var(--orderList-item-background-dragging, $orderList-item-background-dragging);
+  }
+}
+
+.#{$c}__drag-handle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: grab;
+  flex-shrink: 0;
+
+  svg {
+    width: var(--orderList-dragHandle-size, $orderList-dragHandle-size);
+    height: var(--orderList-dragHandle-size, $orderList-dragHandle-size);
+    color: var(--orderList-dragHandle-color, $orderList-dragHandle-color);
+  }
+
+  &:active {
+    cursor: grabbing;
+  }
+}
+
+.#{$c}__item-content {
+  flex: 1;
+  color: var(--orderList-item-color, $orderList-item-color);
+}
+
+.#{$c}__empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--inset-xl, $inset-xl);
+  color: var(--text-muted, $text-muted);
+  font-size: 14px;
+}

package/src/components/OrderList/OrderList.vue

@@ -0,0 +1,267 @@
+<template>
+  <div class="order-list">
+    <div class="order-list__controls">
+      <button
+        class="order-list__btn"
+        :disabled="!hasSelection || isFirstSelected"
+        type="button"
+        aria-label="Move to top"
+        @click="moveToTop"
+      >
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <polyline points="17 11 12 6 7 11" />
+          <polyline points="17 18 12 13 7 18" />
+        </svg>
+      </button>
+      <button
+        class="order-list__btn"
+        :disabled="!hasSelection || isFirstSelected"
+        type="button"
+        aria-label="Move up"
+        @click="moveUp"
+      >
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <polyline points="18 15 12 9 6 15" />
+        </svg>
+      </button>
+      <button
+        class="order-list__btn"
+        :disabled="!hasSelection || isLastSelected"
+        type="button"
+        aria-label="Move down"
+        @click="moveDown"
+      >
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <polyline points="6 9 12 15 18 9" />
+        </svg>
+      </button>
+      <button
+        class="order-list__btn"
+        :disabled="!hasSelection || isLastSelected"
+        type="button"
+        aria-label="Move to bottom"
+        @click="moveToBottom"
+      >
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <polyline points="7 13 12 18 17 13" />
+          <polyline points="7 6 12 11 17 6" />
+        </svg>
+      </button>
+    </div>
+
+    <div class="order-list__container">
+      <div v-if="$slots.header || header" class="order-list__header">
+        <slot name="header">
+          {{ header }}
+        </slot>
+      </div>
+
+      <div class="order-list__list">
+        <div
+          v-for="(item, index) in internalValue"
+          :key="getItemKey(item, index)"
+          class="order-list__item"
+          :class="{
+            'order-list__item--selected': isSelected(item),
+            'order-list__item--dragging': draggingIndex === index
+          }"
+          draggable="true"
+          @click="onItemClick(item, $event)"
+          @dragstart="onDragStart(index, $event)"
+          @dragover="onDragOver(index, $event)"
+          @dragend="onDragEnd"
+          @drop="onDrop(index, $event)"
+        >
+          <span class="order-list__drag-handle">
+            <svg viewBox="0 0 24 24" fill="currentColor">
+              <circle cx="9" cy="6" r="1.5" />
+              <circle cx="15" cy="6" r="1.5" />
+              <circle cx="9" cy="12" r="1.5" />
+              <circle cx="15" cy="12" r="1.5" />
+              <circle cx="9" cy="18" r="1.5" />
+              <circle cx="15" cy="18" r="1.5" />
+            </svg>
+          </span>
+          <div class="order-list__item-content">
+            <slot name="item" :item="item" :index="index">
+              {{ dataKey ? item[dataKey] : item }}
+            </slot>
+          </div>
+        </div>
+        <div v-if="internalValue.length === 0" class="order-list__empty">
+          <slot name="empty">
+            No items
+          </slot>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style src="./OrderList.scss"></style>
+
+<script setup lang="ts">
+import type { OrderListProps, OrderListEmits } from '../../types';
+import { ref, computed, watch } from "vue";
+
+const props = withDefaults(defineProps<OrderListProps>(), {
+  modelValue: () => [],
+  header: "",
+  dataKey: null,
+  itemKey: null,
+  multiple: false,
+});
+
+const emit = defineEmits(["update:modelValue", "reorder", "selection-change"]);
+
+defineOptions({
+  name: "FtpOrderList",
+});
+
+const internalValue = ref([...props.modelValue]);
+const selection = ref<any[]>([]);
+const draggingIndex = ref(null);
+
+watch(
+  () => props.modelValue,
+  (val) => {
+    internalValue.value = [...val];
+  },
+  { deep: true }
+);
+
+const hasSelection = computed(() => selection.value.length > 0);
+
+const selectedIndices = computed(() => {
+  return selection.value.map((item) => internalValue.value.indexOf(item));
+});
+
+const isFirstSelected = computed(() => {
+  if (!hasSelection.value) return false;
+  return Math.min(...selectedIndices.value) === 0;
+});
+
+const isLastSelected = computed(() => {
+  if (!hasSelection.value) return false;
+  return Math.max(...selectedIndices.value) === internalValue.value.length - 1;
+});
+
+const getItemKey = (item: any, index: any) => {
+  if (props.itemKey && typeof item === "object") {
+    return item[props.itemKey];
+  }
+  return index;
+};
+
+const isSelected = (item: any) => {
+  return selection.value.includes(item);
+};
+
+const onItemClick = (item: any, event: any) => {
+  if (props.multiple && (event.ctrlKey || event.metaKey)) {
+    const index = selection.value.indexOf(item);
+    if (index > -1) {
+      selection.value.splice(index, 1);
+    } else {
+      selection.value.push(item);
+    }
+  } else {
+    selection.value = [item];
+  }
+  emit("selection-change", { selection: [...selection.value] });
+};
+
+const emitUpdate = () => {
+  emit("update:modelValue", [...internalValue.value]);
+  emit("reorder", { value: [...internalValue.value] });
+};
+
+const moveUp = () => {
+  if (!hasSelection.value || isFirstSelected.value) return;
+
+  const indices = selectedIndices.value.sort((a, b) => a - b);
+  for (const index of indices) {
+    if (index > 0) {
+      const temp = internalValue.value[index];
+      internalValue.value[index] = internalValue.value[index - 1];
+      internalValue.value[index - 1] = temp;
+    }
+  }
+  emitUpdate();
+};
+
+const moveDown = () => {
+  if (!hasSelection.value || isLastSelected.value) return;
+
+  const indices = selectedIndices.value.sort((a, b) => b - a);
+  for (const index of indices) {
+    if (index < internalValue.value.length - 1) {
+      const temp = internalValue.value[index];
+      internalValue.value[index] = internalValue.value[index + 1];
+      internalValue.value[index + 1] = temp;
+    }
+  }
+  emitUpdate();
+};
+
+const moveToTop = () => {
+  if (!hasSelection.value || isFirstSelected.value) return;
+
+  const indices = selectedIndices.value.sort((a, b) => a - b);
+  const items = indices.map((i) => internalValue.value[i]);
+
+  // Remove selected items
+  for (let i = indices.length - 1; i >= 0; i--) {
+    internalValue.value.splice(indices[i], 1);
+  }
+
+  // Add them at the top
+  internalValue.value.unshift(...items);
+  emitUpdate();
+};
+
+const moveToBottom = () => {
+  if (!hasSelection.value || isLastSelected.value) return;
+
+  const indices = selectedIndices.value.sort((a, b) => b - a);
+  const items = indices.map((i) => internalValue.value[i]);
+
+  // Remove selected items
+  for (const index of indices) {
+    internalValue.value.splice(index, 1);
+  }
+
+  // Add them at the bottom
+  internalValue.value.push(...items.reverse());
+  emitUpdate();
+};
+
+const onDragStart = (index: any, event: any) => {
+  draggingIndex.value = index;
+  event.dataTransfer.effectAllowed = "move";
+  event.dataTransfer.setData("text/plain", index);
+};
+
+const onDragOver = (index: any, event: any) => {
+  event.preventDefault();
+  event.dataTransfer.dropEffect = "move";
+};
+
+const onDragEnd = () => {
+  draggingIndex.value = null;
+};
+
+const onDrop = (targetIndex: any, event: any) => {
+  event.preventDefault();
+  const sourceIndex = draggingIndex.value;
+
+  if (sourceIndex === null || sourceIndex === targetIndex) return;
+
+  const item = internalValue.value[sourceIndex];
+  internalValue.value.splice(sourceIndex, 1);
+  internalValue.value.splice(targetIndex, 0, item);
+
+  draggingIndex.value = null;
+  emitUpdate();
+};
+</script>

package/src/components/OrganizationChart/OrganizationChart.scss

@@ -0,0 +1,145 @@
+@use "../../../dist/scss/tokens" as *;
+
+$c: organization-chart;
+
+.#{$c} {
+  display: flex;
+  justify-content: center;
+  padding: var(--organizationChart-padding, $organizationChart-padding);
+  background-color: var(--organizationChart-background, $organizationChart-background);
+  overflow: auto;
+}
+
+.#{$c}__node-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+}
+
+.#{$c}__node {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  min-width: var(--organizationChart-node-minWidth, $organizationChart-node-minWidth);
+  padding: var(--organizationChart-node-padding, $organizationChart-node-padding);
+  background-color: var(--organizationChart-node-background-default, $organizationChart-node-background-default);
+  border: var(--organizationChart-node-border-width, $organizationChart-node-border-width) solid var(--organizationChart-node-border-color-default, $organizationChart-node-border-color-default);
+  border-radius: var(--organizationChart-node-radius, $organizationChart-node-radius);
+  box-shadow: var(--organizationChart-node-shadow-default, $organizationChart-node-shadow-default);
+  transition: background-color var(--organizationChart-transition-duration, $organizationChart-transition-duration) ease,
+              border-color var(--organizationChart-transition-duration, $organizationChart-transition-duration) ease,
+              box-shadow var(--organizationChart-transition-duration, $organizationChart-transition-duration) ease;
+
+  &:hover {
+    background-color: var(--organizationChart-node-background-hover, $organizationChart-node-background-hover);
+    border-color: var(--organizationChart-node-border-color-hover, $organizationChart-node-border-color-hover);
+    box-shadow: var(--organizationChart-node-shadow-hover, $organizationChart-node-shadow-hover);
+  }
+
+  &--selectable {
+    cursor: pointer;
+  }
+
+  &--selected {
+    background-color: var(--organizationChart-node-background-selected, $organizationChart-node-background-selected);
+    border-color: var(--organizationChart-node-border-color-selected, $organizationChart-node-border-color-selected);
+  }
+}
+
+.#{$c}__node-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--organizationChart-nodeContent-gap, $organizationChart-nodeContent-gap);
+  text-align: center;
+}
+
+.#{$c}__node-title {
+  font-size: var(--organizationChart-nodeContent-title-fontSize, $organizationChart-nodeContent-title-fontSize);
+  font-weight: var(--organizationChart-nodeContent-title-fontWeight, $organizationChart-nodeContent-title-fontWeight);
+  color: var(--organizationChart-nodeContent-title-color, $organizationChart-nodeContent-title-color);
+}
+
+.#{$c}__node-subtitle {
+  font-size: var(--organizationChart-nodeContent-subtitle-fontSize, $organizationChart-nodeContent-subtitle-fontSize);
+  font-weight: var(--organizationChart-nodeContent-subtitle-fontWeight, $organizationChart-nodeContent-subtitle-fontWeight);
+  color: var(--organizationChart-nodeContent-subtitle-color, $organizationChart-nodeContent-subtitle-color);
+}
+
+.#{$c}__toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--organizationChart-toggleButton-size, $organizationChart-toggleButton-size);
+  height: var(--organizationChart-toggleButton-size, $organizationChart-toggleButton-size);
+  margin-top: var(--inset-xs, $inset-xs);
+  padding: 0;
+  border: 1px solid var(--organizationChart-toggleButton-borderColor, $organizationChart-toggleButton-borderColor);
+  background-color: var(--organizationChart-toggleButton-background, $organizationChart-toggleButton-background);
+  border-radius: var(--organizationChart-toggleButton-radius, $organizationChart-toggleButton-radius);
+  cursor: pointer;
+  transition: background-color var(--organizationChart-transition-duration, $organizationChart-transition-duration) ease;
+
+  svg {
+    width: 12px;
+    height: 12px;
+    color: var(--organizationChart-toggleButton-color, $organizationChart-toggleButton-color);
+  }
+
+  &:hover {
+    background-color: var(--surface-muted, $surface-muted);
+  }
+}
+
+.#{$c}__children {
+  display: flex;
+  justify-content: center;
+  gap: var(--organizationChart-spacing-horizontal, $organizationChart-spacing-horizontal);
+  padding-top: var(--organizationChart-spacing-vertical, $organizationChart-spacing-vertical);
+  position: relative;
+
+  // Vertical connector from parent to horizontal line
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 50%;
+    width: var(--organizationChart-connector-width, $organizationChart-connector-width);
+    height: calc(var(--organizationChart-spacing-vertical, $organizationChart-spacing-vertical) / 2);
+    background-color: var(--organizationChart-connector-color, $organizationChart-connector-color);
+    transform: translateX(-50%);
+  }
+
+  // Horizontal connector line
+  &::after {
+    content: "";
+    position: absolute;
+    top: calc(var(--organizationChart-spacing-vertical, $organizationChart-spacing-vertical) / 2);
+    left: calc(50% / var(--organizationChart-children-count, 1));
+    right: calc(50% / var(--organizationChart-children-count, 1));
+    height: var(--organizationChart-connector-width, $organizationChart-connector-width);
+    background-color: var(--organizationChart-connector-color, $organizationChart-connector-color);
+  }
+}
+
+// Child nodes vertical connectors
+.#{$c}__children > .#{$c}__node-wrapper {
+  position: relative;
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: calc(-1 * var(--organizationChart-spacing-vertical, $organizationChart-spacing-vertical) / 2);
+    left: 50%;
+    width: var(--organizationChart-connector-width, $organizationChart-connector-width);
+    height: calc(var(--organizationChart-spacing-vertical, $organizationChart-spacing-vertical) / 2);
+    background-color: var(--organizationChart-connector-color, $organizationChart-connector-color);
+    transform: translateX(-50%);
+  }
+}
+
+// Single child - no horizontal line needed
+.#{$c}__children:has(> .#{$c}__node-wrapper:only-child)::after {
+  display: none;
+}