FF Admin
Repositories
10
 Projects Packages
9
 Code

@ff-admin/core (1.0.0)

Published 2026-02-24 15:42:55 +00:00 by jkeffects in FF-Admin/ff-admin-core

Installation

@ff-admin:registry=
npm install @ff-admin/core@1.0.0
"@ff-admin/core": "1.0.0"

About this package

ff-admin-core

Basis-UI-Funktionalität für ff-admin Anwendungen als wiederverwendbares npm-Package.

Package Content

📋 Inhaltsverzeichnis

Übersicht

@ff-admin/core stellt Basis-UI-Komponenten, Layouts, Stores, Router, Enums und Helper für FF-Admin Anwendungen bereit. Das Package sorgt für eine konsistente UI-Struktur und wiederverwendbare Funktionalität in allen Anwendungen.

Was übernimmt das Package?

🖥️ Basis-UI-Inhalte

  • Wiederverwendbare UI-Komponenten (z.B. Layouts, Tabs, Modals, Icons, Progress Bars)
  • Stores für globale State-Verwaltung (Pinia)
  • Router-Konfiguration und Guards
  • Enum-Definitionen für Permissions, Module, Sections etc.
  • Helper-Funktionen für UI und Kommunikation
  • Socket.IO Client-Integration
  • PWA-Unterstützung
  • Konsistente Styles und globale CSS

Das Package stellt die Basis für alle FF-Admin Anwendungen bereit und sorgt für ein einheitliches UI und Verhalten.

Installation

npm install @ff-admin/core

Peer Dependencies

Das Package benötigt folgende Peer Dependencies:

  • vue >= 3.0.0
  • pinia >= 2.0.0
  • vue-router >= 4.0.0

Verwendung & Erweiterung

Das Package wird typischerweise in den zentralen Dateien der Anwendung (z.B. core-setup.ts, main.ts, router/index.ts) eingebunden und konfiguriert. Die Erweiterung erfolgt über TypeScript-Interfaces, um projektspezifische Funktionalität und Enums zu ergänzen.

Einbindung und Initialisierung

  • Importiere das Package und initialisiere zentrale Services (z.B. HTTP, Socket, Konfigurationswerte).
  • Binde globale Komponenten, Stores und Router ein.
  • Konfiguriere Namespaces, Enums und weitere projektspezifische Typen über Interface-Erweiterungen.

Beispielhafter Ablauf (vereinfacht):

// Importiere das Package und zentrale Services
import "@ff-admin/core";
import { configureSocketNamespace, HTTPManager, NavigationConfigVals, PackageConfigVals, SocketManager } from "@ff-admin/core";

// (Optional) Erweiterung von Typen für projektspezifische Enums und Namespaces
declare module "@ff-admin/core" {
  interface PermissionSectionMap {
    // Eigene Berechtigungs-Section hinzufügen
    mySection: void;
  }
  interface PermissionModuleMap {
    // Eigene Berechtigungs-Module hinzufügen
    myModule: void;
    anotherModule: void;
  }
  interface SettingTopicMap {
    myApp: void;
  }
  interface SettingValueMapping {
    "myApp.apiKey": string;
    "myApp.timeout": number;
    "myApp.baseUrl": string;
  }
  interface ModuleSettingTopicMap {
    myModule: void;
  }
  interface ModuleSettingValueMapping {
    "myModule.setting1": string;
    "myModule.setting2": number;
    "myModule.enabled": boolean;
  }
  interface SocketNamespaceMap {
    myCustomNamespace: "/custom";
    anotherNamespace: "/another";
  }
}

// Konfigurationswerte setzen
PackageConfigVals.serverAddress = "...";
PackageConfigVals.devMode = true;
PackageConfigVals.clientVersion = ""; // Alternativ package JSON auslesen

// Initialisierung und Konfiguration
HTTPManager.init();
SocketManager.init();
configureSocketNamespace({
  myCustomNamespace: "/custom",
  anotherNamespace: "/another",
});

