@userfrosting/sprinkle-core 6.0.0-beta.6 → 6.0.0-beta.8

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@userfrosting/sprinkle-core",
-    "version": "6.0.0-beta.6",
+    "version": "6.0.0-beta.8",
     "type": "module",
     "description": "Core Sprinkle for UserFrosting",
     "funding": "https://opencollective.com/userfrosting",
@@ -24,15 +24,39 @@
         "url": "https://github.com/userfrosting/UserFrosting/issues"
     },
     "exports": {
-        ".": "./app/assets/index.ts",
-        "./interfaces": "./app/assets/interfaces/index.ts",
-        "./stores": "./app/assets/stores/index.ts",
-        "./composables": "./app/assets/composables/index.ts",
-        "./routes": "./app/assets/routes/index.ts"
+        ".": {
+            "userfrosting:monorepo": "./app/assets/index.ts",
+            "import": "./dist/index.js",
+            "types": "./dist/index.d.ts"
+        },
+        "./interfaces": {
+            "userfrosting:monorepo": "./app/assets/interfaces/index.ts",
+            "import": "./dist/interfaces.js",
+            "types": "./dist/interfaces/index.d.ts"
+        },
+        "./stores": {
+            "userfrosting:monorepo": "./app/assets/stores/index.ts",
+            "import": "./dist/stores.js",
+            "types": "./dist/stores/index.d.ts"
+        },
+        "./composables": {
+            "userfrosting:monorepo": "./app/assets/composables/index.ts",
+            "import": "./dist/composables.js",
+            "types": "./dist/composables/index.d.ts"
+        },
+        "./routes": {
+            "userfrosting:monorepo": "./app/assets/routes/index.ts",
+            "import": "./dist/routes.js",
+            "types": "./dist/routes/index.d.ts"
+        }
     },
+    "types": "./dist/index.d.ts",
     "files": [
-        "app/assets/"
+        "dist/"
     ],
+    "engines": {
+        "node": ">= 18"
+    },
     "dependencies": {
         "@regle/core": "^1.6.0",
         "@regle/rules": "^1.6.0",
@@ -43,6 +67,10 @@
         "axios": "^1.12.0",
         "pinia": "^2.1.6",
         "pinia-plugin-persistedstate": "^3.2.0",
-        "vue": "^3.4.21"
+        "vue": "^3.4.21",
+        "vue-router": "^4.2.4"
+    },
+    "scripts": {
+        "build": "vite build"
     }
 }

package/app/assets/composables/index.ts

@@ -1,4 +0,0 @@
-export { useSprunjer } from './useSprunjer'
-export { useCsrf } from './useCsrf'
-export { useAxiosInterceptor } from './useAxiosInterceptor'
-export { useRuleSchemaAdapter } from './useRuleSchemaAdapter'

package/app/assets/composables/useAxiosInterceptor.ts

@@ -1,30 +0,0 @@
-import axios from 'axios'
-import { useAlertsStore } from '../stores/useAlertsStore'
-import { Severity } from '../interfaces'
-
-/**
- * Axios Error Handler
- *
- * This composable sets up an Axios interceptor to handle errors globally using
- * the Alerts store. It sends the error to the Alerts store, unless it's a 401
- * error.
- *
- * @see https://axios-http.com/docs/interceptors
- */
-export const useAxiosInterceptor = () => {
-    axios.interceptors.response.use(
-        (response) => response,
-        (error) => {
-            if (error.response.status !== 401) {
-                const alertStore = useAlertsStore()
-                alertStore.push({
-                    title: error.response.data.title ?? error.response?.statusText,
-                    description: error.response?.data?.description ?? error.message,
-                    style: Severity.Danger
-                })
-            }
-
-            return Promise.reject(error)
-        }
-    )
-}

package/app/assets/composables/useCsrf.ts

