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

package/src/components/MeterGroup/MeterGroup.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="meter-group" :class="additionalClasses">
+    <div v-if="showLabels" class="meter-group__header">
+      <div class="meter-group__labels">
+        <span
+          v-for="(item, index) in values"
+          :key="index"
+          class="meter-group__label-item"
+        >
+          <span
+            class="meter-group__marker"
+            :style="{ backgroundColor: getColor(item.color) }"
+          />
+          <span class="meter-group__label-text">{{ item.label }}</span>
+          <span class="meter-group__label-value">{{ formatValue(item.value) }}</span>
+        </span>
+      </div>
+    </div>
+    <div class="meter-group__track" role="meter" :aria-valuemax="max">
+      <div
+        v-for="(item, index) in values"
+        :key="index"
+        class="meter-group__meter"
+        :style="getMeterStyle(item)"
+        :aria-label="item.label"
+        :aria-valuenow="item.value"
+      />
+    </div>
+  </div>
+</template>
+
+<style src="./MeterGroup.scss"></style>
+
+<script setup lang="ts">
+import type { MeterGroupProps } from '../../types';
+import { computed } from "vue";
+
+defineOptions({ name: 'FtpMeterGroup' });
+
+const props = withDefaults(defineProps<MeterGroupProps>(), {
+  max: 100,
+  orientation: "horizontal",
+  showLabels: true,
+});
+
+const colorMap: Record<string, string> = {
+  primary: "var(--meter-group-colors-primary)",
+  success: "var(--meter-group-colors-success)",
+  warning: "var(--meter-group-colors-warning)",
+  danger: "var(--meter-group-colors-danger)",
+};
+
+function getColor(color: any) {
+  return colorMap[color] || color || colorMap.primary;
+}
+
+function getMeterStyle(item: any) {
+  const percentage = (item.value / props.max) * 100;
+  return {
+    width: props.orientation === "horizontal" ? `${percentage}%` : "100%",
+    height: props.orientation === "vertical" ? `${percentage}%` : "100%",
+    backgroundColor: getColor(item.color),
+  };
+}
+
+function formatValue(value: any) {
+  return `${Math.round((value / props.max) * 100)}%`;
+}
+
+const additionalClasses = computed(() =>
+  [`meter-group--${props.orientation}`].filter(Boolean).join(" ")
+);
+</script>

package/src/components/MultiSelect/MultiSelect.scss

