agnosticui-core 2.0.0-alpha.2

package/src/components/Pagination/vue/VuePagination.vue

@@ -0,0 +1,72 @@
+<template>
+  <ag-pagination
+    ref="paginationRef"
+    .bordered="bordered"
+    .firstLastNavigation="firstLastNavigation"
+    .navigationLabels="navigationLabels"
+    :current="current"
+    :total-pages="totalPages"
+    :offset="offset"
+    :justify="justify"
+    :aria-label="ariaLabel"
+    @page-change="handlePageChange"
+    v-bind="$attrs"
+  >
+    <slot />
+  </ag-pagination>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import "../core/Pagination";
+import type {
+  PaginationProps,
+  PageChangeEventDetail,
+  NavigationLabels,
+} from "../core/Pagination";
+
+// Re-export event types
+export type {
+  PageChangeEvent,
+  PageChangeEventDetail,
+} from "../core/Pagination";
+
+// Define props interface, omit callback props for Vue
+export interface VuePaginationProps
+  extends Omit<PaginationProps, "onPageChange"> {
+  current?: number;
+}
+
+// Define props with defaults
+const props = withDefaults(defineProps<VuePaginationProps>(), {
+  current: 1,
+  totalPages: 1,
+  offset: 2,
+  justify: "",
+  ariaLabel: "pagination",
+  bordered: false,
+  firstLastNavigation: false,
+  navigationLabels: () => ({
+    first: "First",
+    previous: "Previous",
+    next: "Next",
+    last: "Last",
+  }),
+});
+
+// Define emits
+const emit = defineEmits<{
+  "page-change": [detail: PageChangeEventDetail];
+  "update:current": [value: number];
+}>();
+
+// Template ref
+const paginationRef = ref<HTMLElement>();
+
+// Event handler
+const handlePageChange = (event: Event) => {
+  const detail = (event as CustomEvent<PageChangeEventDetail>).detail;
+  emit("page-change", detail);
+  emit("update:current", detail.page);
+};
+</script>

package/src/components/Pagination/vue/index.ts

@@ -0,0 +1,72 @@
+export { default } from './VuePagination.vue';
+export { default as VuePagination } from './VuePagination.vue';
+export { default as VueContentPagination } from './VueContentPagination.vue';
+
+// Re-export types from core for convenience
+export type { PageChangeEventDetail, PageChangeEvent } from '../core/Pagination';
+
+/**
+ * Props for VuePagination component
+ */
+export interface VuePaginationProps {
+  current?: number;
+  totalPages?: number;
+  offset?: 1 | 2;
+  justify?: 'start' | 'center' | 'end' | '';
+  ariaLabel?: string;
+  bordered?: boolean;
+  firstLastNavigation?: boolean;
+  navigationLabels?: {
+    first: string;
+    previous: string;
+    next: string;
+    last: string;
+  };
+}
+
+/**
+ * Props with event handlers for programmatic usage (e.g., Storybook, testing, imperative APIs)
+ * In Vue templates, use @page-change instead of :onPageChange
+ */
+export interface VuePaginationPropsWithEvents extends VuePaginationProps {
+  onPageChange?: (detail: { page: number; pages: (number | '...')[] }) => void;
+}
+
+// Re-export types from core for convenience
+export type {
+  NavigateEventDetail,
+  NavigateEvent,
+  ContentNavigationItem,
+} from '../core/ContentPagination';
+
+/**
+ * Props for VueContentPagination component
+ */
+export interface VueContentPaginationProps {
+  previous?: {
+    title: string;
+    href?: string;
+  };
+  next?: {
+    title: string;
+    href?: string;
+  };
+  parent?: {
+    title: string;
+    href?: string;
+  };
+  ariaLabel?: string;
+}
+
+/**
+ * Props with event handlers for programmatic usage (e.g., Storybook, testing, imperative APIs)
+ * In Vue templates, use @navigate instead of :onNavigate
+ */
+export interface VueContentPaginationPropsWithEvents extends VueContentPaginationProps {
+  onNavigate?: (detail: {
+    direction: 'previous' | 'next' | 'parent';
+    title: string;
+    href?: string;
+  }) => void;
+}
+

package/src/components/Popover/core/Popover.ts

@@ -0,0 +1,13 @@
+import { Popover } from './_Popover.js';
+
+if (!customElements.get('ag-popover')) {
+  customElements.define('ag-popover', Popover);
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ag-popover': Popover;
+  }
+}
+
+export * from './_Popover.js';