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

package/src/components/Paginator/Paginator.vue

@@ -0,0 +1,212 @@
+<template>
+  <nav class="paginator" :class="additionalClasses" aria-label="Pagination">
+    <div v-if="showInfo" class="paginator__info">
+      {{ infoText }}
+    </div>
+
+    <div class="paginator__controls">
+      <!-- First page button -->
+      <button
+        type="button"
+        v-if="showFirstLast"
+        class="paginator__nav paginator__nav--first"
+        :disabled="isFirstPage"
+        :aria-disabled="isFirstPage"
+        aria-label="Go to first page"
+        @click="goToFirst"
+      >
+        <svg class="paginator__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <polyline points="11 17 6 12 11 7" />
+          <polyline points="18 17 13 12 18 7" />
+        </svg>
+      </button>
+
+      <!-- Previous button -->
+      <button
+        type="button"
+        class="paginator__nav paginator__nav--prev"
+        :disabled="isFirstPage"
+        :aria-disabled="isFirstPage"
+        aria-label="Go to previous page"
+        @click="goToPrev"
+      >
+        <svg class="paginator__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <polyline points="15 18 9 12 15 6" />
+        </svg>
+      </button>
+
+      <!-- Page numbers -->
+      <div class="paginator__pages">
+        <button
+          type="button"
+          v-for="page in visiblePages"
+          :key="page.value"
+          class="paginator__page"
+          :class="{ 'paginator__page--active': page.value === currentPage, 'paginator__page--ellipsis': page.isEllipsis }"
+          :disabled="page.isEllipsis"
+          :aria-current="page.value === currentPage ? 'page' : undefined"
+          :aria-label="page.isEllipsis ? undefined : `Go to page ${page.value}`"
+          @click="!page.isEllipsis && goToPage(page.value)"
+        >
+          {{ page.isEllipsis ? '...' : page.value }}
+        </button>
+      </div>
+
+      <!-- Next button -->
+      <button
+        type="button"
+        class="paginator__nav paginator__nav--next"
+        :disabled="isLastPage"
+        :aria-disabled="isLastPage"
+        aria-label="Go to next page"
+        @click="goToNext"
+      >
+        <svg class="paginator__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <polyline points="9 18 15 12 9 6" />
+        </svg>
+      </button>
+
+      <!-- Last page button -->
+      <button
+        type="button"
+        v-if="showFirstLast"
+        class="paginator__nav paginator__nav--last"
+        :disabled="isLastPage"
+        :aria-disabled="isLastPage"
+        aria-label="Go to last page"
+        @click="goToLast"
+      >
+        <svg class="paginator__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <polyline points="13 17 18 12 13 7" />
+          <polyline points="6 17 11 12 6 7" />
+        </svg>
+      </button>
+    </div>
+
+    <!-- Rows per page dropdown -->
+    <div v-if="rowsPerPageOptions && rowsPerPageOptions.length > 0" class="paginator__rows-per-page">
+      <label class="paginator__rows-label">Rows per page:</label>
+      <select
+        class="paginator__rows-select"
+        :value="rows"
+        @change="handleRowsChange"
+      >
+        <option v-for="option in rowsPerPageOptions" :key="option" :value="option">
+          {{ option }}
+        </option>
+      </select>
+    </div>
+  </nav>
+</template>
+
+<style src="./Paginator.scss"></style>
+
+<script setup lang="ts">
+import type { PaginatorProps, PaginatorEmits } from '../../types';
+import { computed } from "vue";
+
+defineOptions({ name: 'FtpPaginator' });
+
+const props = withDefaults(defineProps<PaginatorProps>(), {
+  rows: 10,
+  first: 0,
+  rowsPerPageOptions: () => [],
+  pageLinkSize: 5,
+  showFirstLast: true,
+  showInfo: false,
+});
+
+const emit = defineEmits(["update:first", "update:rows", "page"]);
+
+const totalPages = computed(() => Math.ceil(props.totalRecords / props.rows));
+
+const currentPage = computed(() => Math.floor(props.first / props.rows) + 1);
+
+const isFirstPage = computed(() => currentPage.value === 1);
+
+const isLastPage = computed(() => currentPage.value === totalPages.value || totalPages.value === 0);
+
+const infoText = computed(() => {
+  const start = props.first + 1;
+  const end = Math.min(props.first + props.rows, props.totalRecords);
+  return `${start}-${end} of ${props.totalRecords}`;
+});
+
+const visiblePages = computed(() => {
+  const pages = [];
+  const total = totalPages.value;
+  const current = currentPage.value;
+  const linkSize = props.pageLinkSize;
+
+  if (total <= linkSize) {
+    for (let i = 1; i <= total; i++) {
+      pages.push({ value: i, isEllipsis: false });
+    }
+  } else {
+    const half = Math.floor(linkSize / 2);
+    let start = Math.max(1, current - half);
+    let end = Math.min(total, start + linkSize - 1);
+
+    if (end - start < linkSize - 1) {
+      start = Math.max(1, end - linkSize + 1);
+    }
+
+    if (start > 1) {
+      pages.push({ value: 1, isEllipsis: false });
+      if (start > 2) {
+        pages.push({ value: "ellipsis-start", isEllipsis: true });
+      }
+    }
+
+    for (let i = start; i <= end; i++) {
+      if (i !== 1 && i !== total) {
+        pages.push({ value: i, isEllipsis: false });
+      }
+    }
+
+    if (end < total) {
+      if (end < total - 1) {
+        pages.push({ value: "ellipsis-end", isEllipsis: true });
+      }
+      pages.push({ value: total, isEllipsis: false });
+    }
+  }
+
+  return pages;
+});
+
+function goToPage(page: any) {
+  const newFirst = (page - 1) * props.rows;
+  emit("update:first", newFirst);
+  emit("page", { page, first: newFirst, rows: props.rows, pageCount: totalPages.value });
+}
+
+function goToFirst() {
+  goToPage(1);
+}
+
+function goToLast() {
+  goToPage(totalPages.value);
+}
+
+function goToPrev() {
+  if (currentPage.value > 1) {
+    goToPage(currentPage.value - 1);
+  }
+}
+
+function goToNext() {
+  if (currentPage.value < totalPages.value) {
+    goToPage(currentPage.value + 1);
+  }
+}
+
+function handleRowsChange(event: Event) {
+  const newRows = parseInt((event.target as HTMLSelectElement).value, 10);
+  emit("update:rows", newRows);
+  emit("update:first", 0);
+  emit("page", { page: 1, first: 0, rows: newRows, pageCount: Math.ceil(props.totalRecords / newRows) });
+}
+
+const additionalClasses = computed(() => [].filter(Boolean).join(" "));
+</script>

