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

package/src/components/Drawer/Drawer.vue

@@ -0,0 +1,137 @@
+<template>
+  <Teleport to="body">
+    <Transition name="drawer-fade">
+      <div
+        v-if="visible"
+        class="drawer__overlay"
+        @click="onOverlayClick"
+        @keydown.escape="onEscapeKey"
+      >
+        <Transition :name="transitionName">
+          <div
+            v-if="visible"
+            ref="drawerRef"
+            class="drawer"
+            :class="additionalClasses"
+            role="dialog"
+            aria-modal="true"
+            :aria-labelledby="headerId"
+            @click.stop
+          >
+            <div v-if="$slots.header || header || closable" class="drawer__header">
+              <slot name="header">
+                <span :id="headerId" class="drawer__title">{{ header }}</span>
+              </slot>
+              <button
+                v-if="closable"
+                type="button"
+                class="drawer__close"
+                aria-label="Close"
+                @click="close"
+              >
+                <svg
+                  class="drawer__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>
+
+            <div class="drawer__content">
+              <slot />
+            </div>
+
+            <div v-if="$slots.footer" class="drawer__footer">
+              <slot name="footer" />
+            </div>
+          </div>
+        </Transition>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<style src="./Drawer.scss"></style>
+
+<script setup lang="ts">
+import type { DrawerProps, DrawerEmits } from '../../types';
+import { computed, ref, watch, onUnmounted } from "vue";
+
+defineOptions({ name: 'FtpDrawer' });
+
+const props = withDefaults(defineProps<DrawerProps>(), {
+  visible: false,
+  header: "",
+  position: "right",
+  size: "md",
+  closable: true,
+  dismissable: true,
+  closeOnEscape: true,
+  blockScroll: true,
+});
+
+const emit = defineEmits(["update:visible", "show", "hide"]);
+
+const drawerRef = ref(null);
+const headerId = `drawer-header-${Math.random().toString(36).substr(2, 9)}`;
+
+const additionalClasses = computed(() =>
+  [
+    `drawer--position-${props.position}`,
+    `drawer--size-${props.size}`,
+  ]
+    .filter(Boolean)
+    .join(" ")
+);
+
+const transitionName = computed(() => {
+  return `drawer-slide-${props.position}`;
+});
+
+const close = () => {
+  emit("update:visible", false);
+  emit("hide");
+};
+
+const onOverlayClick = () => {
+  if (props.dismissable) {
+    close();
+  }
+};
+
+const onEscapeKey = (event: KeyboardEvent) => {
+  if (props.closeOnEscape && props.visible) {
+    event.preventDefault();
+    close();
+  }
+};
+
+// Block scroll when drawer is open
+watch(
+  () => props.visible,
+  (newValue) => {
+    if (newValue) {
+      emit("show");
+      if (props.blockScroll) {
+        document.body.style.overflow = "hidden";
+      }
+    } else {
+      if (props.blockScroll) {
+        document.body.style.overflow = "";
+      }
+    }
+  }
+);
+
+// Cleanup on unmount
+onUnmounted(() => {
+  document.body.style.overflow = "";
+});
+</script>

package/src/components/Dropdown/Dropdown.scss