@@ -1,129 +0,0 @@
-import { ref, watchEffect } from 'vue'
-import { useConfigStore } from '../stores'
-import axios from 'axios'
-
-/**
- * CSRF Protection Composable
- *
- * Automatically sets the CSRF token in the axios headers for all requests.
- * The CSRF token is read from the meta tags in the HTML document.
- * The CSRF token can updated when the server responds with a new token in the headers.
- *
- * @see https://cheatsheetseries.owasp.org/cheatsheets/Cross-Site_Request_Forgery_Prevention_Cheat_Sheet.html#axios
- */
-export const useCsrf = () => {
-    /**
-     * Public constant for the CSRF token name and value, plus respective keys.
-     */
-    const key_name = ref(getNameKey())
-    const key_value = ref(getValueKey())
-    const name = ref(readMetaTag(key_name.value))
-    const token = ref(readMetaTag(key_value.value))
-
-    /**
-     * Set the axios headers for CSRF protection
-     */
-    function setAxiosHeader() {
-        axios.defaults.headers.post[key_name.value] = name.value
-        axios.defaults.headers.post[key_value.value] = token.value
-        axios.defaults.headers.put[key_name.value] = name.value
-        axios.defaults.headers.put[key_value.value] = token.value
-        axios.defaults.headers.delete[key_name.value] = name.value
-        axios.defaults.headers.delete[key_value.value] = token.value
-        axios.defaults.headers.patch[key_name.value] = name.value
-        axios.defaults.headers.patch[key_value.value] = token.value
-    }
-
-    /**
-     * Fetch the CSRF token from the server
-     */
-    async function fetchCsrfToken() {
-        const response = await axios.get('/api/csrf')
-        updateFromHeaders(response.headers)
-    }
-
-    /**
-     * Get the CSRF token name and value keys from config.
-     */
-    function getNameKey(): string {
-        const config = useConfigStore()
-        return config.get('csrf.name', 'csrf') + '_name'
-    }
-    function getValueKey(): string {
-        const config = useConfigStore()
-        return config.get('csrf.name', 'csrf') + '_value'
-    }
-
-    /**
-     * Meta tag reader and writer
-     */
-    function readMetaTag(name: string): string {
-        return document.querySelector("meta[name='" + name + "']")?.getAttribute('content') ?? ''
-    }
-    function writeMetaTag(name: string, value: string) {
-        const metaTag = document.querySelector("meta[name='" + name + "']")
-        if (metaTag) {
-            metaTag.setAttribute('content', value)
-        } else {
-            const newMetaTag = document.createElement('meta')
-            newMetaTag.setAttribute('name', name)
-            newMetaTag.setAttribute('content', value)
-            document.head.appendChild(newMetaTag)
-        }
-    }
-
-    /**
-     * Update the CSRF token with the values from the request headers.
-     *
-     * N.B.: CSRF keys are hardcoded with '{name}_name' and '{name}_value' in
-     * PHP. However, the headers doesn't allows underscores that are replaced
-     * with dashes automatically.
-     */
-    function updateFromHeaders(headers: any) {
-        const config = useConfigStore()
-        const nameKey = config.get('csrf.name', 'csrf') + '-name'
-        const valueKey = config.get('csrf.name', 'csrf') + '-value'
-
-        // Update both value only if the headers are present
-        // This is to avoid overwriting the CSRF token with empty values
-        if (nameKey in headers) {
-            name.value = headers[nameKey]
-        }
-        if (valueKey in headers) {
-            token.value = headers[valueKey]
-        }
-    }
-
-    /**
-     * Return if CSRF is enabled
-     */
-    function isEnabled(): boolean {
-        const config = useConfigStore()
-        return config.get('csrf.enabled', true)
-    }
-
-    /**
-     * Watchers - Watch for changes in the CSRF token and update the axios
-     * headers + meta tags
-     */
-    watchEffect(() => {
-        if (isEnabled() && name.value !== '' && token.value !== '') {
-            writeMetaTag(key_name.value, name.value)
-            writeMetaTag(key_value.value, token.value)
-            setAxiosHeader()
-        }
-    })
-
-    /**
-     * Export functions and managed states
-     */
-    return {
-        key_name,
-        key_value,
-        name,
-        token,
-        isEnabled,
-        updateFromHeaders,
-        fetchCsrfToken
-    }
-}

package/app/assets/composables/useRuleSchemaAdapter.ts

