@paraxe/vue 1.0.0

package/src/data/EmptyState.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+export interface Props {
+  as?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  as: "div",
+});
+
+const classes = computed(() => [
+  "empty-state",
+]);
+</script>
+
+<template>
+  <component
+    :is="props.as"
+    :class="classes"
+  >
+    <div
+      v-if="$slots.icon"
+      class="empty-state-icon"
+    >
+      <slot name="icon" />
+    </div>
+
+    <div class="empty-state-content">
+      <slot />
+    </div>
+
+    <div
+      v-if="$slots.actions"
+      class="empty-state-actions"
+    >
+      <slot name="actions" />
+    </div>
+  </component>
+</template>

package/src/data/List.vue

@@ -0,0 +1,125 @@
+<script setup lang="ts">
+import {
+  provide,
+  ref,
+  watch,
+} from "vue";
+
+export interface ListProps {
+  selectable?: boolean;
+  multiple?: boolean;
+}
+
+export interface ListContext {
+  selectable: boolean;
+  multiple: boolean;
+
+
+  isSelected: (
+    value: string | number
+  ) => boolean;
+
+  toggleSelection: (
+    value: string | number
+  ) => void;
+}
+
+const props = withDefaults(
+  defineProps<ListProps>(),
+  {
+    selectable: false,
+    multiple: false,
+  },
+);
+
+const selectedValues = ref<
+  Set<string | number>
+>(new Set());
+
+const emit = defineEmits<{
+  "update:modelValue": [
+    value:
+      | string
+      | number
+      | Array<string | number>
+      | null,
+  ];
+}>();
+
+const modelValue = defineModel<
+  string | number | Array<string | number> | null
+>({
+  default: null,
+});
+
+watch(
+  modelValue,
+  (value) => {
+    if (value === null || value === undefined) {
+      selectedValues.value = new Set();
+      return;
+    }
+
+    selectedValues.value = new Set(
+      Array.isArray(value)
+        ? value
+        : [value],
+    );
+  },
+  { immediate: true },
+);
+
+function isSelected(
+  value: string | number,
+) {
+  return selectedValues.value.has(value);
+}
+
+function toggleSelection(
+  value: string | number,
+) {
+  if (!props.selectable) {
+    return;
+  }
+
+  const next = new Set(
+    selectedValues.value,
+  );
+
+  if (props.multiple) {
+    if (next.has(value)) {
+      next.delete(value);
+    } else {
+      next.add(value);
+    }
+  } else {
+    if (next.has(value)) {
+      next.clear();
+    } else {
+      next.clear();
+      next.add(value);
+    }
+  }
+
+  selectedValues.value = next;
+
+  const values = [...next];
+
+  modelValue.value = props.multiple
+    ? values
+    : (values[0] ?? null);
+}
+
+provide<ListContext>("loba-list", {
+  selectable: props.selectable,
+  multiple: props.multiple,
+  isSelected,
+  toggleSelection,
+});
+</script>
+
+<template>
+  <div class="list">
+    <slot />
+  </div>
+</template>

package/src/data/ListItem.vue

@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import {
+  computed,
+  inject,
+} from "vue";
+
+export interface ListItemProps {
+  value: string | number;
+  disabled?: boolean;
+}
+
+const props = withDefaults(
+  defineProps<ListItemProps>(),
+  {
+    disabled: false,
+  },
+);
+
+interface ListContext {
+  selectable: boolean;
+  multiple: boolean;
+
+  isSelected: (
+    value: string | number
+  ) => boolean;
+
+  toggleSelection: (
+    value: string | number
+  ) => void;
+}
+
+const injectedList = inject<ListContext>("loba-list");
+
+if (!injectedList) {
+  throw new Error(
+    "ListItem must be used inside a List.",
+  );
+}
+
+const list = injectedList;
+
+if (!list) {
+  throw new Error(
+    "ListItem must be used inside a List.",
+  );
+}
+
+const isSelected = computed(() =>
+  list.isSelected(props.value),
+);
+
+const classes = computed(() => ({
+  "list-item": true,
+  "list-item--selectable":
+    list.selectable && !props.disabled,
+  "list-item--selected":
+    isSelected.value,
+  "list-item--disabled":
+    props.disabled,
+}));
+
+function handleClick() {
+  if (
+    props.disabled ||
+    !list.selectable
+  ) {
+    return;
+  }
+
+  list.toggleSelection(props.value);
+}
+</script>
+
+<template>
+  <div
+    :class="classes"
+    :tabindex="
+      list.selectable && !props.disabled
+        ? 0
+        : undefined
+    "
+    :aria-selected="
+      list.selectable
+        ? isSelected
+        : undefined
+    "
+    :aria-disabled="
+      props.disabled || undefined
+    "
+    role="listitem"
+    @click="handleClick"
+    @keydown.enter="handleClick"
+    @keydown.space.prevent="handleClick"
+  >
+    <slot />
+  </div>
+</template>

