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

package/src/components/DataTable/DataTable.vue

@@ -0,0 +1,225 @@
+<template>
+  <div class="data-table" :class="additionalClasses">
+    <div v-if="$slots.header" class="data-table__header">
+      <slot name="header" />
+    </div>
+
+    <div class="data-table__wrapper">
+      <table class="data-table__table">
+        <thead class="data-table__thead">
+          <tr>
+            <th
+              v-for="col in columns"
+              :key="col.field"
+              class="data-table__th"
+              :class="{ 'data-table__th--sortable': col.sortable }"
+              :style="col.width ? { width: col.width } : {}"
+              scope="col"
+              :aria-sort="col.sortable && sortField === col.field ? (sortOrder === 1 ? 'ascending' : 'descending') : (col.sortable ? 'none' : undefined)"
+              @click="col.sortable ? onSort(col.field) : null"
+            >
+              <span class="data-table__th-content">
+                {{ col.header }}
+                <span v-if="col.sortable" class="data-table__sort-icon">
+                  <svg
+                    v-if="sortField === col.field"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    :class="{ 'data-table__sort-icon--desc': sortOrder === -1 }"
+                  >
+                    <polyline points="18 15 12 9 6 15" />
+                  </svg>
+                  <svg
+                    v-else
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    class="data-table__sort-icon--neutral"
+                  >
+                    <polyline points="7 10 12 5 17 10" />
+                    <polyline points="7 14 12 19 17 14" />
+                  </svg>
+                </span>
+              </span>
+            </th>
+          </tr>
+        </thead>
+        <tbody class="data-table__tbody">
+          <tr
+            v-for="(row, rowIndex) in paginatedData"
+            :key="rowIndex"
+            class="data-table__row"
+            :class="{ 'data-table__row--striped': striped && rowIndex % 2 === 1 }"
+          >
+            <td
+              v-for="col in columns"
+              :key="col.field"
+              class="data-table__td"
+            >
+              <slot :name="`column-${col.field}`" :data="row" :field="col.field">
+                {{ getFieldValue(row, col.field) }}
+              </slot>
+            </td>
+          </tr>
+          <tr v-if="paginatedData.length === 0" class="data-table__empty-row">
+            <td :colspan="columns.length" class="data-table__empty">
+              <slot name="empty">
+                No records found
+              </slot>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <div v-if="paginator && totalPages > 1" class="data-table__pagination">
+      <button
+        type="button"
+        class="data-table__page-btn"
+        :disabled="currentPage === 1"
+        aria-label="First page"
+        @click="goToPage(1)"
+      >
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+          <polyline points="11 17 6 12 11 7" />
+          <polyline points="18 17 13 12 18 7" />
+        </svg>
+      </button>
+      <button
+        type="button"
+        class="data-table__page-btn"
+        :disabled="currentPage === 1"
+        aria-label="Previous page"
+        @click="goToPage(currentPage - 1)"
+      >
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+          <polyline points="15 18 9 12 15 6" />
+        </svg>
+      </button>
+      <span class="data-table__page-info">
+        Page {{ currentPage }} of {{ totalPages }}
+      </span>
+      <button
+        type="button"
+        class="data-table__page-btn"
+        :disabled="currentPage === totalPages"
+        aria-label="Next page"
+        @click="goToPage(currentPage + 1)"
+      >
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+          <polyline points="9 18 15 12 9 6" />
+        </svg>
+      </button>
+      <button
+        type="button"
+        class="data-table__page-btn"
+        :disabled="currentPage === totalPages"
+        aria-label="Last page"
+        @click="goToPage(totalPages)"
+      >
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+          <polyline points="13 17 18 12 13 7" />
+          <polyline points="6 17 11 12 6 7" />
+        </svg>
+      </button>
+    </div>
+
+    <div v-if="$slots.footer" class="data-table__footer">
+      <slot name="footer" />
+    </div>
+  </div>
+</template>
+
+<style src="./DataTable.scss"></style>
+
+<script setup lang="ts">
+import type { DataTableProps, DataTableEmits } from '../../types';
+import { ref, computed, watch } from "vue";
+
+const props = withDefaults(defineProps<DataTableProps>(), {
+  value: () => [],
+  columns: () => [],
+  striped: false,
+  hoverable: true,
+  paginator: false,
+  rows: 10,
+  sortField: null,
+  sortOrder: 1,
+});
+
+const emit = defineEmits(["sort", "page"]);
+
+defineOptions({
+  name: "FtpDataTable",
+});
+
+const currentPage = ref(1);
+const internalSortField = ref(props.sortField);
+const internalSortOrder = ref(props.sortOrder);
+
+watch(
+  () => props.sortField,
+  (val) => {
+    internalSortField.value = val;
+  }
+);
+
+watch(
+  () => props.sortOrder,
+  (val) => {
+    internalSortOrder.value = val;
+  }
+);
+
+const sortField = computed(() => internalSortField.value);
+const sortOrder = computed(() => internalSortOrder.value);
+
+const sortedData = computed(() => {
+  if (!internalSortField.value) return props.value;
+  return [...props.value].sort((a, b) => {
+    const aVal = getFieldValue(a, internalSortField.value);
+    const bVal = getFieldValue(b, internalSortField.value);
+    if (aVal < bVal) return -1 * internalSortOrder.value;
+    if (aVal > bVal) return 1 * internalSortOrder.value;
+    return 0;
+  });
+});
+
+const totalPages = computed(() => {
+  if (!props.paginator || props.rows <= 0) return 1;
+  return Math.ceil(sortedData.value.length / props.rows);
+});
+
+const paginatedData = computed(() => {
+  if (!props.paginator) return sortedData.value;
+  const start = (currentPage.value - 1) * props.rows;
+  return sortedData.value.slice(start, start + props.rows);
+});
+
+const additionalClasses = computed(() =>
+  [props.hoverable && "data-table--hoverable"].filter(Boolean).join(" ")
+);
+
+const getFieldValue = (obj: any, field: any) => {
+  return field.split(".").reduce((o: any, k: any) => (o ? o[k] : undefined), obj);
+};
+
+const onSort = (field: any) => {
+  if (internalSortField.value === field) {
+    internalSortOrder.value = (internalSortOrder.value * -1) as 1 | -1;
+  } else {
+    internalSortField.value = field;
+    internalSortOrder.value = 1;
+  }
+  emit("sort", { sortField: internalSortField.value, sortOrder: internalSortOrder.value });
+};
+
+const goToPage = (page: any) => {
+  if (page < 1 || page > totalPages.value) return;
+  currentPage.value = page;
+  emit("page", { page: currentPage.value });
+};
+</script>