package/src/components/Panel/Panel.scss

@@ -0,0 +1,113 @@
+@use "../../../dist/scss/tokens" as *;
+
+$c: panel;
+
+.#{$c} {
+  background-color: var(--panel-background, $panel-background);
+  border: var(--panel-border-width, $panel-border-width) solid var(--panel-border-color, $panel-border-color);
+  border-radius: var(--panel-radius, $panel-radius);
+  overflow: hidden;
+}
+
+// Header section
+.#{$c}__header {
+  display: flex;
+  align-items: center;
+  gap: var(--inset-s, $inset-s);
+  padding: var(--panel-header-padding, $panel-header-padding);
+  background-color: var(--panel-header-background-default, $panel-header-background-default);
+  border-bottom: var(--panel-border-width, $panel-border-width) solid var(--panel-header-borderColor, $panel-header-borderColor);
+}
+
+.#{$c}__header--toggleable {
+  cursor: pointer;
+  user-select: none;
+  transition: background-color var(--panel-transition-duration, $panel-transition-duration) ease;
+
+  &:hover {
+    background-color: var(--panel-header-background-hover, $panel-header-background-hover);
+
+    .#{$c}__toggle-icon {
+      color: var(--panel-icon-color-hover, $panel-icon-color-hover);
+    }
+  }
+}
+
+.#{$c}__toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--panel-icon-size, $panel-icon-size);
+  height: var(--panel-icon-size, $panel-icon-size);
+  padding: 0;
+  margin: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+
+.#{$c}__toggle-icon {
+  width: var(--panel-icon-size, $panel-icon-size);
+  height: var(--panel-icon-size, $panel-icon-size);
+  color: var(--panel-icon-color-default, $panel-icon-color-default);
+  transition: transform var(--panel-transition-duration, $panel-transition-duration) ease,
+              color var(--panel-transition-duration, $panel-transition-duration) ease;
+  transform: rotate(var(--panel-icon-rotation-expanded, $panel-icon-rotation-expanded));
+}
+
+.#{$c}__title {
+  flex: 1;
+  font-size: var(--panel-header-fontSize, $panel-header-fontSize);
+  font-weight: var(--panel-header-fontWeight, $panel-header-fontWeight);
+  color: var(--panel-header-color, $panel-header-color);
+  line-height: 1.4;
+}
+
+.#{$c}__icons {
+  display: flex;
+  align-items: center;
+  gap: var(--inset-xs, $inset-xs);
+  margin-left: auto;
+}
+
+// Content section
+.#{$c}__content-wrapper {
+  display: grid;
+  grid-template-rows: 1fr;
+  transition: grid-template-rows var(--panel-transition-duration, $panel-transition-duration) ease;
+}
+
+.#{$c}__content {
+  overflow: hidden;
+  padding: var(--panel-content-padding, $panel-content-padding);
+  background-color: var(--panel-content-background, $panel-content-background);
+  color: var(--panel-content-color, $panel-content-color);
+}
+
+// Footer section
+.#{$c}__footer {
+  padding: var(--panel-content-padding, $panel-content-padding);
+  border-top: var(--panel-border-width, $panel-border-width) solid var(--panel-header-borderColor, $panel-header-borderColor);
+  background-color: var(--panel-header-background-default, $panel-header-background-default);
+}
+
+// Collapsed state
+.#{$c}--collapsed {
+  .#{$c}__header {
+    border-bottom-color: transparent;
+  }
+
+  .#{$c}__toggle-icon {
+    transform: rotate(var(--panel-icon-rotation-collapsed, $panel-icon-rotation-collapsed));
+  }
+
+  .#{$c}__content-wrapper {
+    grid-template-rows: 0fr;
+  }
+
+  .#{$c}__content {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+}

