Merge branch 'next' of github.com:devforth/adminforth into feature/AdminForth/1137/lets-remove-heavy_debug-and-in

Author: yaroslav8765

adminforth/basePlugin.ts

@@ -38,6 +38,10 @@ export default class AdminForthPlugin implements IAdminForthPlugin {
     return 'non-uniquely-identified';
   }
 
+  shouldHaveSingleInstancePerWholeApp(): boolean {
+    return true;
+  }
+
   modifyResourceConfig(adminforth: IAdminForth, resourceConfig: AdminForthResource, allPluginInstances?: {pi: AdminForthPlugin, resource: AdminForthResource}[]) {
     this.resourceConfig = resourceConfig;
     const uniqueness = this.instanceUniqueRepresentation(this.pluginOptions);

adminforth/commands/createCustomComponent/templates/customCrud/afterBreadcrumbs.vue.hbs

@@ -13,11 +13,13 @@
 <script setup lang="ts">
 import { onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
-import adminforth from '@/adminforth';
+import { useAdminforth } from '@/adminforth';
 import { AdminForthResourceCommon, AdminUser } from "@/types/Common";
 
 const { t } = useI18n();
 
+const { alert } = useAdminforth();
+
 const props = defineProps<{
   record: any
   resource: AdminForthResourceCommon
@@ -30,7 +32,7 @@ onMounted(() => {
 });
 
 function handleClick() {
-  adminforth.alert({
+  alert({
     message: t('Confirmed'),
     variant: 'success',
   });

adminforth/commands/createCustomComponent/templates/customCrud/beforeActionButtons.vue.hbs

@@ -13,9 +13,10 @@
 <script setup lang="ts">
 import { onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
-import adminforth from '@/adminforth';
+import { useAdminforth } from '@/adminforth';
 import { AdminForthResourceCommon, AdminUser } from "@/types/Common";
 
+const { alert } = useAdminforth();
 const { t } = useI18n();
 
 const props = defineProps<{
@@ -30,7 +31,7 @@ onMounted(() => {
 });
 
 function handleClick() {
-  adminforth.alert({
+  alert({
     message: t('Confirmed'),
     variant: 'success',
   });

adminforth/commands/createCustomComponent/templates/customCrud/beforeBreadcrumbs.vue.hbs

@@ -13,11 +13,13 @@
 <script setup lang="ts">
 import { onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
-import adminforth from '@/adminforth';
+import { useAdminforth } from '@/adminforth';
 import { AdminForthResourceCommon, AdminUser } from "@/types/Common";
 
 const { t } = useI18n();
 
+const { alert } = useAdminforth();
+
 const props = defineProps<{
   record: any
   resource: AdminForthResourceCommon
@@ -30,7 +32,7 @@ onMounted(() => {
 });
 
 function handleClick() {
-  adminforth.alert({
+  alert({
     message: t('Confirmed'),
     variant: 'success',
   });

adminforth/commands/createCustomComponent/templates/customCrud/bottom.vue.hbs

@@ -13,11 +13,13 @@
 <script setup lang="ts">
 import { onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
-import adminforth from '@/adminforth';
+import { useAdminforth } from '@/adminforth';
 import { AdminForthResourceCommon, AdminUser } from "@/types/Common";
 
 const { t } = useI18n();
 
+const { alert } = useAdminforth();
+
 const props = defineProps<{
   record: any
   resource: AdminForthResourceCommon
@@ -30,7 +32,7 @@ onMounted(() => {
 });
 
 function handleClick() {
-  adminforth.alert({
+  alert({
     message: t('Confirmed'),
     variant: 'success',
   });

adminforth/commands/createCustomComponent/templates/customCrud/threeDotsDropdownItems.vue.hbs

@@ -12,12 +12,14 @@
 
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n';
-import adminforth from '@/adminforth';
+import { useAdminforth} from '@/adminforth';
 import { onMounted } from 'vue';
 import { AdminForthResourceCommon, AdminUser } from "@/types/Common";
 
 const { t } = useI18n();
 
+const { alert } = useAdminforth();
+
 const props = defineProps<{
   record: any
   resource: AdminForthResourceCommon
@@ -29,7 +31,7 @@ const menuItems = [
   {
     label: 'Show Success Alert',
     action: () => {
-      adminforth.alert({
+      alert({
         message: t('Success Alert'),
         variant: 'success',
       });

adminforth/commands/createPlugin/templates/index.ts.hbs

@@ -27,6 +27,10 @@ export default class {{pluginName}} extends AdminForthPlugin {
     return `single`;
   }
 
+  shouldHaveSingleInstancePerWholeApp(): boolean {
+    return false;
+  }
+
   setupEndpoints(server: IHttpServer) {
     server.endpoint({
       method: 'POST',

adminforth/documentation/docs/tutorial/03-Customization/06-customPages.md

@@ -182,14 +182,16 @@ import { ref, type Ref, onMounted, computed } from 'vue';
 import dayjs from 'dayjs';
 import { callApi } from '@/utils';
 import { useI18n } from 'vue-i18n';
-import adminforth from '@/adminforth';
+import { useAdminforth } from '@/adminforth';
 import { AreaChart, BarChart, PieChart } from '@/afcl';
 
 const data: Ref<{listedVsUnlistedPriceByDays: any, listedVsUnlistedByDays: any, 
   apartsByDays: any, apartsCountsByRooms: any, topCountries: any, totalAparts: any} | null> = ref(null);
 
 const { t } = useI18n();
 
+const { alert } = useAdminforth();
+
 const COLORS = ["#4E79A7", "#F28E2B", "#E15759", "#76B7B2", "#59A14F"]
 
 const apartsCountsByDaysChart = computed(() => {
@@ -246,7 +248,7 @@ onMounted(async () => {
   try {
     data.value = await callApi({path: '/api/dashboard/', method: 'GET'});
   } catch (error) {
-    adminforth.alert({
+    alert({
       message: t(`Error fetching data: {message}`, { message: error.message }),
       variant: 'danger',
     });

adminforth/documentation/docs/tutorial/03-Customization/07-alert.md

@@ -12,9 +12,11 @@ AdminForth has very simple [frontend API](/docs/api/FrontendAPI/interfaces/Front
 To show an alert use `adminforth.alert` method:
 
 ```ts
-import adminforth from '@/adminforth';
+import { useAdminforth } from '@/adminforth';
 
-adminforth.alert({message: 'Hello world', variant: 'success'})
+const { alert } = useAdminforth();
+
+alert({message: 'Hello world', variant: 'success'})
 ```
 
 Next variants are supported:
@@ -62,9 +64,11 @@ Here's how the alert looks now:
 To show a confirmation dialog use `adminforth.confirm` method:
 
 ```ts
-import adminforth from '@/adminforth';
+import { useAdminforth } from '@/adminforth';
+
+const { confirm } = useAdminforth();
 
-const isConfirmed = await adminforth.confirm({message: 'Are you sure?', yes: 'Yes', no: 'No'})
+const isConfirmed = await confirm({message: 'Are you sure?', yes: 'Yes', no: 'No'})
 ```
 
 ## Usage example
@@ -88,26 +92,28 @@ Create a Vue component in the custom directory of your project, e.g. `Alerts.vue
     </div>
 </template>
 <script setup>
-import adminforth from '@/adminforth';
+import { useAdminforth } from '@/adminforth';
 import { Button } from '@/afcl'
 import { useI18n } from 'vue-i18n';
 
 const { t } = useI18n();
 
+const { alert, confirm } = useAdminforth();
+
 function successAlert(message) {
-    adminforth.alert({message, variant: 'success'})
+    alert({message, variant: 'success'})
 };
 
 function warningAlert(message) {
-    adminforth.alert({message, variant: 'warning'})
+    alert({message, variant: 'warning'})
 };
 
 async function doConfirm() {
-    const isConfirmed = await adminforth.confirm({message: t('Are you sure?'), yes: t('Yes'), no: t('No')})
+    const isConfirmed = await confirm({message: t('Are you sure?'), yes: t('Yes'), no: t('No')})
     if (isConfirmed){
-        adminforth.alert({message: t('Confirmed'), variant: 'success'})
+        alert({message: t('Confirmed'), variant: 'success'})
     } else {
-        adminforth.alert({message: t('Not confirmed'), variant: 'warning'})
+        alert({message: t('Not confirmed'), variant: 'warning'})
     }
 }
 </script>