@@ -0,0 +1,218 @@
+@use "../../../dist/scss/tokens" as *;
+@use "../../scss/mixins/elevation" as *;
+
+$c: dropdown;
+
+.#{$c} {
+  position: relative;
+  display: inline-flex;
+  width: 100%;
+}
+
+.#{$c}__trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  appearance: none;
+  background-color: var(--dropdown-background-default, $dropdown-background-default);
+  border: var(--dropdown-border-width, $dropdown-border-width) solid var(--dropdown-border-color-default, $dropdown-border-color-default);
+  border-radius: var(--dropdown-radius, $dropdown-radius);
+  padding: 0 var(--dropdown-padding-x, $dropdown-padding-x);
+  color: var(--dropdown-text-default, $dropdown-text-default);
+  cursor: pointer;
+  text-align: left;
+  transition: all 0.15s ease;
+
+  &:hover:not(:disabled) {
+    border-color: var(--dropdown-border-color-hover, $dropdown-border-color-hover);
+  }
+
+  &:focus {
+    outline: var(--dropdown-focus-ringWidth, $dropdown-focus-ringWidth) solid var(--dropdown-focus-ringColor, $dropdown-focus-ringColor);
+    outline-offset: var(--dropdown-focus-ringOffset, $dropdown-focus-ringOffset);
+    border-color: var(--dropdown-border-color-focus, $dropdown-border-color-focus);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    background-color: var(--dropdown-background-disabled, $dropdown-background-disabled);
+    border-color: var(--dropdown-border-color-disabled, $dropdown-border-color-disabled);
+    color: var(--dropdown-text-disabled, $dropdown-text-disabled);
+  }
+}
+
+.#{$c}__value {
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.#{$c}__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: 8px;
+  color: var(--dropdown-icon-color-default, $dropdown-icon-color-default);
+  transition: transform 0.15s ease;
+  flex-shrink: 0;
+}
+
+.#{$c}__icon--open {
+  transform: rotate(180deg);
+}
+
+// Placeholder state
+.#{$c}--placeholder {
+  .#{$c}__value {
+    color: var(--dropdown-text-placeholder, $dropdown-text-placeholder);
+  }
+}
+
+// Disabled state
+.#{$c}--disabled {
+  .#{$c}__icon {
+    color: var(--dropdown-icon-color-disabled, $dropdown-icon-color-disabled);
+  }
+}
+
+// Invalid state
+.#{$c}--invalid {
+  .#{$c}__trigger {
+    border-color: var(--dropdown-border-color-error, $dropdown-border-color-error);
+
+    &:focus {
+      border-color: var(--dropdown-border-color-error, $dropdown-border-color-error);
+    }
+  }
+}
+
+// Sizes
+.#{$c}--size-sm {
+  .#{$c}__trigger {
+    height: var(--dropdown-height-sm, $dropdown-height-sm);
+    font-size: var(--dropdown-fontSize-sm, $dropdown-fontSize-sm);
+  }
+}
+
+.#{$c}--size-md {
+  .#{$c}__trigger {
+    height: var(--dropdown-height-md, $dropdown-height-md);
+    font-size: var(--dropdown-fontSize-md, $dropdown-fontSize-md);
+  }
+}
+
+.#{$c}--size-lg {
+  .#{$c}__trigger {
+    height: var(--dropdown-height-lg, $dropdown-height-lg);
+    font-size: var(--dropdown-fontSize-lg, $dropdown-fontSize-lg);
+  }
+}
+
+// Panel (dropdown menu)
+.#{$c}__panel {
+  @include elevation(3);
+  // Component token overrides
+  background-color: var(--dropdown-panel-background, $dropdown-panel-background);
+  border-color: var(--dropdown-panel-border, $dropdown-panel-border);
+  border-radius: var(--dropdown-panel-radius, $dropdown-panel-radius);
+  box-shadow: var(--dropdown-panel-shadow, $dropdown-panel-shadow);
+  overflow: hidden;
+}
+
+// Filter
+.#{$c}__filter {
+  position: relative;
+  padding: var(--dropdown-panel-padding, $dropdown-panel-padding);
+  border-bottom: 1px solid var(--dropdown-filter-border, $dropdown-filter-border);
+}
+
+.#{$c}__filter-input {
+  width: 100%;
+  height: var(--dropdown-filter-height, $dropdown-filter-height);
+  padding: 0 var(--dropdown-filter-padding-x, $dropdown-filter-padding-x);
+  padding-left: 32px;
+  background-color: var(--dropdown-filter-background, $dropdown-filter-background);
+  border: 1px solid var(--dropdown-filter-border, $dropdown-filter-border);
+  border-radius: var(--dropdown-filter-radius, $dropdown-filter-radius);
+  font-size: 14px;
+  color: var(--dropdown-text-default, $dropdown-text-default);
+
+  &::placeholder {
+    color: var(--dropdown-text-placeholder, $dropdown-text-placeholder);
+  }
+
+  &:focus {
+    outline: none;
+    border-color: var(--dropdown-border-color-focus, $dropdown-border-color-focus);
+  }
+}
+
+.#{$c}__filter-icon {
+  position: absolute;
+  left: calc(var(--dropdown-panel-padding, $dropdown-panel-padding) + 10px);
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--dropdown-text-placeholder, $dropdown-text-placeholder);
+  pointer-events: none;
+}
+
+// List container
+.#{$c}__list {
+  max-height: var(--dropdown-panel-maxHeight, $dropdown-panel-maxHeight);
+  overflow-y: auto;
+  padding: var(--dropdown-panel-padding, $dropdown-panel-padding);
+}
+
+// Option
+.#{$c}__option {
+  display: flex;
+  align-items: center;
+  padding: var(--dropdown-option-padding-y, $dropdown-option-padding-y) var(--dropdown-option-padding-x, $dropdown-option-padding-x);
+  background-color: var(--dropdown-option-background-default, $dropdown-option-background-default);
+  border-radius: var(--dropdown-option-radius, $dropdown-option-radius);
+  font-size: 15px;
+  color: var(--dropdown-option-text-default, $dropdown-option-text-default);
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+  user-select: none;
+
+  &:hover:not(.#{$c}__option--disabled) {
+    background-color: var(--dropdown-option-background-hover, $dropdown-option-background-hover);
+  }
+}
+
+.#{$c}__option--selected {
+  background-color: var(--dropdown-option-background-selected, $dropdown-option-background-selected);
+  color: var(--dropdown-option-text-selected, $dropdown-option-text-selected);
+
+  &:hover {
+    background-color: var(--dropdown-option-background-selected, $dropdown-option-background-selected);
+    filter: brightness(0.95);
+  }
+}
+
+.#{$c}__option--focused:not(.#{$c}__option--selected) {
+  background-color: var(--dropdown-option-background-focus, $dropdown-option-background-focus);
+}
+
+.#{$c}__option--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.#{$c}__option-label {
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+// Empty state
+.#{$c}__empty {
+  padding: var(--dropdown-option-padding-y, $dropdown-option-padding-y) var(--dropdown-option-padding-x, $dropdown-option-padding-x);
+  color: var(--dropdown-text-placeholder, $dropdown-text-placeholder);
+  text-align: center;
+  font-size: 14px;
+}

