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

package/src/components/PickList/PickList.scss

@@ -0,0 +1,126 @@
+@use "../../../dist/scss/tokens" as *;
+
+$c: picklist;
+
+.#{$c} {
+  display: flex;
+  align-items: stretch;
+  gap: var(--picklist-gap, $picklist-gap);
+}
+
+.#{$c}--disabled {
+  opacity: 0.6;
+  pointer-events: none;
+}
+
+// List panels (source and target)
+.#{$c}__list {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 200px;
+  background-color: var(--picklist-background-default, $picklist-background-default);
+  border: var(--picklist-border-width, $picklist-border-width) solid var(--picklist-border-color-default, $picklist-border-color-default);
+  border-radius: var(--picklist-radius, $picklist-radius);
+  overflow: hidden;
+}
+
+.#{$c}__header {
+  padding: var(--picklist-header-padding-y, $picklist-header-padding-y) var(--picklist-header-padding-x, $picklist-header-padding-x);
+  background-color: var(--picklist-header-background, $picklist-header-background);
+  color: var(--picklist-header-text, $picklist-header-text);
+  border-bottom: 1px solid var(--picklist-header-borderColor, $picklist-header-borderColor);
+  font-weight: 600;
+  font-size: 14px;
+}
+
+.#{$c}__items {
+  flex: 1;
+  min-height: var(--picklist-list-minHeight, $picklist-list-minHeight);
+  max-height: var(--picklist-list-maxHeight, $picklist-list-maxHeight);
+  overflow-y: auto;
+  padding: var(--picklist-list-padding, $picklist-list-padding);
+}
+
+.#{$c}__item {
+  display: flex;
+  align-items: center;
+  padding: var(--picklist-item-padding-y, $picklist-item-padding-y) var(--picklist-item-padding-x, $picklist-item-padding-x);
+  background-color: var(--picklist-item-background-default, $picklist-item-background-default);
+  color: var(--picklist-item-text-default, $picklist-item-text-default);
+  border-radius: var(--picklist-item-radius, $picklist-item-radius);
+  cursor: pointer;
+  user-select: none;
+  transition: background-color 0.15s ease;
+
+  &:hover {
+    background-color: var(--picklist-item-background-hover, $picklist-item-background-hover);
+  }
+
+  &:focus {
+    outline: none;
+    background-color: var(--picklist-item-background-hover, $picklist-item-background-hover);
+  }
+
+  &:focus-visible {
+    outline: var(--picklist-focus-ringWidth, $picklist-focus-ringWidth) solid var(--picklist-focus-ringColor, $picklist-focus-ringColor);
+    outline-offset: -2px;
+  }
+}
+
+.#{$c}__item--selected {
+  background-color: var(--picklist-item-background-selected, $picklist-item-background-selected);
+  color: var(--picklist-item-text-selected, $picklist-item-text-selected);
+
+  &:hover {
+    background-color: var(--picklist-item-background-selected, $picklist-item-background-selected);
+    filter: brightness(0.95);
+  }
+}
+
+.#{$c}__empty {
+  padding: var(--picklist-item-padding-y, $picklist-item-padding-y) var(--picklist-item-padding-x, $picklist-item-padding-x);
+  color: var(--picklist-item-text-default, $picklist-item-text-default);
+  opacity: 0.6;
+  text-align: center;
+  font-size: 14px;
+}
+
+// Transfer controls
+.#{$c}__controls {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: var(--picklist-controls-gap, $picklist-controls-gap);
+}
+
+.#{$c}__button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--picklist-controls-button-size, $picklist-controls-button-size);
+  height: var(--picklist-controls-button-size, $picklist-controls-button-size);
+  padding: 0;
+  background-color: var(--picklist-controls-button-background-default, $picklist-controls-button-background-default);
+  border: 1px solid var(--picklist-controls-button-border, $picklist-controls-button-border);
+  border-radius: var(--picklist-controls-button-radius, $picklist-controls-button-radius);
+  color: var(--picklist-controls-button-icon-default, $picklist-controls-button-icon-default);
+  cursor: pointer;
+  transition: all 0.15s ease;
+
+  &:hover:not(:disabled) {
+    background-color: var(--picklist-controls-button-background-hover, $picklist-controls-button-background-hover);
+  }
+
+  &:focus-visible {
+    outline: var(--picklist-focus-ringWidth, $picklist-focus-ringWidth) solid var(--picklist-focus-ringColor, $picklist-focus-ringColor);
+    outline-offset: var(--picklist-focus-ringOffset, $picklist-focus-ringOffset);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    background-color: var(--picklist-controls-button-background-disabled, $picklist-controls-button-background-disabled);
+    color: var(--picklist-controls-button-icon-disabled, $picklist-controls-button-icon-disabled);
+    border-color: var(--picklist-controls-button-icon-disabled, $picklist-controls-button-icon-disabled);
+  }
+}