@@ -0,0 +1,239 @@
+@use "../../../dist/scss/tokens" as *;
+
+$c: multi-select;
+
+.#{$c} {
+  position: relative;
+  display: inline-flex;
+  width: 100%;
+}
+
+.#{$c}__trigger {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-height: var(--multi-select-minHeight, $multi-select-minHeight);
+  background-color: var(--multi-select-background-default, $multi-select-background-default);
+  border: var(--multi-select-border-width, $multi-select-border-width) solid var(--multi-select-border-color-default, $multi-select-border-color-default);
+  border-radius: var(--multi-select-radius, $multi-select-radius);
+  padding: var(--multi-select-padding-y, $multi-select-padding-y) var(--multi-select-padding-x, $multi-select-padding-x);
+  padding-right: calc(var(--multi-select-padding-x, $multi-select-padding-x) + 24px);
+  cursor: pointer;
+  transition: all 0.15s ease;
+
+  &:hover:not([aria-disabled="true"]) {
+    border-color: var(--multi-select-border-color-hover, $multi-select-border-color-hover);
+  }
+
+  &:focus {
+    outline: var(--multi-select-focus-ringWidth, $multi-select-focus-ringWidth) solid var(--multi-select-focus-ringColor, $multi-select-focus-ringColor);
+    outline-offset: var(--multi-select-focus-ringOffset, $multi-select-focus-ringOffset);
+    border-color: var(--multi-select-border-color-focus, $multi-select-border-color-focus);
+  }
+}
+
+.#{$c}__content {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+}
+
+.#{$c}__placeholder {
+  color: var(--multi-select-text-placeholder, $multi-select-text-placeholder);
+}
+
+.#{$c}__label {
+  color: var(--multi-select-text-default, $multi-select-text-default);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.#{$c}__chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--multi-select-chip-gap, $multi-select-chip-gap);
+}
+
+.#{$c}__chip {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--multi-select-chip-gap, $multi-select-chip-gap);
+  padding: var(--multi-select-chip-padding-y, $multi-select-chip-padding-y) var(--multi-select-chip-padding-x, $multi-select-chip-padding-x);
+  background-color: var(--multi-select-chip-background, $multi-select-chip-background);
+  border-radius: var(--multi-select-chip-radius, $multi-select-chip-radius);
+  font-size: var(--multi-select-chip-fontSize, $multi-select-chip-fontSize);
+}
+
+.#{$c}__chip-label {
+  white-space: nowrap;
+}
+
+.#{$c}__chip-remove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--multi-select-chip-remove-size, $multi-select-chip-remove-size);
+  height: var(--multi-select-chip-remove-size, $multi-select-chip-remove-size);
+  padding: 0;
+  background: transparent;
+  border: none;
+  color: var(--multi-select-chip-remove-color-default, $multi-select-chip-remove-color-default);
+  cursor: pointer;
+  transition: color 0.15s ease;
+
+  &:hover {
+    color: var(--multi-select-chip-remove-color-hover, $multi-select-chip-remove-color-hover);
+  }
+
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.#{$c}__icon {
+  position: absolute;
+  right: var(--multi-select-padding-x, $multi-select-padding-x);
+  top: 50%;
+  transform: translateY(-50%);
+  pointer-events: none;
+  color: var(--multi-select-icon-color-default, $multi-select-icon-color-default);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 0.15s ease;
+
+  &--open {
+    transform: translateY(-50%) rotate(180deg);
+  }
+}
+
+.#{$c}__dropdown {
+  background-color: var(--multi-select-dropdown-background, $multi-select-dropdown-background);
+  border: 1px solid var(--multi-select-dropdown-border, $multi-select-dropdown-border);
+  border-radius: var(--multi-select-dropdown-radius, $multi-select-dropdown-radius);
+  box-shadow: var(--multi-select-dropdown-shadow, $multi-select-dropdown-shadow);
+  overflow: hidden;
+}
+
+.#{$c}__filter {
+  padding: var(--multi-select-filter-padding, $multi-select-filter-padding);
+  border-bottom: 1px solid var(--multi-select-filter-borderColor, $multi-select-filter-borderColor);
+}
+
+.#{$c}__filter-input {
+  width: 100%;
+  padding: var(--multi-select-padding-y, $multi-select-padding-y) var(--multi-select-padding-x, $multi-select-padding-x);
+  border: var(--multi-select-border-width, $multi-select-border-width) solid var(--multi-select-border-color-default, $multi-select-border-color-default);
+  border-radius: var(--multi-select-radius, $multi-select-radius);
+  font-size: inherit;
+
+  &:focus {
+    outline: none;
+    border-color: var(--multi-select-border-color-focus, $multi-select-border-color-focus);
+  }
+}
+
+.#{$c}__options {
+  max-height: var(--multi-select-dropdown-maxHeight, $multi-select-dropdown-maxHeight);
+  overflow-y: auto;
+}
+
+.#{$c}__option {
+  display: flex;
+  align-items: center;
+  gap: var(--multi-select-option-gap, $multi-select-option-gap);
+  padding: var(--multi-select-option-padding-y, $multi-select-option-padding-y) var(--multi-select-option-padding-x, $multi-select-option-padding-x);
+  background-color: var(--multi-select-option-background-default, $multi-select-option-background-default);
+  color: var(--multi-select-option-text-default, $multi-select-option-text-default);
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+
+  &:hover,
+  &--focused {
+    background-color: var(--multi-select-option-background-hover, $multi-select-option-background-hover);
+  }
+}
+
+.#{$c}__checkbox {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  border: 2px solid var(--multi-select-border-color-default, $multi-select-border-color-default);
+  border-radius: 3px;
+  flex-shrink: 0;
+  transition: all 0.15s ease;
+
+  svg {
+    width: 12px;
+    height: 12px;
+    color: white;
+  }
+
+  &--checked {
+    background-color: var(--multi-select-focus-ringColor, $multi-select-focus-ringColor);
+    border-color: var(--multi-select-focus-ringColor, $multi-select-focus-ringColor);
+  }
+}
+
+.#{$c}__option-label {
+  flex: 1;
+  min-width: 0;
+}
+
+.#{$c}__empty {
+  padding: var(--multi-select-option-padding-y, $multi-select-option-padding-y) var(--multi-select-option-padding-x, $multi-select-option-padding-x);
+  color: var(--multi-select-text-placeholder, $multi-select-text-placeholder);
+  text-align: center;
+}
+
+// Disabled state
+.#{$c}--disabled {
+  .#{$c}__trigger {
+    cursor: not-allowed;
+    background-color: var(--multi-select-background-disabled, $multi-select-background-disabled);
+    border-color: var(--multi-select-border-color-disabled, $multi-select-border-color-disabled);
+    color: var(--multi-select-text-disabled, $multi-select-text-disabled);
+  }
+
+  .#{$c}__icon {
+    color: var(--multi-select-icon-color-disabled, $multi-select-icon-color-disabled);
+  }
+}
+
+// Invalid state
+.#{$c}--invalid {
+  .#{$c}__trigger {
+    border-color: var(--multi-select-border-color-error, $multi-select-border-color-error);
+
+    &:focus {
+      border-color: var(--multi-select-border-color-error, $multi-select-border-color-error);
+    }
+  }
+}
+
+// Sizes
+.#{$c}--size-sm {
+  .#{$c}__trigger {
+    min-height: var(--multi-select-height-sm, $multi-select-height-sm);
+    font-size: var(--multi-select-fontSize-sm, $multi-select-fontSize-sm);
+  }
+}
+
+.#{$c}--size-md {
+  .#{$c}__trigger {
+    min-height: var(--multi-select-height-md, $multi-select-height-md);
+    font-size: var(--multi-select-fontSize-md, $multi-select-fontSize-md);
+  }
+}
+
+.#{$c}--size-lg {
+  .#{$c}__trigger {
+    min-height: var(--multi-select-height-lg, $multi-select-height-lg);
+    font-size: var(--multi-select-fontSize-lg, $multi-select-fontSize-lg);
+  }
+}

