@userfrosting/sprinkle-core 6.0.0-beta.7 → 6.0.0-rc.1

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
-}

package/app/assets/interfaces/index.ts

@@ -1,30 +0,0 @@
-/**
- * Interface for custom routes meta fields.
- *
- * Meta Fields Added :
- * - title: string - Page title
- * - description: string - Page description
- *
- * Theses fields are used to set the document title and description, as well as
- * for breadcrumbs generation.
- *
- * @see https://router.vuejs.org/guide/advanced/meta.html#TypeScript
- */
-import 'vue-router'
-
-declare module 'vue-router' {
-    interface RouteMeta {
-        title?: string
-        description?: string
-    }
-}
-
-export type { AlertInterface } from './alerts'
-export type { AssociativeArray } from './common'
-export { Severity } from './severity'
-export type { Sprunjer, SprunjerData, SprunjerListable, SprunjerListableOption } from './sprunjer'
-export type { SprunjerRequest, SprunjerResponse } from './sprunjerApi'
-export type { DictionaryResponse, DictionaryEntries, DictionaryConfig } from './DictionaryApi'
-
-// Misc
-export type { ApiResponse, ApiErrorResponse } from './ApiResponse'

package/app/assets/interfaces/sprunjer.ts

@@ -1,60 +0,0 @@
-/**
- * Sprunjer Interface
- *
- * Represents the interface for the Sprunjer composable.
- */
-import type { Ref, ComputedRef } from 'vue'
-import type { ApiErrorResponse, AssociativeArray } from '.'
-
-export interface Sprunjer {
-    dataUrl: string | (() => string)
-    size: Ref<number>
-    page: Ref<number>
-    sorts: Ref<AssociativeArray>
-    filters: Ref<AssociativeArray>
-    data: Ref<SprunjerData>
-    fetch: () => void
-    loading: Ref<boolean>
-    error: Ref<ApiErrorResponse | null>
-    totalPages: ComputedRef<number>
-    downloadCsv: () => void
-    countFiltered: ComputedRef<number>
-    count: ComputedRef<number>
-    rows: ComputedRef<any[]>
-    first: ComputedRef<number>
-    last: ComputedRef<number>
-    toggleSort: (column: string) => void
-}
-
-/**
- * Sprunjer Data. Represents the data that is returned from any Sprunjer
- * Composable. It is different than SprunjerResponse, as the response if what
- * the API return, Data is what Vue provides. Both are similar, but Data doesn't
- * have optional values.
- *
- * N.B.: "rows" uses a generic array. It can contain any object, and should
- * actually be can be extended for each Sprunjer
- */
-export interface SprunjerData {
-    count: number
-    count_filtered: number
-    rows: any[]
-    listable: SprunjerListable
-    sortable: string[]
-    filterable: string[]
-}
-
-/**
- * Sprunjer Listable. Represents a listable for a Sprunjer.
- */
-export interface SprunjerListable {
-    [key: string]: SprunjerListableOption[]
-}
-
-/**
- * Sprunjer Listable Option. Represents a listable option for a Sprunjer.
- */
-export interface SprunjerListableOption {
-    value: string
-    text: string
-}

package/app/assets/routes/index.ts

@@ -1,44 +0,0 @@
-/**
- * Default error routes.
- *
- * N.B.: The first of these routes serve as a catch-all, so 404 not found must
- * be first.
- */
-export default [
-    {
-        path: '/:pathMatch(.*)*',
-        name: 'NotFound',
-        meta: {
-            title: 'ERROR.404.TITLE',
-            description: 'ERROR.404.DESCRIPTION'
-        },
-        component: () => import('../views/Page404NotFound.vue')
-    },
-    {
-        path: '/:pathMatch(.*)*',
-        name: 'Unauthorized',
-        meta: {
-            title: 'ERROR.401.TITLE',
-            description: 'ERROR.401.DESCRIPTION'
-        },
-        component: () => import('../views/Page401Unauthorized.vue')
-    },
-    {
-        path: '/:pathMatch(.*)*',
-        name: 'Forbidden',
-        meta: {
-            title: 'ERROR.403.TITLE',
-            description: 'ERROR.403.DESCRIPTION'
-        },
-        component: () => import('../views/Page403Forbidden.vue')
-    },
-    {
-        path: '/:pathMatch(.*)*',
-        name: 'Error',
-        meta: {
-            title: 'ERROR.TITLE',
-            description: 'ERROR.DESCRIPTION'
-        },
-        component: () => import('../views/PageError.vue')
-    }
-]