package/src/components/DataView/DataView.scss

@@ -0,0 +1,149 @@
+@use "../../../dist/scss/tokens" as *;
+
+$c: data-view;
+
+.#{$c} {
+  background-color: var(--dataView-background, $dataView-background);
+  border: var(--dataView-border-width, $dataView-border-width) solid var(--dataView-border-color, $dataView-border-color);
+  border-radius: var(--dataView-radius, $dataView-radius);
+  overflow: hidden;
+}
+
+.#{$c}__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--inset-m, $inset-m);
+  padding: var(--dataView-header-padding, $dataView-header-padding);
+  background-color: var(--dataView-header-background, $dataView-header-background);
+  border-bottom: var(--dataView-border-width, $dataView-border-width) solid var(--dataView-header-borderColor, $dataView-header-borderColor);
+}
+
+.#{$c}__header-content {
+  flex: 1;
+}
+
+.#{$c}__layout-switcher {
+  display: flex;
+  gap: var(--dataView-layoutSwitcher-gap, $dataView-layoutSwitcher-gap);
+}
+
+.#{$c}__layout-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--dataView-layoutSwitcher-button-size, $dataView-layoutSwitcher-button-size);
+  height: var(--dataView-layoutSwitcher-button-size, $dataView-layoutSwitcher-button-size);
+  padding: 0;
+  border: none;
+  background-color: var(--dataView-layoutSwitcher-button-background-default, $dataView-layoutSwitcher-button-background-default);
+  border-radius: var(--dataView-layoutSwitcher-button-radius, $dataView-layoutSwitcher-button-radius);
+  cursor: pointer;
+  transition: background-color var(--dataView-transition-duration, $dataView-transition-duration) ease,
+              color var(--dataView-transition-duration, $dataView-transition-duration) ease;
+
+  svg {
+    width: 16px;
+    height: 16px;
+    color: var(--dataView-layoutSwitcher-button-color-default, $dataView-layoutSwitcher-button-color-default);
+  }
+
+  &:hover {
+    background-color: var(--dataView-layoutSwitcher-button-background-hover, $dataView-layoutSwitcher-button-background-hover);
+  }
+
+  &--active {
+    background-color: var(--dataView-layoutSwitcher-button-background-active, $dataView-layoutSwitcher-button-background-active);
+
+    svg {
+      color: var(--dataView-layoutSwitcher-button-color-active, $dataView-layoutSwitcher-button-color-active);
+    }
+  }
+}
+
+.#{$c}__content {
+  padding: var(--dataView-content-padding, $dataView-content-padding);
+}
+
+.#{$c}__content--list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--dataView-list-gap, $dataView-list-gap);
+}
+
+.#{$c}__content--grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  gap: var(--dataView-grid-gap, $dataView-grid-gap);
+}
+
+.#{$c}--layout-list .#{$c}__item {
+  padding: var(--dataView-list-item-padding, $dataView-list-item-padding);
+  background-color: var(--dataView-list-item-background-default, $dataView-list-item-background-default);
+  border: 1px solid var(--dataView-list-item-borderColor, $dataView-list-item-borderColor);
+  border-radius: var(--dataView-list-item-radius, $dataView-list-item-radius);
+  transition: background-color var(--dataView-transition-duration, $dataView-transition-duration) ease;
+
+  &:hover {
+    background-color: var(--dataView-list-item-background-hover, $dataView-list-item-background-hover);
+  }
+}
+
+.#{$c}--layout-grid .#{$c}__item {
+  // Grid items are typically styled by the slot content
+}
+
+.#{$c}__empty {
+  padding: var(--dataView-empty-padding, $dataView-empty-padding);
+  text-align: center;
+  color: var(--dataView-empty-color, $dataView-empty-color);
+}
+
+.#{$c}__pagination {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--inset-xs, $inset-xs);
+  padding: var(--dataView-pagination-padding, $dataView-pagination-padding);
+  border-top: var(--dataView-border-width, $dataView-border-width) solid var(--dataView-pagination-borderColor, $dataView-pagination-borderColor);
+}
+
+.#{$c}__page-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  border-radius: var(--dataView-layoutSwitcher-button-radius, $dataView-layoutSwitcher-button-radius);
+  transition: background-color var(--dataView-transition-duration, $dataView-transition-duration) ease;
+
+  svg {
+    width: 16px;
+    height: 16px;
+    color: var(--text-default, $text-default);
+  }
+
+  &:hover:not(:disabled) {
+    background-color: var(--dataView-list-item-background-hover, $dataView-list-item-background-hover);
+  }
+
+  &:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+}
+
+.#{$c}__page-info {
+  font-size: 14px;
+  color: var(--text-default, $text-default);
+}
+
+.#{$c}__footer {
+  padding: var(--dataView-header-padding, $dataView-header-padding);
+  background-color: var(--dataView-header-background, $dataView-header-background);
+  border-top: var(--dataView-border-width, $dataView-border-width) solid var(--dataView-header-borderColor, $dataView-header-borderColor);
+}