package/src/components/Panel/Panel.vue

@@ -0,0 +1,89 @@
+<template>
+  <div class="panel" :class="additionalClasses">
+    <div
+      v-if="$slots.header || header"
+      class="panel__header"
+      :class="{ 'panel__header--toggleable': toggleable }"
+      @click="onHeaderClick"
+    >
+      <button
+        v-if="toggleable"
+        type="button"
+        class="panel__toggle"
+        :aria-expanded="!isCollapsed"
+        :aria-label="isCollapsed ? 'Expand panel' : 'Collapse panel'"
+      >
+        <svg
+          class="panel__toggle-icon"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <polyline points="6 9 12 15 18 9" />
+        </svg>
+      </button>
+      <slot name="header">
+        <span class="panel__title">{{ header }}</span>
+      </slot>
+      <div v-if="$slots.icons" class="panel__icons">
+        <slot name="icons" />
+      </div>
+    </div>
+
+    <div class="panel__content-wrapper">
+      <div class="panel__content">
+        <slot />
+      </div>
+    </div>
+
+    <div v-if="$slots.footer" class="panel__footer">
+      <slot name="footer" />
+    </div>
+  </div>
+</template>
+
+<style src="./Panel.scss"></style>
+
+<script setup lang="ts">
+import type { PanelProps, PanelEmits } from '../../types';
+import { computed, ref, watch } from "vue";
+
+defineOptions({ name: 'FtpPanel' });
+
+const props = withDefaults(defineProps<PanelProps>(), {
+  header: "",
+  toggleable: false,
+  collapsed: false,
+});
+
+const emit = defineEmits(["update:collapsed", "toggle"]);
+
+const isCollapsed = ref(props.collapsed);
+
+watch(
+  () => props.collapsed,
+  (newVal) => {
+    isCollapsed.value = newVal;
+  }
+);
+
+const onHeaderClick = () => {
+  if (!props.toggleable) return;
+
+  isCollapsed.value = !isCollapsed.value;
+  emit("update:collapsed", isCollapsed.value);
+  emit("toggle", { collapsed: isCollapsed.value });
+};
+
+const additionalClasses = computed(() =>
+  [
+    props.toggleable && "panel--toggleable",
+    isCollapsed.value && "panel--collapsed",
+  ]
+    .filter(Boolean)
+    .join(" ")
+);
+</script>