package/app/assets/stores/index.ts

@@ -1,4 +0,0 @@
-export { useConfigStore } from './useConfigStore'
-export { usePageMeta } from './usePageMeta'
-export { useTranslator } from './useTranslator'
-export { useAlertsStore } from './useAlertsStore'

package/app/assets/stores/useAlertsStore.ts

@@ -1,30 +0,0 @@
-import { defineStore } from 'pinia'
-import type { AlertInterface } from '../interfaces'
-
-/**
- * Alerts Store
- *
- * Manages application alerts in a reactive store. Templates can use this
- * store to display alerts to users, including errors, warnings,
- * informational, or success messages. When an alert is added, templates
- * should automatically update the interface to reflect the change.
- */
-export const useAlertsStore = defineStore('alerts', {
-    state: () => ({
-        alerts: [] as AlertInterface[]
-    }),
-    actions: {
-        push(alert: AlertInterface) {
-            this.alerts.push(alert)
-        },
-        pop() {
-            return this.alerts.pop()
-        },
-        shift() {
-            return this.alerts.shift()
-        },
-        clear() {
-            this.alerts = []
-        }
-    }
-})

package/app/assets/stores/useConfigStore.ts

@@ -1,30 +0,0 @@
-/**
- * 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'
-
-export const useConfigStore = defineStore('config', {
-    persist: true,
-    state: () => {
-        return {
-            config: {}
-        }
-    },
-    getters: {
-        get: (state) => {
-            return (key: string, value?: any): any => getProperty(state.config, key, value)
-        }
-    },
-    actions: {
-        async load() {
-            axios.get('/api/config').then((response) => {
-                this.config = response.data
-            })
-        }
-    }
-})

package/app/assets/stores/usePageMeta.ts

@@ -1,114 +0,0 @@
-import { computed, ref, watch } from 'vue'
-import { useRoute } from 'vue-router'
-import { useTranslator } from '@userfrosting/sprinkle-core/stores'
-import { useConfigStore } from '../stores'
-import { defineStore } from 'pinia'
-
-/**
- * Page Meta Composable
- *
- * Handles the page meta data such as title, description, plus generate
- * breadcrumbs from the frontend router. The title, description and breadcrumbs
- * are updated automatically when the route changes.
- *
- * Available States : breadcrumbs, title, description
- */
-export const usePageMeta = defineStore('pageMeta', () => {
-    /**
-     * Globally provided properties
-     */
-    const route = useRoute()
-    const { translate } = useTranslator()
-
-    /**
-     * States
-     *
-     * - title: The current page title
-     * - description: The current page description
-     * - breadcrumbs: The current page breadcrumbs
-     * - hideBreadcrumbs: Ask the component to hide the breadcrumbs on the page
-     * - hideTitle: Ask the component to hide the title on the page
-     */
-    const title = ref<string>('')
-    const description = ref<string>('')
-    const breadcrumbs = ref<Breadcrumb[]>([])
-    const hideBreadcrumbs = ref<boolean>(false)
-    const hideTitle = ref<boolean>(false)
-
-    /**
-     * Actions - Refresh the breadcrumbs, title and description
-     */
-    function refresh() {
-        // Reset default visibility attributes
-        hideBreadcrumbs.value = false
-        hideTitle.value = false
-
-        // Get route trail
-        const matchedRoutes = route.matched
-
-        // Filter to remove routes without title and assign values as defined
-        // in the breadcrumbs interface.
-        const crumbs = matchedRoutes
-            .filter(
-                (routeItem) => routeItem.meta.title !== undefined && routeItem.meta.title !== ''
-            )
-            .map((routeItem) => {
-                return {
-                    label: routeItem.meta?.title || '',
-                    to: routeItem.path
-                }
-            })
-
-        // Add site title as first breadcrumb
-        crumbs.unshift({
-            label: siteTitle.value,
-            to: '/'
-        })
-
-        // Replace ref with new values
-        breadcrumbs.value = crumbs
-
-        // Update Page Title & Description with current route
-        title.value = route.meta.title || ''
-        description.value = translate(route.meta.description || '')
-    }
-
-    // Update the document title
-    function updatePageTitle() {
-        document.title = pageFullTitle.value
-    }
-
-    // Update the document description in the HTML meta tag
-    function updatePageDescription() {
-        const descriptionElement = document.querySelector('head meta[name="description"]')
-        descriptionElement?.setAttribute('content', description.value)
-    }
-
-    /**
-     * Computed Properties - Getters
-     *
-     * - siteTitle: Return the site title from the config Store
-     * - pageFullTitle: Return the full page title
-     */
-    const siteTitle = computed<string>(() => useConfigStore().get('site.title') || '')
-    const pageFullTitle = computed<string>(() => {
-        return title.value ? translate(title.value) + ' | ' + siteTitle.value : siteTitle.value
-    })
-
-    /**
-     * Watchers - route, page title and description changes
-     */
-    watch(route, refresh, { immediate: true })
-    watch(pageFullTitle, updatePageTitle, { immediate: true })
-    watch(description, updatePageDescription, { immediate: true })
-
-    /**
-     * Returns the states and actions
-     */
-    return { breadcrumbs, title, description, hideBreadcrumbs, hideTitle }
-})
-
-interface Breadcrumb {
-    label: string
-    to: string
-}