package/src/components/Dropdown/Dropdown.vue

@@ -0,0 +1,313 @@
+<template>
+  <div
+    ref="containerRef"
+    class="dropdown"
+    :class="additionalClasses"
+  >
+    <button
+      ref="triggerRef"
+      type="button"
+      class="dropdown__trigger"
+      :disabled="isDisabled"
+      :aria-expanded="isOpen"
+      aria-haspopup="listbox"
+      :aria-describedby="ariaDescribedby || undefined"
+      @click="toggle"
+      @keydown="onTriggerKeydown"
+    >
+      <span class="dropdown__value">
+        {{ displayValue }}
+      </span>
+      <span class="dropdown__icon" :class="{ 'dropdown__icon--open': isOpen }">
+        <svg
+          width="16"
+          height="16"
+          viewBox="0 0 16 16"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M4 6L8 10L12 6"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+      </span>
+    </button>
+
+    <Teleport to="body">
+      <div
+        v-if="isOpen"
+        ref="panelRef"
+        class="dropdown__panel"
+        :style="panelStyle"
+      >
+        <div v-if="filter" class="dropdown__filter">
+          <input
+            ref="filterInputRef"
+            v-model="filterValue"
+            type="text"
+            class="dropdown__filter-input"
+            placeholder="Search..."
+            @input="onFilterInput"
+            @keydown="onFilterKeydown"
+          />
+          <svg
+            class="dropdown__filter-icon"
+            width="16"
+            height="16"
+            viewBox="0 0 16 16"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M7 12C9.76142 12 12 9.76142 12 7C12 4.23858 9.76142 2 7 2C4.23858 2 2 4.23858 2 7C2 9.76142 4.23858 12 7 12Z"
+              stroke="currentColor"
+              stroke-width="1.5"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+            <path
+              d="M14 14L10.5 10.5"
+              stroke="currentColor"
+              stroke-width="1.5"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
+        </div>
+        <div class="dropdown__list" role="listbox">
+          <div
+            v-for="(option, index) in filteredOptions"
+            :key="getOptionValue(option)"
+            class="dropdown__option"
+            :class="{
+              'dropdown__option--selected': isSelected(option),
+              'dropdown__option--focused': focusedIndex === index,
+              'dropdown__option--disabled': option.disabled,
+            }"
+            role="option"
+            :aria-selected="isSelected(option)"
+            @click="!option.disabled && selectOption(option)"
+            @mouseenter="focusedIndex = index"
+          >
+            <span class="dropdown__option-label">{{ getOptionLabel(option) }}</span>
+          </div>
+          <div v-if="filteredOptions.length === 0" class="dropdown__empty">
+            No results found
+          </div>
+        </div>
+      </div>
+    </Teleport>
+  </div>
+</template>
+
+<style src="./Dropdown.scss"></style>
+
+<script setup lang="ts">
+import type { DropdownProps, DropdownEmits } from '../../types';
+import { computed, ref, watch, nextTick, onMounted, onUnmounted } from "vue";
+
+defineOptions({ name: 'FtpDropdown' });
+
+const props = withDefaults(defineProps<DropdownProps>(), {
+  modelValue: null,
+  options: () => [],
+  optionLabel: "label",
+  optionValue: "value",
+  filter: false,
+  placeholder: "Select an option",
+  size: "md",
+  isDisabled: false,
+  isInvalid: false,
+});
+
+const emit = defineEmits(["update:modelValue", "change", "show", "hide", "filter"]);
+
+const containerRef = ref<HTMLElement | null>(null);
+const triggerRef = ref<HTMLElement | null>(null);
+const panelRef = ref<HTMLElement | null>(null);
+const filterInputRef = ref<HTMLElement | null>(null);
+
+const isOpen = ref(false);
+const filterValue = ref("");
+const focusedIndex = ref(-1);
+const panelStyle = ref({});
+
+const getOptionLabel = (option: any) => {
+  if (typeof option === "string" || typeof option === "number") {
+    return option;
+  }
+  return option[props.optionLabel];
+};
+
+const getOptionValue = (option: any) => {
+  if (typeof option === "string" || typeof option === "number") {
+    return option;
+  }
+  return option[props.optionValue];
+};
+
+const displayValue = computed(() => {
+  if (props.modelValue === null || props.modelValue === undefined) {
+    return props.placeholder;
+  }
+  const selectedOption = props.options.find(
+    (option) => getOptionValue(option) === props.modelValue
+  );
+  return selectedOption ? getOptionLabel(selectedOption) : props.placeholder;
+});
+
+const filteredOptions = computed((): any[] => {
+  if (!filterValue.value) {
+    return props.options;
+  }
+  const searchTerm = filterValue.value.toLowerCase();
+  return props.options.filter((option) => {
+    const label = getOptionLabel(option);
+    return String(label).toLowerCase().includes(searchTerm);
+  });
+});
+
+const isSelected = (option: any) => {
+  return props.modelValue === getOptionValue(option);
+};
+
+const selectOption = (option: any) => {
+  if (props.isDisabled || option.disabled) return;
+
+  const value = getOptionValue(option);
+  emit("update:modelValue", value);
+  emit("change", { value, originalEvent: event });
+  close();
+};
+
+const updatePanelPosition = () => {
+  if (!triggerRef.value) return;
+
+  const rect = triggerRef.value.getBoundingClientRect();
+  const viewportHeight = window.innerHeight;
+  const spaceBelow = viewportHeight - rect.bottom;
+  const spaceAbove = rect.top;
+  const panelHeight = 300; // approximate max height
+
+  const openBelow = spaceBelow >= panelHeight || spaceBelow >= spaceAbove;
+
+  panelStyle.value = {
+    position: "fixed",
+    left: `${rect.left}px`,
+    width: `${rect.width}px`,
+    zIndex: 1000,
+    ...(openBelow
+      ? { top: `${rect.bottom + 4}px` }
+      : { bottom: `${viewportHeight - rect.top + 4}px` }),
+  };
+};
+
+const open = () => {
+  if (isOpen.value || props.isDisabled) return;
+
+  isOpen.value = true;
+  filterValue.value = "";
+  focusedIndex.value = -1;
+
+  nextTick(() => {
+    updatePanelPosition();
+    if (props.filter && filterInputRef.value) {
+      filterInputRef.value.focus();
+    }
+  });
+
+  emit("show");
+};
+
+const close = () => {
+  if (!isOpen.value) return;
+
+  isOpen.value = false;
+  filterValue.value = "";
+  emit("hide");
+};
+
+const toggle = () => {
+  if (isOpen.value) {
+    close();
+  } else {
+    open();
+  }
+};
+
+const onTriggerKeydown = (event: KeyboardEvent) => {
+  if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+    event.preventDefault();
+    if (!isOpen.value) {
+      open();
+    }
+  } else if (event.key === "Enter" || event.key === " ") {
+    event.preventDefault();
+    toggle();
+  } else if (event.key === "Escape") {
+    close();
+  }
+};
+
+const onFilterInput = (event: Event) => {
+  focusedIndex.value = 0;
+  emit("filter", { value: filterValue.value, originalEvent: event });
+};
+
+const onFilterKeydown = (event: KeyboardEvent) => {
+  if (event.key === "ArrowDown") {
+    event.preventDefault();
+    focusedIndex.value = Math.min(focusedIndex.value + 1, filteredOptions.value.length - 1);
+  } else if (event.key === "ArrowUp") {
+    event.preventDefault();
+    focusedIndex.value = Math.max(focusedIndex.value - 1, 0);
+  } else if (event.key === "Enter") {
+    event.preventDefault();
+    if (focusedIndex.value >= 0 && filteredOptions.value[focusedIndex.value]) {
+      const option = filteredOptions.value[focusedIndex.value];
+      if (!option.disabled) {
+        selectOption(option);
+      }
+    }
+  } else if (event.key === "Escape") {
+    close();
+    triggerRef.value?.focus();
+  }
+};
+
+const onClickOutside = (event: MouseEvent) => {
+  if (!containerRef.value?.contains(event.target as Node) && !panelRef.value?.contains(event.target as Node)) {
+    close();
+  }
+};
+
+const onScroll = () => {
+  if (isOpen.value) {
+    updatePanelPosition();
+  }
+};
+
+onMounted(() => {
+  document.addEventListener("click", onClickOutside);
+  window.addEventListener("scroll", onScroll, true);
+  window.addEventListener("resize", onScroll);
+});
+
+onUnmounted(() => {
+  document.removeEventListener("click", onClickOutside);
+  window.removeEventListener("scroll", onScroll, true);
+  window.removeEventListener("resize", onScroll);
+});
+
+const additionalClasses = computed(() => [
+  `dropdown--size-${props.size}`,
+  isOpen.value && "dropdown--open",
+  props.isDisabled && "dropdown--disabled",
+  props.isInvalid && "dropdown--invalid",
+  (props.modelValue === null || props.modelValue === undefined) && "dropdown--placeholder",
+].filter(Boolean).join(" "));
+</script>