package/src/components/MultiSelect/MultiSelect.vue

@@ -0,0 +1,296 @@
+<template>
+  <div
+    ref="containerRef"
+    class="multi-select"
+    :class="additionalClasses"
+  >
+    <div
+      class="multi-select__trigger"
+      role="combobox"
+      :aria-expanded="isOpen"
+      :aria-haspopup="true"
+      :aria-disabled="isDisabled"
+      :tabindex="isDisabled ? -1 : 0"
+      @click="toggle"
+      @keydown="onTriggerKeydown"
+    >
+      <div class="multi-select__content">
+        <template v-if="selectedItems.length === 0">
+          <span class="multi-select__placeholder">{{ placeholder }}</span>
+        </template>
+        <template v-else-if="display === 'chip'">
+          <div class="multi-select__chips">
+            <span
+              v-for="item in selectedItems"
+              :key="getOptionValue(item)"
+              class="multi-select__chip"
+            >
+              <span class="multi-select__chip-label">{{ getOptionLabel(item) }}</span>
+              <button
+                type="button"
+                class="multi-select__chip-remove"
+                aria-label="Remove"
+                @click.stop="removeItem(item)"
+              >
+                <svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M4.5 4.5L9.5 9.5M9.5 4.5L4.5 9.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                </svg>
+              </button>
+            </span>
+          </div>
+        </template>
+        <template v-else>
+          <span class="multi-select__label">{{ selectedLabels }}</span>
+        </template>
+      </div>
+      <span class="multi-select__icon" :class="{ 'multi-select__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>
+    </div>
+
+    <Teleport to="body">
+      <div
+        v-if="isOpen"
+        ref="dropdownRef"
+        class="multi-select__dropdown"
+        :style="dropdownStyle"
+      >
+        <div v-if="filter" class="multi-select__filter">
+          <input
+            ref="filterInputRef"
+            v-model="filterValue"
+            type="text"
+            class="multi-select__filter-input"
+            placeholder="Search..."
+            @keydown="onFilterKeydown"
+          />
+        </div>
+        <div class="multi-select__options" role="listbox" aria-multiselectable="true">
+          <div
+            v-for="(option, index) in filteredOptions"
+            :key="getOptionValue(option)"
+            class="multi-select__option"
+            :class="{
+              'multi-select__option--focused': focusedIndex === index,
+              'multi-select__option--selected': isSelected(option)
+            }"
+            role="option"
+            :aria-selected="isSelected(option)"
+            @click="toggleOption(option)"
+            @mouseenter="focusedIndex = index"
+          >
+            <span class="multi-select__checkbox" :class="{ 'multi-select__checkbox--checked': isSelected(option) }">
+              <svg v-if="isSelected(option)" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M10 3L4.5 8.5L2 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+              </svg>
+            </span>
+            <span class="multi-select__option-label">{{ getOptionLabel(option) }}</span>
+          </div>
+          <div v-if="filteredOptions.length === 0" class="multi-select__empty">
+            No results found
+          </div>
+        </div>
+      </div>
+    </Teleport>
+  </div>
+</template>
+
+<style src="./MultiSelect.scss"></style>
+
+<script setup lang="ts">
+import type { MultiSelectProps, MultiSelectEmits } from '../../types';
+import { computed, ref, watch, onMounted, onBeforeUnmount, nextTick } from "vue";
+
+defineOptions({ name: 'FtpMultiSelect' });
+
+const props = withDefaults(defineProps<MultiSelectProps>(), {
+  modelValue: () => [],
+  options: () => [],
+  optionLabel: "label",
+  optionValue: "value",
+  placeholder: "Select...",
+  filter: false,
+  display: "comma",
+  size: "md",
+  isDisabled: false,
+  isInvalid: false,
+});
+
+const emit = defineEmits(["update:modelValue", "change"]);
+
+const containerRef = ref<HTMLElement | null>(null);
+const dropdownRef = ref<HTMLElement | null>(null);
+const filterInputRef = ref<HTMLElement | null>(null);
+const isOpen = ref(false);
+const filterValue = ref("");
+const focusedIndex = ref(0);
+const dropdownStyle = ref({});
+
+const getOptionValue = (option: any) => {
+  if (typeof option === "string" || typeof option === "number") {
+    return option;
+  }
+  return option[props.optionValue];
+};
+
+const getOptionLabel = (option: any) => {
+  if (typeof option === "string" || typeof option === "number") {
+    return option;
+  }
+  return option[props.optionLabel];
+};
+
+const selectedItems = computed(() => {
+  return props.options.filter((option) =>
+    props.modelValue.includes(getOptionValue(option))
+  );
+});
+
+const selectedLabels = computed(() => {
+  return selectedItems.value.map((item) => getOptionLabel(item)).join(", ");
+});
+
+const filteredOptions = computed(() => {
+  if (!filterValue.value) return props.options;
+  const search = filterValue.value.toLowerCase();
+  return props.options.filter((option) =>
+    getOptionLabel(option).toLowerCase().includes(search)
+  );
+});
+
+const isSelected = (option: any) => {
+  return props.modelValue.includes(getOptionValue(option));
+};
+
+const toggleOption = (option: any) => {
+  const value = getOptionValue(option);
+  let newValue;
+  if (isSelected(option)) {
+    newValue = props.modelValue.filter((v) => v !== value);
+  } else {
+    newValue = [...props.modelValue, value];
+  }
+  emit("update:modelValue", newValue);
+  emit("change", { value: newValue });
+};
+
+const removeItem = (item: any) => {
+  const value = getOptionValue(item);
+  const newValue = props.modelValue.filter((v) => v !== value);
+  emit("update:modelValue", newValue);
+  emit("change", { value: newValue });
+};
+
+const toggle = () => {
+  if (props.isDisabled) return;
+  isOpen.value = !isOpen.value;
+};
+
+const open = () => {
+  if (props.isDisabled || isOpen.value) return;
+  isOpen.value = true;
+};
+
+const close = () => {
+  isOpen.value = false;
+  filterValue.value = "";
+  focusedIndex.value = 0;
+};
+
+const updateDropdownPosition = () => {
+  if (!containerRef.value) return;
+  const rect = containerRef.value.getBoundingClientRect();
+  dropdownStyle.value = {
+    position: "fixed",
+    top: `${rect.bottom + 4}px`,
+    left: `${rect.left}px`,
+    width: `${rect.width}px`,
+    zIndex: 1000,
+  };
+};
+
+const onTriggerKeydown = (event: KeyboardEvent) => {
+  switch (event.key) {
+    case "Enter":
+    case " ":
+      event.preventDefault();
+      toggle();
+      break;
+    case "ArrowDown":
+      event.preventDefault();
+      open();
+      break;
+    case "Escape":
+      close();
+      break;
+  }
+};
+
+const onFilterKeydown = (event: KeyboardEvent) => {
+  switch (event.key) {
+    case "ArrowDown":
+      event.preventDefault();
+      focusedIndex.value = Math.min(focusedIndex.value + 1, filteredOptions.value.length - 1);
+      break;
+    case "ArrowUp":
+      event.preventDefault();
+      focusedIndex.value = Math.max(focusedIndex.value - 1, 0);
+      break;
+    case "Enter":
+      event.preventDefault();
+      if (filteredOptions.value[focusedIndex.value]) {
+        toggleOption(filteredOptions.value[focusedIndex.value]);
+      }
+      break;
+    case "Escape":
+      close();
+      break;
+  }
+};
+
+const onClickOutside = (event: MouseEvent) => {
+  if (
+    containerRef.value &&
+    !containerRef.value.contains(event.target as Node) &&
+    dropdownRef.value &&
+    !dropdownRef.value.contains(event.target as Node)
+  ) {
+    close();
+  }
+};
+
+watch(isOpen, async (newValue) => {
+  if (newValue) {
+    updateDropdownPosition();
+    await nextTick();
+    if (props.filter && filterInputRef.value) {
+      filterInputRef.value.focus();
+    }
+  }
+});
+
+onMounted(() => {
+  document.addEventListener("click", onClickOutside);
+  window.addEventListener("resize", updateDropdownPosition);
+  window.addEventListener("scroll", updateDropdownPosition, true);
+});
+
+onBeforeUnmount(() => {
+  document.removeEventListener("click", onClickOutside);
+  window.removeEventListener("resize", updateDropdownPosition);
+  window.removeEventListener("scroll", updateDropdownPosition, true);
+});
+
+const additionalClasses = computed(() =>
+  [
+    `multi-select--size-${props.size}`,
+    props.isDisabled && "multi-select--disabled",
+    props.isInvalid && "multi-select--invalid",
+    isOpen.value && "multi-select--open",
+  ]
+    .filter(Boolean)
+    .join(" ")
+);
+</script>