package/src/data/Pagination.vue

@@ -0,0 +1,254 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+export interface PaginationProps {
+  currentPage: number;
+  totalItems: number;
+  pageSize: number;
+  siblingCount?: number;
+  compact?: boolean;
+}
+
+const props = withDefaults(
+  defineProps<PaginationProps>(),
+  {
+    siblingCount: 1,
+    compact: false,
+  },
+);
+
+const emit = defineEmits<{
+  "update:currentPage": [
+    page: number,
+  ];
+}>();
+
+const totalPages = computed(() =>
+  Math.max(
+    1,
+    Math.ceil(
+      props.totalItems / props.pageSize,
+    ),
+  ),
+);
+
+const safeCurrentPage = computed(() =>
+  Math.min(
+    Math.max(props.currentPage, 1),
+    totalPages.value,
+  ),
+);
+
+type PaginationItem =
+  | number
+  | "...";
+
+const pages = computed<PaginationItem[]>(() => {
+  const total = totalPages.value;
+  const current = safeCurrentPage.value;
+  const siblings = Math.max(
+    0,
+    props.siblingCount,
+  );
+
+  if (total <= 7) {
+    return Array.from(
+      { length: total },
+      (_, index) => index + 1,
+    );
+  }
+
+  const left = Math.max(
+    current - siblings,
+    1,
+  );
+
+  const right = Math.min(
+    current + siblings,
+    total,
+  );
+
+  const showLeftDots = left > 2;
+  const showRightDots =
+    right < total - 1;
+
+  const result: PaginationItem[] = [1];
+
+  if (showLeftDots) {
+    result.push("...");
+  }
+
+  const start = showLeftDots
+    ? left
+    : 2;
+
+  const end = showRightDots
+    ? right
+    : total - 1;
+
+  for (
+    let page = start;
+    page <= end;
+    page++
+  ) {
+    result.push(page);
+  }
+
+  if (showRightDots) {
+    result.push("...");
+  }
+
+  result.push(total);
+
+  return result;
+});
+
+const classes = computed(() => ({
+  pagination: true,
+  "pagination-compact":
+    props.compact,
+}));
+
+function goTo(page: number) {
+  const next = Math.min(
+    Math.max(page, 1),
+    totalPages.value,
+  );
+
+  if (
+    next === safeCurrentPage.value
+  ) {
+    return;
+  }
+
+  emit(
+    "update:currentPage",
+    next,
+  );
+}
+
+function goPrevious() {
+  goTo(safeCurrentPage.value - 1);
+}
+
+function goNext() {
+  goTo(safeCurrentPage.value + 1);
+}
+
+function goFirst() {
+  goTo(1);
+}
+
+function goLast() {
+  goTo(totalPages.value);
+}
+</script>
+
+<template>
+  <nav
+    :class="classes"
+    aria-label="Pagination"
+  >
+    <div class="pagination-controls">
+      <button
+        class="pagination-item"
+        type="button"
+        :disabled="
+          safeCurrentPage === 1
+        "
+        :class="{
+          'pagination-item--disabled':
+            safeCurrentPage === 1,
+        }"
+        aria-label="First page"
+        @click="goFirst"
+      >
+        «
+      </button>
+
+      <button
+        class="pagination-item"
+        type="button"
+        :disabled="
+          safeCurrentPage === 1
+        "
+        :class="{
+          'pagination-item--disabled':
+            safeCurrentPage === 1,
+        }"
+        aria-label="Previous page"
+        @click="goPrevious"
+      >
+        ‹
+      </button>
+    </div>
+
+    <div class="pagination-pages">
+      <template
+        v-for="(item, index) in pages"
+        :key="`${item}-${index}`"
+      >
+        <span
+          v-if="item === '...'"
+          class="pagination-ellipsis"
+        >
+          …
+        </span>
+
+        <button
+          v-else
+          class="pagination-item"
+          type="button"
+          :class="{
+            'pagination-item--current':
+              item === safeCurrentPage,
+          }"
+          :aria-current="
+            item === safeCurrentPage
+              ? 'page'
+              : undefined
+          "
+          @click="goTo(item)"
+        >
+          {{ item }}
+        </button>
+      </template>
+    </div>
+
+    <div class="pagination-controls">
+      <button
+        class="pagination-item"
+        type="button"
+        :disabled="
+          safeCurrentPage === totalPages
+        "
+        :class="{
+          'pagination-item--disabled':
+            safeCurrentPage ===
+            totalPages,
+        }"
+        aria-label="Next page"
+        @click="goNext"
+      >
+        ›
+      </button>
+
+      <button
+        class="pagination-item"
+        type="button"
+        :disabled="
+          safeCurrentPage === totalPages
+        "
+        :class="{
+          'pagination-item--disabled':
+            safeCurrentPage ===
+            totalPages,
+        }"
+        aria-label="Last page"
+        @click="goLast"
+      >
+        »
+      </button>
+    </div>
+  </nav>
+</template>