package/src/components/DataView/DataView.vue

@@ -0,0 +1,172 @@
+<template>
+  <div class="data-view" :class="additionalClasses">
+    <div v-if="$slots.header || showLayoutSwitcher" class="data-view__header">
+      <div class="data-view__header-content">
+        <slot name="header" />
+      </div>
+      <div v-if="showLayoutSwitcher" class="data-view__layout-switcher">
+        <button
+          class="data-view__layout-btn"
+          :class="{ 'data-view__layout-btn--active': internalLayout === 'list' }"
+          type="button"
+          aria-label="List view"
+          @click="setLayout('list')"
+        >
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <line x1="8" y1="6" x2="21" y2="6" />
+            <line x1="8" y1="12" x2="21" y2="12" />
+            <line x1="8" y1="18" x2="21" y2="18" />
+            <line x1="3" y1="6" x2="3.01" y2="6" />
+            <line x1="3" y1="12" x2="3.01" y2="12" />
+            <line x1="3" y1="18" x2="3.01" y2="18" />
+          </svg>
+        </button>
+        <button
+          class="data-view__layout-btn"
+          :class="{ 'data-view__layout-btn--active': internalLayout === 'grid' }"
+          type="button"
+          aria-label="Grid view"
+          @click="setLayout('grid')"
+        >
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <rect x="3" y="3" width="7" height="7" />
+            <rect x="14" y="3" width="7" height="7" />
+            <rect x="14" y="14" width="7" height="7" />
+            <rect x="3" y="14" width="7" height="7" />
+          </svg>
+        </button>
+      </div>
+    </div>
+
+    <div class="data-view__content" :class="`data-view__content--${internalLayout}`">
+      <template v-if="paginatedData.length > 0">
+        <div
+          v-for="(item, index) in paginatedData"
+          :key="index"
+          class="data-view__item"
+        >
+          <slot :name="internalLayout" :data="item" :index="index">
+            <slot name="item" :data="item" :index="index">
+              {{ item }}
+            </slot>
+          </slot>
+        </div>
+      </template>
+      <div v-else class="data-view__empty">
+        <slot name="empty">
+          No records found
+        </slot>
+      </div>
+    </div>
+
+    <div v-if="paginator && totalPages > 1" class="data-view__pagination">
+      <button
+        type="button"
+        class="data-view__page-btn"
+        :disabled="currentPage === 1"
+        @click="goToPage(1)"
+      >
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <polyline points="11 17 6 12 11 7" />
+          <polyline points="18 17 13 12 18 7" />
+        </svg>
+      </button>
+      <button
+        type="button"
+        class="data-view__page-btn"
+        :disabled="currentPage === 1"
+        @click="goToPage(currentPage - 1)"
+      >
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <polyline points="15 18 9 12 15 6" />
+        </svg>
+      </button>
+      <span class="data-view__page-info">
+        Page {{ currentPage }} of {{ totalPages }}
+      </span>
+      <button
+        type="button"
+        class="data-view__page-btn"
+        :disabled="currentPage === totalPages"
+        @click="goToPage(currentPage + 1)"
+      >
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <polyline points="9 18 15 12 9 6" />
+        </svg>
+      </button>
+      <button
+        type="button"
+        class="data-view__page-btn"
+        :disabled="currentPage === totalPages"
+        @click="goToPage(totalPages)"
+      >
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <polyline points="13 17 18 12 13 7" />
+          <polyline points="6 17 11 12 6 7" />
+        </svg>
+      </button>
+    </div>
+
+    <div v-if="$slots.footer" class="data-view__footer">
+      <slot name="footer" />
+    </div>
+  </div>
+</template>
+
+<style src="./DataView.scss"></style>
+
+<script setup lang="ts">
+import type { DataViewProps, DataViewEmits } from '../../types';
+import { ref, computed, watch } from "vue";
+
+const props = withDefaults(defineProps<DataViewProps>(), {
+  value: () => [],
+  layout: "list",
+  gridColumns: 3,
+  paginator: false,
+  rows: 9,
+  showLayoutSwitcher: true,
+});
+
+const emit = defineEmits(["update:layout", "page"]);
+
+defineOptions({
+  name: "FtpDataView",
+});
+
+const currentPage = ref(1);
+const internalLayout = ref(props.layout);
+
+watch(
+  () => props.layout,
+  (val) => {
+    internalLayout.value = val;
+  }
+);
+
+const totalPages = computed(() => {
+  if (!props.paginator || props.rows <= 0) return 1;
+  return Math.ceil(props.value.length / props.rows);
+});
+
+const paginatedData = computed(() => {
+  if (!props.paginator) return props.value;
+  const start = (currentPage.value - 1) * props.rows;
+  return props.value.slice(start, start + props.rows);
+});
+
+const additionalClasses = computed(() =>
+  [`data-view--layout-${internalLayout.value}`].filter(Boolean).join(" ")
+);
+
+const setLayout = (layout: any) => {
+  internalLayout.value = layout;
+  emit("update:layout", layout);
+};
+
+const goToPage = (page: any) => {
+  if (page < 1 || page > totalPages.value) return;
+  currentPage.value = page;
+  emit("page", { page: currentPage.value });
+};
+</script>