@@ -1,205 +0,0 @@
-import {
-    withMessage,
-    required,
-    maxLength,
-    minLength,
-    email,
-    integer,
-    numeric,
-    url,
-    oneOf,
-    between,
-    regex,
-    not
-} from '@regle/rules'
-import { useTranslator } from '../stores'
-
-export function useRuleSchemaAdapter() {
-    /**
-     * Parse the YAML schema string into a JavaScript object.
-     *
-     * @param rawSchema The YAML schema string to parse.
-     * @returns RuleSchema The Regle schema object.
-     */
-    function adapt(sourceSchema: Record<string, any>): Record<string, any> {
-        // The Regle schema object to be returned
-        const regleSchema: any = {}
-
-        // Iterate over each field in the schema
-        for (const field in sourceSchema) {
-            // Check if the field is a direct property of the sourceSchema object
-            if (Object.prototype.hasOwnProperty.call(sourceSchema, field)) {
-                // Get the field rules from the source schema
-                const schemaFieldRules = sourceSchema[field]?.validators || {}
-
-                // The returned regle rules for the field
-                const regleRules: Record<string, any> = {}
-
-                // Iterate over each rule in the source schema field rules
-                for (const key of Object.keys(schemaFieldRules)) {
-                    adaptRule(key, schemaFieldRules, regleRules)
-                }
-
-                regleSchema[field] = regleRules
-            }
-        }
-
-        return regleSchema
-    }
-
-    function translateMessage(fieldRulesMeta: { message?: string; [key: string]: any }): string {
-        const { translate } = useTranslator()
-
-        // If there's no message, return an empty string
-        if (!fieldRulesMeta.message) {
-            return ''
-        }
-
-        // Copy the field rules meta to avoid mutation and remove the message key
-        const fieldRulesMetaCopy = { ...fieldRulesMeta }
-        delete fieldRulesMetaCopy.message
-
-        return translate(fieldRulesMeta.message, fieldRulesMetaCopy)
-    }
-
-    function adaptRule(key: string, schemaFieldRules: any, regleRules: Record<string, any>) {
-        // Required
-        if (key === 'required' && schemaFieldRules.required) {
-            const message: string = translateMessage(schemaFieldRules.required)
-            regleRules['required'] = message === '' ? required : withMessage(required, message)
-        }
-
-        // Email
-        if (key === 'email' && schemaFieldRules.email) {
-            const message: string = translateMessage(schemaFieldRules.email)
-            regleRules['email'] = withMessage(email, message)
-        }
-
-        // Length
-        if (key === 'length' && schemaFieldRules.length) {
-            if (schemaFieldRules.length.min !== undefined) {
-                const message: string = translateMessage(schemaFieldRules.length)
-                regleRules['minLength'] =
-                    message === ''
-                        ? minLength(schemaFieldRules.length.min)
-                        : withMessage(minLength(schemaFieldRules.length.min), message)
-            }
-            if (schemaFieldRules.length.max !== undefined) {
-                const message: string = translateMessage(schemaFieldRules.length)
-                regleRules['maxLength'] =
-                    message === ''
-                        ? maxLength(schemaFieldRules.length.max)
-                        : withMessage(maxLength(schemaFieldRules.length.max), message)
-            }
-        }
-
-        // TODO : matches
-        if (key === 'matches' && schemaFieldRules.matches) {
-            console.warn('Validation rule "matches" not implemented yet')
-            // console.debug('Matched rule: matches', schemaFieldRules.matches)
-            // sameAs: sameAs(() => form.value.password),
-        }
-
-        // TODO : equals
-        if (key === 'equals' && schemaFieldRules.equals) {
-            console.warn('Validation rule "equals" not implemented yet')
-        }
-
-        // Integer
-        if (key === 'integer' && schemaFieldRules.integer) {
-            const message: string = translateMessage(schemaFieldRules.integer)
-            regleRules['integer'] = message === '' ? integer : withMessage(integer, message)
-        }
-
-        // member_of
-        if (key === 'member_of' && schemaFieldRules.member_of) {
-            const message: string = translateMessage(schemaFieldRules.member_of)
-            regleRules['member_of'] =
-                message === ''
-                    ? oneOf(schemaFieldRules.member_of.values)
-                    : withMessage(oneOf(schemaFieldRules.member_of.values), message)
-        }
-
-        // no_leading_whitespace
-        if (key === 'no_leading_whitespace' && schemaFieldRules.no_leading_whitespace) {
-            const message: string = translateMessage(schemaFieldRules.no_leading_whitespace)
-            regleRules['no_leading_whitespace'] =
-                message === '' ? regex(/^\S.*$/) : withMessage(regex(/^\S.*$/), message)
-        }
-
-        // no_trailing_whitespace
-        if (key === 'no_trailing_whitespace' && schemaFieldRules.no_trailing_whitespace) {
-            const message: string = translateMessage(schemaFieldRules.no_trailing_whitespace)
-            regleRules['no_trailing_whitespace'] =
-                message === '' ? regex(/^.*\S$/) : withMessage(regex(/^.*\S$/), message)
-        }
-
-        // TODO : not_equals
-        if (key === 'not_equals' && schemaFieldRules.not_equals) {
-            console.warn('Validation rule "not_equals" not implemented yet')
-        }
-
-        // TODO : not_matches
-        if (key === 'not_matches' && schemaFieldRules.not_matches) {
-            console.warn('Validation rule "not_matches" not implemented yet')
-        }
-
-        // not_member_of
-        if (key === 'not_member_of' && schemaFieldRules.not_member_of) {
-            const message: string = translateMessage(schemaFieldRules.not_member_of)
-            regleRules['not_member_of'] =
-                message === ''
-                    ? not(oneOf(schemaFieldRules.not_member_of.values))
-                    : withMessage(not(oneOf(schemaFieldRules.not_member_of.values)), message)
-        }
-
-        // Numeric
-        if (key === 'numeric' && schemaFieldRules.numeric) {
-            const message: string = translateMessage(schemaFieldRules.numeric)
-            regleRules['numeric'] = message === '' ? numeric : withMessage(numeric, message)
-        }
-
-        // Range
-        if (key === 'range' && schemaFieldRules.range) {
-            const message: string = translateMessage(schemaFieldRules.range)
-            regleRules['range'] =
-                message === ''
-                    ? between(schemaFieldRules.range.min, schemaFieldRules.range.max)
-                    : withMessage(
-                          between(schemaFieldRules.range.min, schemaFieldRules.range.max),
-                          message
-                      )
-        }
-
-        // Regex
-        if (key === 'regex' && schemaFieldRules.regex) {
-            const message: string = translateMessage(schemaFieldRules.regex)
-            regleRules['regex'] =
-                message === ''
-                    ? regex(new RegExp(schemaFieldRules.regex.regex))
-                    : withMessage(regex(new RegExp(schemaFieldRules.regex.regex)), message)
-        }
-
-        // TODO : telephone
-        if (key === 'telephone' && schemaFieldRules.telephone) {
-            console.warn('Validation rule "telephone" not implemented yet')
-        }
-
-        // uri
-        if (key === 'uri' && schemaFieldRules.uri) {
-            const message: string = translateMessage(schemaFieldRules.uri)
-            regleRules['uri'] = message === '' ? url : withMessage(url, message)
-        }
-
-        // Username
-        if (key === 'username' && schemaFieldRules.username) {
-            const message: string = translateMessage(schemaFieldRules.username)
-            regleRules['username'] =
-                message === ''
-                    ? regex(/^([a-z0-9.\-_])+$/i)
-                    : withMessage(regex(/^([a-z0-9.\-_])+$/i), message)
-        }
-    }
-
-    return { adapt, translateMessage }
-}