package/src/components/PickList/PickList.vue

@@ -0,0 +1,249 @@
+<template>
+  <div class="picklist" :class="additionalClasses">
+    <!-- Source List -->
+    <div class="picklist__list picklist__list--source">
+      <div v-if="sourceHeader" class="picklist__header">
+        <slot name="sourceHeader">{{ sourceHeader }}</slot>
+      </div>
+      <div class="picklist__items" role="listbox" aria-label="Source list">
+        <div
+          v-for="(item, index) in sourceItems"
+          :key="getItemKey(item, index)"
+          class="picklist__item"
+          :class="{
+            'picklist__item--selected': isSourceSelected(item)
+          }"
+          role="option"
+          :aria-selected="isSourceSelected(item)"
+          :tabindex="0"
+          @click="toggleSourceSelection(item)"
+          @keydown.enter="toggleSourceSelection(item)"
+          @keydown.space.prevent="toggleSourceSelection(item)"
+        >
+          <slot name="item" :item="item">
+            {{ getItemLabel(item) }}
+          </slot>
+        </div>
+        <div v-if="sourceItems.length === 0" class="picklist__empty">
+          <slot name="sourceEmpty">No items</slot>
+        </div>
+      </div>
+    </div>
+
+    <!-- Transfer Controls -->
+    <div class="picklist__controls">
+      <button
+        type="button"
+        class="picklist__button"
+        :disabled="sourceSelection.length === 0"
+        aria-label="Move to target"
+        @click="moveToTarget"
+      >
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+          <path d="M6 4L10 8L6 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+      </button>
+      <button
+        type="button"
+        class="picklist__button"
+        :disabled="sourceItems.length === 0"
+        aria-label="Move all to target"
+        @click="moveAllToTarget"
+      >
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+          <path d="M4 4L8 8L4 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+          <path d="M8 4L12 8L8 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+      </button>
+      <button
+        type="button"
+        class="picklist__button"
+        :disabled="targetSelection.length === 0"
+        aria-label="Move to source"
+        @click="moveToSource"
+      >
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+          <path d="M10 4L6 8L10 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+      </button>
+      <button
+        type="button"
+        class="picklist__button"
+        :disabled="targetItems.length === 0"
+        aria-label="Move all to source"
+        @click="moveAllToSource"
+      >
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+          <path d="M12 4L8 8L12 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+          <path d="M8 4L4 8L8 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+      </button>
+    </div>
+
+    <!-- Target List -->
+    <div class="picklist__list picklist__list--target">
+      <div v-if="targetHeader" class="picklist__header">
+        <slot name="targetHeader">{{ targetHeader }}</slot>
+      </div>
+      <div class="picklist__items" role="listbox" aria-label="Target list">
+        <div
+          v-for="(item, index) in targetItems"
+          :key="getItemKey(item, index)"
+          class="picklist__item"
+          :class="{
+            'picklist__item--selected': isTargetSelected(item)
+          }"
+          role="option"
+          :aria-selected="isTargetSelected(item)"
+          :tabindex="0"
+          @click="toggleTargetSelection(item)"
+          @keydown.enter="toggleTargetSelection(item)"
+          @keydown.space.prevent="toggleTargetSelection(item)"
+        >
+          <slot name="item" :item="item">
+            {{ getItemLabel(item) }}
+          </slot>
+        </div>
+        <div v-if="targetItems.length === 0" class="picklist__empty">
+          <slot name="targetEmpty">No items</slot>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style src="./PickList.scss"></style>
+
+<script setup lang="ts">
+import type { PickListProps, PickListEmits } from '../../types';
+import { ref, computed } from "vue";
+
+defineOptions({ name: 'FtpPickList' });
+
+const props = withDefaults(defineProps<PickListProps>(), {
+  source: () => [],
+  target: () => [],
+  sourceHeader: "",
+  targetHeader: "",
+  dataKey: null,
+  labelKey: "label",
+  isDisabled: false,
+});
+
+const emit = defineEmits(["update:source", "update:target", "move-to-target", "move-to-source"]);
+
+const sourceSelection = ref<any[]>([]);
+const targetSelection = ref<any[]>([]);
+
+const sourceItems = computed(() => props.source);
+const targetItems = computed(() => props.target);
+
+const getItemKey = (item: any, index: any) => {
+  if (props.dataKey && typeof item === "object") {
+    return item[props.dataKey];
+  }
+  return index;
+};
+
+const getItemLabel = (item: any) => {
+  if (typeof item === "string" || typeof item === "number") {
+    return item;
+  }
+  return item[props.labelKey];
+};
+
+const getItemValue = (item: any) => {
+  if (props.dataKey && typeof item === "object") {
+    return item[props.dataKey];
+  }
+  return item;
+};
+
+const isSourceSelected = (item: any) => {
+  const value = getItemValue(item);
+  return sourceSelection.value.some((s) => getItemValue(s) === value);
+};
+
+const isTargetSelected = (item: any) => {
+  const value = getItemValue(item);
+  return targetSelection.value.some((s) => getItemValue(s) === value);
+};
+
+const toggleSourceSelection = (item: any) => {
+  if (props.isDisabled) return;
+  const value = getItemValue(item);
+  const index = sourceSelection.value.findIndex((s) => getItemValue(s) === value);
+  if (index > -1) {
+    sourceSelection.value.splice(index, 1);
+  } else {
+    sourceSelection.value.push(item);
+  }
+};
+
+const toggleTargetSelection = (item: any) => {
+  if (props.isDisabled) return;
+  const value = getItemValue(item);
+  const index = targetSelection.value.findIndex((s) => getItemValue(s) === value);
+  if (index > -1) {
+    targetSelection.value.splice(index, 1);
+  } else {
+    targetSelection.value.push(item);
+  }
+};
+
+const moveToTarget = () => {
+  if (props.isDisabled || sourceSelection.value.length === 0) return;
+
+  const newSource = sourceItems.value.filter(
+    (item) => !sourceSelection.value.some((s) => getItemValue(s) === getItemValue(item))
+  );
+  const newTarget = [...targetItems.value, ...sourceSelection.value];
+
+  emit("update:source", newSource);
+  emit("update:target", newTarget);
+  emit("move-to-target", { items: sourceSelection.value });
+  sourceSelection.value = [];
+};
+
+const moveAllToTarget = () => {
+  if (props.isDisabled || sourceItems.value.length === 0) return;
+
+  const movedItems = [...sourceItems.value];
+  const newTarget = [...targetItems.value, ...movedItems];
+
+  emit("update:source", []);
+  emit("update:target", newTarget);
+  emit("move-to-target", { items: movedItems });
+  sourceSelection.value = [];
+};
+
+const moveToSource = () => {
+  if (props.isDisabled || targetSelection.value.length === 0) return;
+
+  const newTarget = targetItems.value.filter(
+    (item) => !targetSelection.value.some((s) => getItemValue(s) === getItemValue(item))
+  );
+  const newSource = [...sourceItems.value, ...targetSelection.value];
+
+  emit("update:source", newSource);
+  emit("update:target", newTarget);
+  emit("move-to-source", { items: targetSelection.value });
+  targetSelection.value = [];
+};
+
+const moveAllToSource = () => {
+  if (props.isDisabled || targetItems.value.length === 0) return;
+
+  const movedItems = [...targetItems.value];
+  const newSource = [...sourceItems.value, ...movedItems];
+
+  emit("update:source", newSource);
+  emit("update:target", []);
+  emit("move-to-source", { items: movedItems });
+  targetSelection.value = [];
+};
+
+const additionalClasses = computed(() =>
+  [props.isDisabled && "picklist--disabled"].filter(Boolean).join(" ")
+);
+</script>