package/src/components/DatePicker/DatePicker.scss

@@ -0,0 +1,71 @@
+@use "../../../dist/scss/tokens" as *;
+
+$c: date-picker;
+
+.#{$c} {
+  position: relative;
+  display: inline-flex;
+
+  &--disabled {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+}
+
+.#{$c}__input-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.#{$c}__input {
+  width: 100%;
+  min-width: 200px;
+  padding: 0.5rem 2.5rem 0.5rem 0.75rem;
+  border: 1px solid var(--surface-border, rgba(255, 255, 255, 0.15));
+  border-radius: 0.5rem;
+  background: var(--surface-ground, rgba(255, 255, 255, 0.05));
+  color: var(--text-primary, #fff);
+  font-size: 0.875rem;
+  cursor: pointer;
+  outline: none;
+  transition: border-color 0.15s ease;
+
+  &::placeholder {
+    color: var(--text-muted, rgba(255, 255, 255, 0.4));
+  }
+
+  &:focus,
+  &--active {
+    border-color: var(--color-primary, #6366f1);
+  }
+}
+
+.#{$c}__calendar-icon {
+  position: absolute;
+  right: 0.75rem;
+  width: 1rem;
+  height: 1rem;
+  color: var(--text-muted, rgba(255, 255, 255, 0.5));
+  pointer-events: none;
+}
+
+.#{$c}__dropdown {
+  background: var(--surface-overlay, #1e1e2e);
+  border: 1px solid var(--surface-border, rgba(255, 255, 255, 0.1));
+  border-radius: 0.75rem;
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
+  overflow: hidden;
+}
+
+// Transition
+.date-picker-dropdown-enter-active,
+.date-picker-dropdown-leave-active {
+  transition: opacity 0.15s ease, transform 0.15s ease;
+}
+.date-picker-dropdown-enter-from,
+.date-picker-dropdown-leave-to {
+  opacity: 0;
+  transform: translateY(-4px);
+}