package/app/assets/composables/useSprunjer.ts

@@ -1,188 +0,0 @@
-/**
- * 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 {
-    ApiErrorResponse,
-    AssociativeArray,
-    Sprunjer,
-    SprunjerData,
-    SprunjerResponse
-} from '../interfaces'
-
-export const useSprunjer = (
-    dataUrl: string | (() => string),
-    defaultSorts: AssociativeArray = {},
-    defaultFilters: AssociativeArray = {},
-    defaultSize: number = 10,
-    defaultPage: number = 0
-): Sprunjer => {
-    // Sprunje parameters
-    const size = ref<number>(defaultSize)
-    const page = ref<number>(defaultPage)
-    const sorts = ref<AssociativeArray>(defaultSorts)
-    const filters = ref<AssociativeArray>(defaultFilters)
-
-    // Raw data - Init with default data
-    const data = ref<SprunjerData>({
-        count: 0,
-        count_filtered: 0,
-        rows: [],
-        listable: {},
-        sortable: [],
-        filterable: []
-    })
-
-    // State
-    const loading = ref<boolean>(false)
-    const error = ref<ApiErrorResponse | null>(null)
-
-    /**
-     * Api fetch function
-     */
-    async function fetch() {
-        loading.value = true
-        axios
-            .get<SprunjerResponse>(toValue(dataUrl), {
-                params: {
-                    size: size.value,
-                    page: page.value,
-                    sorts: sorts.value,
-                    filters: filters.value
-                }
-            })
-            .then((response) => {
-                // Assign the response data to the Sprunje Data.
-                // Note both object can't be assigned directly, as the response
-                // object is not a SprunjeData object.
-                data.value.count = response.data.count
-                data.value.count_filtered = response.data.count_filtered
-                data.value.rows = response.data.rows
-                data.value.listable = response.data.listable ?? {}
-                data.value.sortable = response.data.sortable ?? []
-                data.value.filterable = response.data.filterable ?? []
-            })
-            .catch((err) => {
-                error.value = err.response.data as ApiErrorResponse
-            })
-            .finally(() => {
-                loading.value = false
-            })
-    }
-
-    /**
-     * Computed properties
-     */
-    const totalPages = computed(() => {
-        // N.B.: Sprunjer page starts at 0, not 1
-        // Make sure page is never negative
-        return Math.max(Math.ceil((data.value.count_filtered ?? 0) / size.value) - 1, 0)
-    })
-
-    const count = computed(() => {
-        return data.value.count ?? 0
-    })
-
-    const first = computed(() => {
-        return Math.min(page.value * size.value + 1, data.value.count ?? 0)
-    })
-
-    const last = computed(() => {
-        return Math.min((page.value + 1) * size.value, data.value.count_filtered ?? 0)
-    })
-
-    const countFiltered = computed(() => {
-        return data.value.count_filtered ?? 0
-    })
-
-    const rows = computed(() => {
-        return data.value.rows ?? []
-    })
-
-    /**
-     * Download the data as a CSV file
-     */
-    function downloadCsv() {
-        console.log('Not yet implemented')
-    }
-
-    /**
-     * Apply sorting to a column, cycling from the previous sort order.
-     * Order goes : asc -> desc -> null -> asc
-     * Used to toggle the sort order of a column when the column header is clicked
-     * @param column The column to sort
-     */
-    function toggleSort(column: string) {
-        let newOrder: string | null
-        if (sorts.value[column] === 'asc') {
-            newOrder = 'desc'
-        } else if (sorts.value[column] === 'desc') {
-            newOrder = null
-        } else {
-            newOrder = 'asc'
-        }
-
-        sorts.value[column] = newOrder
-    }
-
-    /**
-     * Automatically fetch the data when any parameters change
-     */
-    watchEffect(() => {
-        fetch()
-    })
-
-    /**
-     * Export the functions and data
-     */
-    return {
-        dataUrl,
-        size,
-        page,
-        sorts,
-        filters,
-        data,
-        fetch,
-        loading,
-        error,
-        downloadCsv,
-        totalPages,
-        countFiltered,
-        count,
-        rows,
-        first,
-        last,
-        toggleSort
-    }
-}

