|
| 1 | +import type { Matcher } from '~/models/index.js'; |
| 2 | +import type { ParsedRoute, RouteName } from '~/models/route.model.js'; |
| 3 | +import type { IRouter } from '~/models/router.model.js'; |
| 4 | + |
| 5 | +import { Logger } from '~/utils/logger.utils.js'; |
| 6 | + |
| 7 | +export interface ActiveOptions<Name extends RouteName = RouteName> { |
| 8 | + /** |
| 9 | + * Route name to match against. |
| 10 | + * This takes precedence over the path option. |
| 11 | + */ |
| 12 | + name?: Name; |
| 13 | + /** |
| 14 | + * Route path to match against. |
| 15 | + * This is ignored if the name option is provided. |
| 16 | + */ |
| 17 | + path?: string; |
| 18 | + /** |
| 19 | + * Inline class to apply when the route is active |
| 20 | + */ |
| 21 | + class?: string; |
| 22 | + /** |
| 23 | + * Inline styles to apply when the route is active |
| 24 | + */ |
| 25 | + style?: Partial<CSSStyleDeclaration>; |
| 26 | + /** |
| 27 | + * Match the route path exactly |
| 28 | + * |
| 29 | + * @default false |
| 30 | + * @see {@link RouterOptions.strict} |
| 31 | + */ |
| 32 | + exact?: boolean; |
| 33 | + /** |
| 34 | + * Coerce the route name to lowercase before comparing. |
| 35 | + * Note: Symbols and numbers will be coerced to strings. Be sure to register your routes names accordingly. |
| 36 | + * |
| 37 | + * @default router if set, else false |
| 38 | + * @see {@link RouterOptions.caseSensitive} |
| 39 | + */ |
| 40 | + caseSensitive?: boolean; |
| 41 | +} |
| 42 | + |
| 43 | +export function ensureRouter(element: Element, router?: IRouter): router is IRouter { |
| 44 | + if (router) return true; |
| 45 | + Logger.warn('Router not found. Make sure you are using the active action within a Router context.', { element }); |
| 46 | + element.setAttribute('data-error', 'Router not found.'); |
| 47 | + return false; |
| 48 | +} |
| 49 | + |
| 50 | +export function ensurePathName(element: Element, params: { path?: string | null; name?: RouteName | null } = {}): params is { path: string; name: RouteName } { |
| 51 | + if (!params.path && !params.name) { |
| 52 | + Logger.warn('No path or name found. Make sure you are using the active action with the proper parameters.', { element, ...params }); |
| 53 | + element.setAttribute('data-error', 'No path or name found.'); |
| 54 | + return false; |
| 55 | + } |
| 56 | + element.removeAttribute('data-error'); |
| 57 | + return true; |
| 58 | +} |
| 59 | + |
| 60 | +// recursively extract route.parent.name |
| 61 | +function getParentName(route?: ParsedRoute, names: ParsedRoute['name'][] = []) { |
| 62 | + if (route?.name) names.push(route.name); |
| 63 | + if (!route?.parent) return names; |
| 64 | + return getParentName(route.parent, names); |
| 65 | +} |
| 66 | + |
| 67 | +export function doNameMatch(route?: ParsedRoute, name?: RouteName | null, { exact, caseSensitive }: { exact?: boolean; caseSensitive?: boolean } = {}): boolean { |
| 68 | + if (!name) return false; |
| 69 | + if (!route?.name) return false; |
| 70 | + const names = exact ? [route.name] : getParentName(route); |
| 71 | + if (caseSensitive) return names.includes(name); |
| 72 | + return names.map(n => String(n)?.toLowerCase()).includes(String(name)?.toLowerCase()); |
| 73 | +} |
| 74 | + |
| 75 | +export function doPathMatch(matcher?: Matcher, name?: RouteName | null, location?: string, exact?: boolean): boolean { |
| 76 | + if (name) return false; |
| 77 | + if (!matcher) return false; |
| 78 | + if (!location) return false; |
| 79 | + if (exact) return matcher.match(location, true); |
| 80 | + return matcher.match(location); |
| 81 | +} |
| 82 | + |
| 83 | +type Styles = CSSStyleDeclaration[keyof CSSStyleDeclaration]; |
| 84 | + |
| 85 | +export function getOriginalStyle(element: Element, style: Partial<CSSStyleDeclaration> = {}): Record<string, Styles> | undefined { |
| 86 | + if (!(element instanceof HTMLElement)) return; |
| 87 | + return Object.fromEntries(Object.keys(style).map(key => [key, element.style[key as keyof CSSStyleDeclaration]])); |
| 88 | +} |
| 89 | + |
| 90 | +export function activeStyles(element: Element, options?: ActiveOptions) { |
| 91 | + if (!(element instanceof HTMLElement)) return; |
| 92 | + element.setAttribute('data-active', 'true'); |
| 93 | + if (options?.class) element.classList.add(options.class); |
| 94 | + if (!options?.style) return; |
| 95 | + Object.assign(element.style, options.style); |
| 96 | +} |
| 97 | + |
| 98 | +export function restoreStyles(element: Element, original?: Record<string, Styles>, options?: ActiveOptions) { |
| 99 | + if (!(element instanceof HTMLElement)) return; |
| 100 | + element.removeAttribute('data-active'); |
| 101 | + if (options?.class) element.classList.remove(options.class); |
| 102 | + if (!options?.style) return; |
| 103 | + Object.keys(options.style).forEach(key => element.style.removeProperty(key)); |
| 104 | + Object.assign(element.style, original); |
| 105 | +} |
0 commit comments