Refactor Core Sprinkle Build

.gitignore

@@ -30,6 +30,7 @@ node_modules/
 
 # Ignore compiled assets
 public/assets/
+dist/
 
 # Ignore dev utils cache
 .phpunit.cache

app/assets/composables/index.ts

@@ -0,0 +1 @@
+export { useSprunjer } from './sprunjer'

app/assets/composables/sprunjer.ts

@@ -1,36 +1,47 @@
-import { ref, toValue, watchEffect, computed, type Ref, type ComputedRef } from 'vue'
+/**
+ * Sprunjer Composable
+ *
+ * A composable function that fetches data from a Sprunjer API and provides
+ * all necessary function like pagination, sorting and filtering.
+ *
+ * Pass the URL of the Sprunjer API to the function, and it will fetch the data.
+ * A watcher will refetch the data whenever any parameters change.
+ *
+ * Params:
+ * @param {String} dataUrl - The URL of the Sprunjer API
+ * @param {Object} defaultSorts - An object of default sorts
+ * @param {Object} defaultFilters - An object of default filters
+ * @param {Number} defaultSize - The default number of items per page
+ * @param {Number} defaultPage - The default page number
+ *
+ * Exports:
+ * - size: The number of items per page
+ * - page: The current page number
+ * - sorts: An object of sorts
+ * - filters: An object of filters
+ * - data: The raw data from the API
+ * - fetch: A function to fetch the data
+ * - loading: A boolean indicating if the data is loading
+ * - totalPages: The total number of pages
+ * - downloadCsv: A function to download the data as a CSV file
+ * - countFiltered: The total number of items after filtering
+ * - count: The total number of items
+ * - rows: The rows of data
+ * - first: The index of the first item on the current page
+ * - last: The index of the last item on the current page
+ * - toggleSort: A function to toggle the sort order of a column
+ */
+import { ref, toValue, watchEffect, computed } from 'vue'
 import axios from 'axios'
+import type { AssociativeArray, Sprunjer } from '../interfaces'
 
-interface AssociativeArray {
-    [key: string]: string | null
-}
-
-interface Sprunjer {
-    dataUrl: any
-    size: Ref<number>
-    page: Ref<number>
-    totalPages: ComputedRef<number>
-    countFiltered: ComputedRef<number>
-    first: ComputedRef<number>
-    last: ComputedRef<number>
-    sorts: Ref<AssociativeArray>
-    filters: Ref<AssociativeArray>
-    data: Ref<any>
-    loading: Ref<boolean>
-    count: ComputedRef<number>
-    rows: ComputedRef<any>
-    fetch: () => void
-    toggleSort: (column: string) => void
-    downloadCsv: () => void
-}
-
-const useSprunjer = (
+export const useSprunjer = (
     dataUrl: any,
     defaultSorts: AssociativeArray = {},
     defaultFilters: AssociativeArray = {},
     defaultSize: number = 10,
     defaultPage: number = 0
-) => {
+): Sprunjer => {
     // Sprunje parameters
     const size = ref<number>(defaultSize)
     const page = ref<number>(defaultPage)
@@ -151,5 +162,3 @@ const useSprunjer = (
         toggleSort
     }
 }
-
-export { useSprunjer, type Sprunjer, type AssociativeArray }

app/assets/plugin.ts → app/assets/index.ts

@@ -1,4 +1,4 @@
-import { useConfigStore } from './stores/config'
+import { useConfigStore } from './stores'
 
 export default {
     install: () => {

app/assets/interfaces/alerts.ts

@@ -1,3 +1,10 @@
+/**
+ * Alert Interface
+ *
+ * Represents a common interface for alert components. This interface is used by
+ * API when an error occurs or a successful event occurs, and consumed by the
+ * interface.
+ */
 import { Severity } from './severity'
 
 export interface AlertInterface {

app/assets/interfaces/common.ts

@@ -0,0 +1,8 @@
+/**
+ * Common Interfaces
+ *
+ * Returns miscellaneous interfaces that are used throughout the application.
+ */
+export interface AssociativeArray {
+    [key: string]: string | null
+}

app/assets/interfaces/index.ts

@@ -1,4 +1,4 @@
-import type { AlertInterface } from './alerts'
-import { Severity } from './severity'
-
-export { type AlertInterface, Severity }
+export type { AlertInterface } from './alerts'
+export type { AssociativeArray } from './common'
+export { Severity } from './severity'
+export type { Sprunjer } from './sprunjer'

app/assets/interfaces/sprunjer.ts

@@ -0,0 +1,26 @@
+/**
+ * Sprunjer Interface
+ *
+ * Represents the interface for the Sprunjer composable.
+ */
+import type { Ref, ComputedRef } from 'vue'
+import type { AssociativeArray } from '../interfaces'
+
+export interface Sprunjer {
+    dataUrl: any
+    size: Ref<number>
+    page: Ref<number>
+    sorts: Ref<AssociativeArray>
+    filters: Ref<AssociativeArray>
+    data: Ref<any>
+    fetch: () => void
+    loading: Ref<boolean>
+    totalPages: ComputedRef<number>
+    downloadCsv: () => void
+    countFiltered: ComputedRef<number>
+    count: ComputedRef<number>
+    rows: ComputedRef<any[]>
+    first: ComputedRef<number>
+    last: ComputedRef<number>
+    toggleSort: (column: string) => void
+}

app/assets/stores/config.ts

@@ -1,3 +1,9 @@
+/**
+ * Config Store
+ *
+ * This store is used to access the configuration of the application from the
+ * API.
+ */
 import { defineStore } from 'pinia'
 import axios from 'axios'
 import { getProperty } from 'dot-prop'

app/assets/stores/index.ts

@@ -0,0 +1 @@
+export { useConfigStore } from './config'

app/assets/tests/plugin.test.ts

@@ -1,6 +1,6 @@
 import { describe, expect, test, vi } from 'vitest'
 import { useConfigStore } from '../stores/config'
-import plugin from '../plugin'
+import plugin from '../'
 import * as Config from '../stores/config'
 
 const mockConfigStore = {