package/src/components/PanelMenu/PanelMenu.scss

@@ -0,0 +1,211 @@
+@use "../../../dist/scss/tokens" as *;
+
+$c: panelmenu;
+
+.#{$c} {
+  display: flex;
+  flex-direction: column;
+  gap: var(--panelmenu-gap, $panelmenu-gap);
+  width: 100%;
+  background-color: var(--panelmenu-background, $panelmenu-background);
+  border: var(--panelmenu-border-width, $panelmenu-border-width) solid var(--panelmenu-border-color, $panelmenu-border-color);
+  border-radius: var(--panelmenu-border-radius, $panelmenu-border-radius);
+  overflow: hidden;
+}
+
+.#{$c}__panel {
+  &:not(:last-child) {
+    border-bottom: var(--panelmenu-border-width, $panelmenu-border-width) solid var(--panelmenu-border-color, $panelmenu-border-color);
+  }
+}
+
+.#{$c}__header {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: var(--panelmenu-header-padding, $panelmenu-header-padding);
+  background-color: var(--panelmenu-header-background-default, $panelmenu-header-background-default);
+  color: var(--panelmenu-header-color-default, $panelmenu-header-color-default);
+  border: none;
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: 500;
+  text-align: left;
+  cursor: pointer;
+  transition: background-color var(--panelmenu-transition-duration, $panelmenu-transition-duration) ease,
+              color var(--panelmenu-transition-duration, $panelmenu-transition-duration) ease;
+
+  &:hover:not(:disabled) {
+    background-color: var(--panelmenu-header-background-hover, $panelmenu-header-background-hover);
+    color: var(--panelmenu-header-color-hover, $panelmenu-header-color-hover);
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--panelmenu-item-color-active, $panelmenu-item-color-active);
+    outline-offset: -2px;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    color: var(--panelmenu-header-color-disabled, $panelmenu-header-color-disabled);
+  }
+}
+
+.#{$c}__panel--expanded .#{$c}__header {
+  background-color: var(--panelmenu-header-background-active, $panelmenu-header-background-active);
+}
+
+.#{$c}__header-icon {
+  width: var(--panelmenu-icon-size, $panelmenu-icon-size);
+  height: var(--panelmenu-icon-size, $panelmenu-icon-size);
+  margin-right: var(--panelmenu-item-gap, $panelmenu-item-gap);
+  color: var(--panelmenu-icon-color-default, $panelmenu-icon-color-default);
+  flex-shrink: 0;
+}
+
+.#{$c}__header-text {
+  flex: 1;
+}
+
+.#{$c}__chevron {
+  width: var(--panelmenu-icon-size, $panelmenu-icon-size);
+  height: var(--panelmenu-icon-size, $panelmenu-icon-size);
+  color: var(--panelmenu-icon-color-default, $panelmenu-icon-color-default);
+  flex-shrink: 0;
+  transition: transform var(--panelmenu-transition-duration, $panelmenu-transition-duration) ease;
+  transform: rotate(var(--panelmenu-icon-rotation-collapsed, $panelmenu-icon-rotation-collapsed));
+}
+
+.#{$c}__panel--expanded .#{$c}__chevron {
+  transform: rotate(var(--panelmenu-icon-rotation-expanded, $panelmenu-icon-rotation-expanded));
+}
+
+.#{$c}__content-wrapper {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows var(--panelmenu-transition-duration, $panelmenu-transition-duration) ease;
+}
+
+.#{$c}__panel--expanded .#{$c}__content-wrapper {
+  grid-template-rows: 1fr;
+}
+
+.#{$c}__content {
+  overflow: hidden;
+  background-color: var(--panelmenu-content-background, $panelmenu-content-background);
+}
+
+.#{$c}__list {
+  margin: 0;
+  padding: var(--panelmenu-content-padding, $panelmenu-content-padding);
+  list-style: none;
+}
+
+.#{$c}__item {
+  position: relative;
+}
+
+.#{$c}__link {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  gap: var(--panelmenu-item-gap, $panelmenu-item-gap);
+  padding: var(--panelmenu-item-padding, $panelmenu-item-padding);
+  background-color: var(--panelmenu-item-background-default, $panelmenu-item-background-default);
+  color: var(--panelmenu-item-color-default, $panelmenu-item-color-default);
+  border: none;
+  text-decoration: none;
+  font-family: inherit;
+  font-size: inherit;
+  text-align: left;
+  cursor: pointer;
+  transition: background-color var(--panelmenu-transition-duration, $panelmenu-transition-duration) ease,
+              color var(--panelmenu-transition-duration, $panelmenu-transition-duration) ease;
+
+  &:hover:not(:disabled):not([aria-disabled="true"]) {
+    background-color: var(--panelmenu-item-background-hover, $panelmenu-item-background-hover);
+    color: var(--panelmenu-item-color-hover, $panelmenu-item-color-hover);
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--panelmenu-item-color-active, $panelmenu-item-color-active);
+    outline-offset: -2px;
+  }
+
+  &:disabled,
+  &[aria-disabled="true"] {
+    cursor: not-allowed;
+    color: var(--panelmenu-item-color-disabled, $panelmenu-item-color-disabled);
+    pointer-events: none;
+  }
+}
+
+.#{$c}__item--active > .#{$c}__link {
+  background-color: var(--panelmenu-item-background-active, $panelmenu-item-background-active);
+  color: var(--panelmenu-item-color-active, $panelmenu-item-color-active);
+}
+
+.#{$c}__item--disabled > .#{$c}__link {
+  cursor: not-allowed;
+  color: var(--panelmenu-item-color-disabled, $panelmenu-item-color-disabled);
+  pointer-events: none;
+}
+
+.#{$c}__icon {
+  width: var(--panelmenu-icon-size, $panelmenu-icon-size);
+  height: var(--panelmenu-icon-size, $panelmenu-icon-size);
+  color: var(--panelmenu-icon-color-default, $panelmenu-icon-color-default);
+  flex-shrink: 0;
+}
+
+.#{$c}__label {
+  flex: 1;
+  white-space: nowrap;
+}
+
+.#{$c}__submenu-chevron {
+  width: 12px;
+  height: 12px;
+  color: var(--panelmenu-icon-color-default, $panelmenu-icon-color-default);
+  flex-shrink: 0;
+  transition: transform var(--panelmenu-transition-duration, $panelmenu-transition-duration) ease;
+  transform: rotate(var(--panelmenu-icon-rotation-collapsed, $panelmenu-icon-rotation-collapsed));
+}
+
+.#{$c}__item--expanded > .#{$c}__link .#{$c}__submenu-chevron {
+  transform: rotate(var(--panelmenu-icon-rotation-expanded, $panelmenu-icon-rotation-expanded));
+}
+
+// Submenu
+.#{$c}__submenu {
+  display: grid;
+  grid-template-rows: 0fr;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  transition: grid-template-rows var(--panelmenu-transition-duration, $panelmenu-transition-duration) ease;
+  overflow: hidden;
+}
+
+.#{$c}__item--expanded > .#{$c}__submenu {
+  grid-template-rows: 1fr;
+}
+
+.#{$c}__item--nested > .#{$c}__link {
+  padding-left: calc(var(--panelmenu-item-padding, $panelmenu-item-padding) + var(--panelmenu-item-indent, $panelmenu-item-indent));
+}
+
+// Separator
+.#{$c}__separator {
+  height: 1px;
+  margin: var(--panelmenu-separator-margin, $panelmenu-separator-margin) 0;
+  background-color: var(--panelmenu-separator-color, $panelmenu-separator-color);
+}