package/app/assets/stores/useTranslator.ts

@@ -1,293 +0,0 @@
-/**
- * Translator composable store.
- *
- * This pinia store is used to access the translator and to use the translator.
- */
-import { ref } from 'vue'
-import { defineStore } from 'pinia'
-import axios from 'axios'
-import type { DictionaryEntries, DictionaryResponse, DictionaryConfig } from '../interfaces'
-import { DateTime } from 'luxon'
-import type { PluralRules } from './Helpers/PluralRules'
-import {
-    rule0,
-    rule1,
-    rule2,
-    rule3,
-    rule4,
-    rule5,
-    rule6,
-    rule7,
-    rule8,
-    rule9,
-    rule10,
-    rule11,
-    rule12,
-    rule13,
-    rule14,
-    rule15
-} from './Helpers/PluralRules'
-
-// List all available plural rules
-const rules: PluralRules = {
-    0: rule0,
-    1: rule1,
-    2: rule2,
-    3: rule3,
-    4: rule4,
-    5: rule5,
-    6: rule6,
-    7: rule7,
-    8: rule8,
-    9: rule9,
-    10: rule10,
-    11: rule11,
-    12: rule12,
-    13: rule13,
-    14: rule14,
-    15: rule15
-}
-
-export const useTranslator = defineStore(
-    'translator',
-    () => {
-        /**
-         * Variables
-         */
-        const defaultPluralKey = 'plural'
-        const identifier = ref<string>('')
-        const dictionary = ref<DictionaryEntries>({})
-        const config = ref<DictionaryConfig>({
-            name: '',
-            regional: '',
-            authors: [],
-            plural_rule: 0,
-            dates: ''
-        })
-
-        /**
-         * Functions
-         */
-        // Load the dictionary from the API
-        async function load() {
-            axios.get<DictionaryResponse>('/api/dictionary').then((response) => {
-                identifier.value = response.data.identifier
-                config.value = response.data.config
-                dictionary.value = response.data.dictionary
-            })
-        }
-
-        // The translate function
-        function translate(key: string, placeholders: string | number | object = {}): string {
-            const { message, placeholders: mutatedPlaceholders } = getMessageFromKey(
-                key,
-                placeholders
-            )
-            placeholders = mutatedPlaceholders
-
-            return replacePlaceholders(message, placeholders)
-        }
-
-        /**
-         * Format a date to the user locale
-         *
-         * @param date The date to format, in ISO format
-         * @param format The format to use. Default to `DATETIME_MED_WITH_WEEKDAY`.
-         *               See the Luxon documentation for more information on formatting
-         *
-         * @see https://moment.github.io/luxon/#/formatting?id=presets
-         * @see https://moment.github.io/luxon/#/formatting?id=table-of-tokens
-         */
-        function translateDate(
-            date: string,
-            format: string | object = DateTime.DATETIME_MED_WITH_WEEKDAY
-        ): string {
-            const dt = getDateTime(date)
-            if (typeof format === 'object') {
-                return dt.toLocaleString(format)
-            } else {
-                return dt.toFormat(format)
-            }
-        }
-
-        /**
-         * Returns the Luxon DateTime object for the given date, with the user
-         * locale, so Luxon methods can be used without having to set the locale
-         *
-         * @param date The date to format, in ISO format
-         */
-        function getDateTime(date: string): DateTime {
-            return DateTime.fromISO(date).setLocale(config.value.dates)
-        }
-
-        // TODO : Add doc + make Placeholders a type
-        function getMessageFromKey(
-            key: string,
-            placeholders: string | number | Record<string, any>
-        ): { message: string; placeholders: string | number | Record<string, any> } {
-            // Return direct match
-            if (dictionary.value[key] !== undefined) {
-                return { message: dictionary.value[key], placeholders }
-            }
-
-            // First, let's see if we can get the plural rules.
-            // A plural form will always have priority over the `@TRANSLATION` instruction
-            // We start by picking up the plural key, aka which placeholder contains the numeric value defining how many {x} we have
-            const pluralKey = dictionary.value[key + '.@PLURAL'] || defaultPluralKey
-
-            // Let's get the plural value, aka how many {x} we have
-            // If no plural value was found, we fallback to `@TRANSLATION` instruction or default to 1 as a last resort
-            let pluralValue: number = 1
-            if (typeof placeholders === 'object' && placeholders[pluralKey] !== undefined) {
-                pluralValue = Number(placeholders[pluralKey])
-            } else if (typeof placeholders === 'number' || typeof placeholders === 'string') {
-                pluralValue = Number(placeholders)
-            } else if (dictionary.value[key + '.@TRANSLATION'] !== undefined) {
-                // We have a `@TRANSLATION` instruction, return this
-                return { message: dictionary.value[key + '.@TRANSLATION'], placeholders }
-            }
-
-            // If placeholders is a numeric value, we transform back to an array for replacement in the main message
-            if (typeof placeholders === 'number' || typeof placeholders === 'string') {
-                placeholders = { [pluralKey]: pluralValue }
-            } else if (typeof placeholders === 'object' && placeholders[pluralKey] === undefined) {
-                placeholders = { ...placeholders, [pluralKey]: pluralValue }
-            }
-
-            // At this point, we need to go deeper and find the correct plural form to use
-            const pluralRuleKey = getPluralMessageKey(key, pluralValue)
-
-            // Only return if the plural is not null. Will happen if the message array don't follow the rules
-            if (dictionary.value[key + '.' + pluralRuleKey] !== undefined) {
-                return { message: dictionary.value[key + '.' + pluralRuleKey], placeholders }
-            }
-
-            // One last check... If we don't have a rule, but the $pluralValue
-            // as a key does exist, we might still be able to return it
-            if (dictionary.value[key + '.' + pluralValue] !== undefined) {
-                return { message: dictionary.value[key + '.' + pluralValue], placeholders }
-            }
-
-            // Return @TRANSLATION match
-            if (dictionary.value[key + '.@TRANSLATION'] !== undefined) {
-                return { message: dictionary.value[key + '.@TRANSLATION'], placeholders }
-            }
-
-            // If the message is an array, but we can't find a plural form or a "@TRANSLATION" instruction, we can't go further.
-            // We can't return the array, so we'll return the key
-            return { message: key, placeholders }
-        }
-
-        function replacePlaceholders(
-            message: string,
-            placeholders: string | number | Record<string, any>
-        ): string {
-            // If placeholders is not an object at this point, we make it an object, using `plural` as the key
-            if (typeof placeholders !== 'object') {
-                placeholders = { [defaultPluralKey]: placeholders }
-            }
-
-            // Interpolate translatable placeholders values. This allows to
-            // pre-translate placeholder which value starts with the `&` character
-            // console.debug('Looping Placeholders', placeholders)
-            for (const [name, value] of Object.entries(placeholders)) {
-                // console.debug(`> ${name}: ${value}`)
-
-                //We don't allow nested placeholders. They will return errors on the next lines
-                if (typeof value !== 'string') {
-                    continue
-                }
-
-                // We test if the placeholder value starts the "&" character.
-                // That means we need to translate that placeholder value
-                if (value.startsWith('&')) {
-                    // Remove the current placeholder from the master $placeholder
-                    // array, otherwise we end up in an infinite loop
-                    const data = Object.fromEntries(
-                        Object.entries(placeholders).filter(([k]) => k !== name)
-                    )
-
-                    // Translate placeholders value and place it in the main $placeholder array
-                    placeholders[name] = translate(value.substring(1), data)
-                }
-            }
-
-            // We check for {{&...}} strings in the resulting message.
-            // While the previous loop pre-translated placeholder value, this one
-            // pre-translate the message string vars
-            // We use some regex magic to detect them !
-            message = message.replace(/{{&(([^}]+[^a-z]))}}/g, (match, p1) => {
-                return translate(p1, placeholders)
-            })
-
-            // Now it's time to replace the remaining placeholder.
-            for (const [name, value] of Object.entries(placeholders)) {
-                const regex = new RegExp(`{{${name}}}`, 'g')
-                message = message.replace(regex, String(value))
-            }
-
-            return message
-        }
-
-        /**
-         * Return the correct plural message form to use.
-         * When multiple plural form are available for a message, this method will return the correct oen to use based on the numeric value.
-         *
-         * @param int     $pluralValue  The numeric value used to select the correct message
-         *
-         * @return int|null Returns which key from $messageArray to use
-         */
-        function getPluralMessageKey(key: string, pluralValue: number): number | null {
-            // Bypass the rules for a value of "0". Instead of returning the
-            // correct plural form (>= 1), we force return the "0" form, which
-            // can used to display "0 users" as "No users".
-            if (pluralValue === 0 && dictionary.value[key + '.0'] !== undefined) {
-                return 0
-            }
-
-            // Get the correct plural form to use depending on the language
-            const pluralForm = getPluralForm(pluralValue)
-
-            // If the dictionary contains a string for this form, return the form
-            if (dictionary.value[key + '.' + pluralForm] !== undefined) {
-                return pluralForm
-            }
-
-            // If the key we need doesn't exist, use the previous available one, including the special "0" form
-            // This is a fallback to avoid errors when the dictionary is not complete
-            for (let i = pluralForm; i >= 0; i--) {
-                if (dictionary.value[key + '.' + i] !== undefined) {
-                    return i
-                }
-            }
-
-            // If no key was found, null will be returned
-            return null
-        }
-
-        function getPluralForm(pluralValue: number, forceRule?: number): number {
-            const rule = forceRule ?? config.value.plural_rule
-
-            if (rule < 0 || rule >= Object.keys(rules).length) {
-                throw new Error(`The rule number ${rule} must be between 0 and 15`)
-            }
-
-            return rules[rule](pluralValue)
-        }
-
-        /**
-         * Return store
-         */
-        return {
-            dictionary,
-            load,
-            config,
-            identifier,
-            translate,
-            translateDate,
-            getPluralForm,
-            getDateTime
-        }
-    },
-    { persist: true }
-)