package/app/assets/index.d.ts

@@ -1,8 +0,0 @@
-export {}
-
-declare module 'vue' {
-    interface ComponentCustomProperties {
-        $t: (key: string, placeholders?: string | number | object) => string
-        $tdate: (date: string, format?: string | object) => string
-    }
-}

package/app/assets/index.ts

@@ -1,40 +0,0 @@
-import type { App } from 'vue'
-import { useConfigStore, useTranslator } from './stores'
-import { useCsrf } from './composables/useCsrf'
-import { useAxiosInterceptor } from './composables'
-
-/**
- * Core Sprinkle initialization recipe.
- *
- * This recipe is responsible for loading the configuration from the api,
- * loading the translations, register the translator as $t and $tdate global
- * properties and setting up the axios CSRF headers.
- */
-export default {
-    install: (app: App) => {
-        /**
-         * Add Axios error handler.
-         * Load first to ensure that all axios requests are intercepted.
-         * This is important for the config loading and translator loading.
-         */
-        useAxiosInterceptor()
-
-        /**
-         * Load configuration
-         */
-        useConfigStore().load()
-
-        /**
-         * Load translations & add $t+$tdate to global properties
-         */
-        const translator = useTranslator()
-        translator.load()
-        app.config.globalProperties.$t = translator.translate
-        app.config.globalProperties.$tdate = translator.translateDate
-
-        /**
-         * Setup CSRF Protection.
-         */
-        useCsrf()
-    }
-}

package/app/assets/interfaces/alerts.ts

@@ -1,16 +0,0 @@
-/**
- * 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 {
-    title?: string
-    description?: string
-    style?: Severity | keyof typeof Severity
-    closeBtn?: boolean
-    hideIcon?: boolean
-}