package/src/components/PopOver/PopOver.scss

@@ -0,0 +1,112 @@
+@use "../../../dist/scss/tokens" as *;
+@use "../../scss/mixins/elevation" as *;
+
+$c: popover;
+
+.#{$c}-wrapper {
+  display: inline-block;
+  position: relative;
+}
+
+.#{$c} {
+  @include elevation(3);
+  position: fixed;
+  z-index: var(--popover-zIndex, $popover-zIndex);
+  padding: var(--popover-padding-y, $popover-padding-y) var(--popover-padding-x, $popover-padding-x);
+  // Component token overrides
+  background-color: var(--popover-background, $popover-background);
+  border-radius: var(--popover-radius, $popover-radius);
+  box-shadow: var(--popover-shadow, $popover-shadow);
+  border-color: var(--popover-border-color, $popover-border-color);
+  border-width: var(--popover-border-width, $popover-border-width);
+  max-width: var(--popover-maxWidth, $popover-maxWidth);
+}
+
+.#{$c}__content {
+  display: block;
+}
+
+// Arrow
+.#{$c}__arrow {
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-style: solid;
+}
+
+$arrow-size: var(--popover-arrow-size, $popover-arrow-size);
+
+// Position: Top (arrow points down)
+.#{$c}--top {
+  .#{$c}__arrow {
+    bottom: calc(-1 * #{$arrow-size});
+    left: 50%;
+    transform: translateX(-50%);
+    border-width: #{$arrow-size} #{$arrow-size} 0 #{$arrow-size};
+    border-color: var(--popover-background, $popover-background) transparent transparent transparent;
+  }
+}
+
+// Position: Bottom (arrow points up)
+.#{$c}--bottom {
+  .#{$c}__arrow {
+    top: calc(-1 * #{$arrow-size});
+    left: 50%;
+    transform: translateX(-50%);
+    border-width: 0 #{$arrow-size} #{$arrow-size} #{$arrow-size};
+    border-color: transparent transparent var(--popover-background, $popover-background) transparent;
+  }
+}
+
+// Position: Left (arrow points right)
+.#{$c}--left {
+  .#{$c}__arrow {
+    right: calc(-1 * #{$arrow-size});
+    top: 50%;
+    transform: translateY(-50%);
+    border-width: #{$arrow-size} 0 #{$arrow-size} #{$arrow-size};
+    border-color: transparent transparent transparent var(--popover-background, $popover-background);
+  }
+}
+
+// Position: Right (arrow points left)
+.#{$c}--right {
+  .#{$c}__arrow {
+    left: calc(-1 * #{$arrow-size});
+    top: 50%;
+    transform: translateY(-50%);
+    border-width: #{$arrow-size} #{$arrow-size} #{$arrow-size} 0;
+    border-color: transparent var(--popover-background, $popover-background) transparent transparent;
+  }
+}
+
+// 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;
+}
+
+.#{$c}-fade-enter-from.#{$c}--top,
+.#{$c}-fade-leave-to.#{$c}--top {
+  transform: translateY(4px);
+}
+
+.#{$c}-fade-enter-from.#{$c}--bottom,
+.#{$c}-fade-leave-to.#{$c}--bottom {
+  transform: translateY(-4px);
+}
+
+.#{$c}-fade-enter-from.#{$c}--left,
+.#{$c}-fade-leave-to.#{$c}--left {
+  transform: translateX(4px);
+}
+
+.#{$c}-fade-enter-from.#{$c}--right,
+.#{$c}-fade-leave-to.#{$c}--right {
+  transform: translateX(-4px);
+}