// Angabe der Navigationsstruktur
NavigationConfigVals.defaultActiveNavigation = "configuration"
NavigationConfigVals.topLevel = [/*...*/]
// direktes setzen der Struktur
NavigationConfigVals.navigation = {/*...*/}
// oder einzelne Keys setzen
NavigationConfigVals.setNavigationKey("configuration", {/*...*/})

Werte wie im Backend müssen nur für den SocketNamespace definiert werden. Alle anderen Konfigurationswerte werden über den Server bezogen.

Integration in die App

  • Binde das Package in die Hauptdatei deiner App ein (z.B. in main.ts).
  • Verwende die bereitgestellten Komponenten, Stores, Router und Helper in deiner Anwendung.
  • Nutze die Basisrouten und Guards aus dem Package und ergänze sie bei Bedarf um eigene Routen.

Beispiel (allgemein):

import "./core-setup";
import { createApp } from "vue";
import { createPinia } from "pinia";
import router from "./router";
import App from "./App.vue";

const app = createApp(App);
app.use(createPinia());
app.use(router);
// Weitere globale Properties oder Plugins
PackageConfigVals.router = router;
app.mount("#app");

Lizenz

AGPL-3.0-only

Author

JK Effects

Repository

https://code.jk-effects.cloud/FF-Admin/ff-admin-core.git

Dependencies

Dependencies

ID Version
@headlessui/vue ^1.7.23
@heroicons/vue ^2.2.0
@simplewebauthn/browser ^13.2.2
@tailwindcss/vite ^4.2.0
@vuepic/vue-datepicker ^12.1.0
@vueuse/core ^14.2.1
axios ^1.13.5
event-source-polyfill ^1.0.31
jwt-decode ^4.0.0
lodash.clonedeep ^4.5.0
lodash.difference ^4.5.0
lodash.differencewith ^4.5.0
lodash.isequal ^4.5.0
ms ^2.1.3
qrcode ^1.5.4
qs ^6.15.0
socket.io-client ^4.8.3
ua-parser-js ^2.0.9
uuid ^13.0.0
vue-qrcode-reader ^5.7.3

Development dependencies

ID Version
@rushstack/eslint-patch ^1.16.1
@tailwindcss/postcss ^4.2.0
@tsconfig/node20 ^20.1.9
@types/eslint ~9.6.1
@types/event-source-polyfill ^1.0.5
@types/lodash.clonedeep ^4.5.9
@types/lodash.difference ^4.5.9
@types/lodash.differencewith ^4.5.9
@types/lodash.isequal ^4.5.8
@types/ms ^2.1.0
@types/node ^25.3.0
@types/nprogress ^0.2.3
@types/qrcode ^1.5.6
@types/qs ^6.14.0
@types/uuid ^11.0.0
@vitejs/plugin-vue ^6.0.4
@vue/eslint-config-typescript ^14.7.0
@vue/tsconfig ^0.8.1
eslint ^10.0.1
eslint-plugin-vue ^10.8.0
npm-run-all2 ^8.0.4
tailwindcss ^4.2.0
typescript ^5.9.3
vite ^7.3.1
vite-plugin-dts ^4.5.4
vite-plugin-pwa ^1.2.0
vue-tsc ^3.2.5

Peer dependencies

ID Version
nprogress >=0.2.0
pinia >=3.0.4
quill ^2.0.3
quill-cursors ^4.0.4
vue >=3.5.27
vue-router >=5.0.2

Keywords

Feuerwehr ff-admin
Details
npm
FF-Admin/ff-admin-core
2026-02-24 15:42:55 +00:00
4
JK Effects
Project website
AGPL-3.0-only
763 KiB
Assets (1)
core-1.0.0.tgz 763 KiB
Versions (3) View all
1.0.2 2026-02-27
1.0.1 2026-02-25
1.0.0 2026-02-24
Issues