adminforth 1.5.15-next.6 → 1.5.15

package/dist/spa/src/components/Toast.vue

@@ -0,0 +1,78 @@
+<template>
+    
+
+<div class="flex items-center w-full p-4 text-gray-500 rounded-lg shadow-lg dark:text-gray-400 dark:bg-gray-800 bg-white"
+    role="alert"
+    :class="
+        {
+            'danger': 'bg-red-100',
+        }[toast.variant]
+    "
+>
+    <div v-if="toast.variant == 'info'" class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-lightPrimary dark:text-darkPrimary bg-lightPrimaryOpacity rounded-lg dark:bg-blue-800 dark:text-blue-200">
+        <svg class="w-4 h-4"  xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 20">
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.147 15.085a7.159 7.159 0 0 1-6.189 3.307A6.713 6.713 0 0 1 3.1 15.444c-2.679-4.513.287-8.737.888-9.548A4.373 4.373 0 0 0 5 1.608c1.287.953 6.445 3.218 5.537 10.5 1.5-1.122 2.706-3.01 2.853-6.14 1.433 1.049 3.993 5.395 1.757 9.117Z"/>
+        </svg>
+        <span class="sr-only">{{ $t('Fire icon') }}</span>
+    </div>
+    <div v-else-if="toast.variant == 'danger'" class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-red-500 bg-red-100 rounded-lg dark:bg-red-800 dark:text-red-200">
+        <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+            <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 11.793a1 1 0 1 1-1.414 1.414L10 11.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L8.586 10 6.293 7.707a1 1 0 0 1 1.414-1.414L10 8.586l2.293-2.293a1 1 0 0 1 1.414 1.414L11.414 10l2.293 2.293Z"/>
+        </svg>
+        <span class="sr-only">{{ $t('Error icon') }}</span>
+    </div>
+    <div v-else-if="toast.variant == 'warning'"class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-orange-500 bg-orange-100 rounded-lg dark:bg-orange-700 dark:text-orange-200">
+        <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+            <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM10 15a1 1 0 1 1 0-2 1 1 0 0 1 0 2Zm1-4a1 1 0 0 1-2 0V6a1 1 0 0 1 2 0v5Z"/>
+        </svg>
+        <span class="sr-only">{{ $t('Warning icon') }}</span>
+    </div>
+    <div v-else class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-green-500 bg-green-100 rounded-lg dark:bg-green-800 dark:text-green-200">
+        <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+            <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z"/>
+        </svg>
+        <span class="sr-only">{{ $t('Check icon') }}</span>
+    </div>
+
+    <div class="ms-3 text-sm font-normal max-w-xs pr-2" v-if="toast.messageHtml" v-html="toast.messageHtml"></div>
+    <div class="ms-3 text-sm font-normal max-w-xs pr-2" v-else>{{toast.message}}</div>
+    <button @click="closeToast" type="button" class="ms-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex items-center justify-center h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700" >
+        <svg class="w-3 h-3"  xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
+        </svg>
+    </button>
+</div>
+
+
+</template>
+
+<script setup lang="ts">
+import { onMounted } from 'vue';
+import { useToastStore } from '@/stores/toast';
+const toastStore = useToastStore();
+const emit = defineEmits(['close']);
+const props = defineProps<{
+    toast: {
+        message?: string;
+        messageHtml?: string;
+        variant: string;
+        id: string;
+        timeout?: number|'unlimited';
+    }
+}>();
+function closeToast() {
+    emit('close');
+}
+
+onMounted(() => {
+    if (props.toast.timeout === 'unlimited') return;
+    else { 
+      setTimeout(() => {emit('close');}, (props.toast.timeout || 10) * 1e3 );
+    }
+});
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>

package/dist/spa/src/components/ValueRenderer.vue

@@ -0,0 +1,141 @@
+<template>
+  <div>
+    <span @click="(e)=>{e.stopPropagation()}" v-if="column.foreignResource">
+      <RouterLink v-if="record[column.name]" class="font-medium text-lightPrimary dark:text-darkPrimary hover:brightness-110 whitespace-nowrap"
+        :to="{ name: 'resource-show', params: { resourceId: column.foreignResource.resourceId, primaryKey: record[column.name].pk } }">
+        {{ record[column.name].label }}
+      </RouterLink>
+      <div v-else>
+        <span class="text-gray-400">-</span>
+      </div>
+    </span>
+        
+    <span v-else-if="column.type === 'boolean'">
+      <span v-if="record[column.name]" class="bg-green-100 text-green-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-green-400 border border-green-400">{{ $t('Yes') }}</span>
+      <span v-else class="bg-red-100 text-red-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-red-400 border border-red-400">{{ $t('No') }}</span>
+    </span>
+    <span v-else-if="column.enum">
+      {{ checkEmptyValues(column.enum.find(e => e.value === record[column.name])?.label || record[column.name], route.meta.type) }}
+    </span>
+    <span v-else-if="column.type === 'datetime'" class="whitespace-nowrap">
+      {{ checkEmptyValues(formatDateTime(record[column.name]), route.meta.type) }}
+    </span>
+    <span v-else-if="column.type === 'date'" class="whitespace-nowrap">
+      {{ checkEmptyValues(formatDate(record[column.name]), route.meta.type) }}
+    </span>
+    <span v-else-if="column.type === 'time'" class="whitespace-nowrap">
+      {{ checkEmptyValues(formatTime(record[column.name]), route.meta.type) }}
+    </span>
+    <span v-else-if="column.type === 'richtext'">
+      <div v-html="protectAgainstXSS(record[column.name])" class="allow-lists"></div>
+    </span>
+    <span v-else-if="column.type === 'decimal'">
+      {{ checkEmptyValues(record[column.name] && parseFloat(record[column.name]), route.meta.type) }}
+    </span>
+    <span v-else-if="column.type === 'json'">
+      <JsonViewer :value="record[column.name]" :expandDepth="column.extra?.jsonCollapsedLevel" copyable sort :theme="coreStore.theme" />
+    </span>
+    <span v-else>
+      {{ checkEmptyValues(record[column.name],route.meta.type) }}
+    </span>
+  </div>
+</template>
+
+
+<script setup lang="ts">
+
+import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc';
+import timezone from 'dayjs/plugin/timezone';
+import {checkEmptyValues} from '@/utils';
+import { useRoute, useRouter } from 'vue-router';
+import sanitizeHtml from 'sanitize-html';
+import { JsonViewer } from "vue3-json-viewer";
+import "vue3-json-viewer/dist/index.css";
+import type { AdminForthResourceColumnCommon } from '@/types/Common';
+
+import { useCoreStore } from '@/stores/core';
+
+const coreStore = useCoreStore();
+const route = useRoute();
+
+
+dayjs.extend(utc);
+dayjs.extend(timezone);
+
+const props = defineProps<{
+  column: AdminForthResourceColumnCommon,
+  record: any
+}>();
+
+
+function protectAgainstXSS(value: string) {
+  return sanitizeHtml(value, {
+    allowedTags: [
+      "address", "article", "aside", "footer", "header", "h1", "h2", "h3", "h4",
+      "h5", "h6", "hgroup", "main", "nav", "section", "blockquote", "dd", "div",
+      "dl", "dt", "figcaption", "figure", "hr", "li", "main", "ol", "p", "pre",
+      "ul", "a", "abbr", "b", "bdi", "bdo", "br", "cite", "code", "data", "dfn",
+      "em", "i", "kbd", "mark", "q", "rb", "rp", "rt", "rtc", "ruby", "s", "samp",
+      "small", "span", "strong", "sub", "sup", "time", "u", "var", "wbr", "caption",
+      "col", "colgroup", "table", "tbody", "td", "tfoot", "th", "thead", "tr", 'img'
+    ],
+    allowedAttributes: {
+      'li': [ 'data-list' ],
+      'img': [ 'src', 'srcset', 'alt', 'title', 'width', 'height', 'loading' ]
+    } 
+  });
+}
+
+
+function formatDateTime(date: string) {
+  if (!date) return '';
+  return dayjs.utc(date).local().format(`${coreStore.config?.datesFormat} ${coreStore.config?.timeFormat}` || 'YYYY-MM-DD HH:mm:ss');
+}
+
+function formatDate(date: string) {
+  if (!date) return '';
+  return dayjs.utc(date).local().format(coreStore.config?.datesFormat || 'YYYY-MM-DD');
+}
+
+function formatTime(time: string) {
+  if (!time) return '';
+  return dayjs(`0000-00-00 ${time}`).format(coreStore.config?.timeFormat || 'HH:mm:ss');
+}
+</script>
+
+<style lang="scss">
+
+.allow-lists {
+  ol {
+    list-style-type: decimal;
+    padding-left: 1.5em;
+
+    li[data-list="bullet"] {
+      list-style-type: disc;
+    }
+    li[data-list="ordered"] {
+      list-style-type: decimal;
+    }
+  }
+
+} 
+</style>
+
+<style lang="scss" >
+
+.jv-container .jv-code {
+  padding: 10px 10px;
+}
+
+.jv-container .jv-button[class] {
+  @apply text-lightPrimary;
+  @apply dark:text-darkPrimary;
+
+}
+
+.jv-container.jv-dark {
+  background: transparent;
+}
+
+</style>

package/dist/spa/src/components/icons/IconCalendar.vue

@@ -0,0 +1,5 @@
+<template>
+  <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+    <path d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z"/>
+  </svg>
+</template>

package/dist/spa/src/components/icons/IconCommunity.vue

@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
+    <path
+      d="M15 4a1 1 0 1 0 0 2V4zm0 11v-1a1 1 0 0 0-1 1h1zm0 4l-.707.707A1 1 0 0 0 16 19h-1zm-4-4l.707-.707A1 1 0 0 0 11 14v1zm-4.707-1.293a1 1 0 0 0-1.414 1.414l1.414-1.414zm-.707.707l-.707-.707.707.707zM9 11v-1a1 1 0 0 0-.707.293L9 11zm-4 0h1a1 1 0 0 0-1-1v1zm0 4H4a1 1 0 0 0 1.707.707L5 15zm10-9h2V4h-2v2zm2 0a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3v2zm1 1v6h2V7h-2zm0 6a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2zm-1 1h-2v2h2v-2zm-3 1v4h2v-4h-2zm1.707 3.293l-4-4-1.414 1.414 4 4 1.414-1.414zM11 14H7v2h4v-2zm-4 0c-.276 0-.525-.111-.707-.293l-1.414 1.414C5.42 15.663 6.172 16 7 16v-2zm-.707 1.121l3.414-3.414-1.414-1.414-3.414 3.414 1.414 1.414zM9 12h4v-2H9v2zm4 0a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2zm3-3V3h-2v6h2zm0-6a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2zm-3-3H3v2h10V0zM3 0a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1V0zM0 3v6h2V3H0zm0 6a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1H0zm3 3h2v-2H3v2zm1-1v4h2v-4H4zm1.707 4.707l.586-.586-1.414-1.414-.586.586 1.414 1.414z"
+    />
+  </svg>
+</template>

package/dist/spa/src/components/icons/IconDocumentation.vue

@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" fill="currentColor">
+    <path
+      d="M11 2.253a1 1 0 1 0-2 0h2zm-2 13a1 1 0 1 0 2 0H9zm.447-12.167a1 1 0 1 0 1.107-1.666L9.447 3.086zM1 2.253L.447 1.42A1 1 0 0 0 0 2.253h1zm0 13H0a1 1 0 0 0 1.553.833L1 15.253zm8.447.833a1 1 0 1 0 1.107-1.666l-1.107 1.666zm0-14.666a1 1 0 1 0 1.107 1.666L9.447 1.42zM19 2.253h1a1 1 0 0 0-.447-.833L19 2.253zm0 13l-.553.833A1 1 0 0 0 20 15.253h-1zm-9.553-.833a1 1 0 1 0 1.107 1.666L9.447 14.42zM9 2.253v13h2v-13H9zm1.553-.833C9.203.523 7.42 0 5.5 0v2c1.572 0 2.961.431 3.947 1.086l1.107-1.666zM5.5 0C3.58 0 1.797.523.447 1.42l1.107 1.666C2.539 2.431 3.928 2 5.5 2V0zM0 2.253v13h2v-13H0zm1.553 13.833C2.539 15.431 3.928 15 5.5 15v-2c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM5.5 15c1.572 0 2.961.431 3.947 1.086l1.107-1.666C9.203 13.523 7.42 13 5.5 13v2zm5.053-11.914C11.539 2.431 12.928 2 14.5 2V0c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM14.5 2c1.573 0 2.961.431 3.947 1.086l1.107-1.666C18.203.523 16.421 0 14.5 0v2zm3.5.253v13h2v-13h-2zm1.553 12.167C18.203 13.523 16.421 13 14.5 13v2c1.573 0 2.961.431 3.947 1.086l1.107-1.666zM14.5 13c-1.92 0-3.703.523-5.053 1.42l1.107 1.666C11.539 15.431 12.928 15 14.5 15v-2z"
+    />
+  </svg>
+</template>

package/dist/spa/src/components/icons/IconEcosystem.vue

@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" fill="currentColor">
+    <path
+      d="M11.447 8.894a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm0 1.789a1 1 0 1 0 .894-1.789l-.894 1.789zM7.447 7.106a1 1 0 1 0-.894 1.789l.894-1.789zM10 9a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0H8zm9.447-5.606a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm2 .789a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zM18 5a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0h-2zm-5.447-4.606a1 1 0 1 0 .894-1.789l-.894 1.789zM9 1l.447-.894a1 1 0 0 0-.894 0L9 1zm-2.447.106a1 1 0 1 0 .894 1.789l-.894-1.789zm-6 3a1 1 0 1 0 .894 1.789L.553 4.106zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zm-2-.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 2.789a1 1 0 1 0 .894-1.789l-.894 1.789zM2 5a1 1 0 1 0-2 0h2zM0 7.5a1 1 0 1 0 2 0H0zm8.553 12.394a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 1a1 1 0 1 0 .894 1.789l-.894-1.789zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zM8 19a1 1 0 1 0 2 0H8zm2-2.5a1 1 0 1 0-2 0h2zm-7.447.394a1 1 0 1 0 .894-1.789l-.894 1.789zM1 15H0a1 1 0 0 0 .553.894L1 15zm1-2.5a1 1 0 1 0-2 0h2zm12.553 2.606a1 1 0 1 0 .894 1.789l-.894-1.789zM17 15l.447.894A1 1 0 0 0 18 15h-1zm1-2.5a1 1 0 1 0-2 0h2zm-7.447-5.394l-2 1 .894 1.789 2-1-.894-1.789zm-1.106 1l-2-1-.894 1.789 2 1 .894-1.789zM8 9v2.5h2V9H8zm8.553-4.894l-2 1 .894 1.789 2-1-.894-1.789zm.894 0l-2-1-.894 1.789 2 1 .894-1.789zM16 5v2.5h2V5h-2zm-4.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zm-2.894-1l-2 1 .894 1.789 2-1L8.553.106zM1.447 5.894l2-1-.894-1.789-2 1 .894 1.789zm-.894 0l2 1 .894-1.789-2-1-.894 1.789zM0 5v2.5h2V5H0zm9.447 13.106l-2-1-.894 1.789 2 1 .894-1.789zm0 1.789l2-1-.894-1.789-2 1 .894 1.789zM10 19v-2.5H8V19h2zm-6.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zM2 15v-2.5H0V15h2zm13.447 1.894l2-1-.894-1.789-2 1 .894 1.789zM18 15v-2.5h-2V15h2z"
+    />
+  </svg>
+</template>

package/dist/spa/src/components/icons/IconSupport.vue

@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
+    <path
+      d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.666.105 5.5 5.5 0 0 0-.114 7.665L10 18.78l8.39-8.4a5.5 5.5 0 0 0-.114-7.665 5.5 5.5 0 0 0-7.666-.105l-.61.61z"
+    />
+  </svg>
+</template>

package/dist/spa/src/components/icons/IconTime.vue

@@ -0,0 +1,5 @@
+<template>
+  <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
+    <path fill-rule="evenodd" d="M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Zm11-4a1 1 0 1 0-2 0v4a1 1 0 0 0 .293.707l3 3a1 1 0 0 0 1.414-1.414L13 11.586V8Z" clip-rule="evenodd"></path>
+  </svg>
+</template>

package/dist/spa/src/components/icons/IconTooling.vue

@@ -0,0 +1,19 @@
+<!-- This icon is from <https://github.com/Templarian/MaterialDesign>, distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license-->
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    aria-hidden="true"
+    role="img"
+    class="iconify iconify--mdi"
+    width="24"
+    height="24"
+    preserveAspectRatio="xMidYMid meet"
+    viewBox="0 0 24 24"
+  >
+    <path
+      d="M20 18v-4h-3v1h-2v-1H9v1H7v-1H4v4h16M6.33 8l-1.74 4H7v-1h2v1h6v-1h2v1h2.41l-1.74-4H6.33M9 5v1h6V5H9m12.84 7.61c.1.22.16.48.16.8V18c0 .53-.21 1-.6 1.41c-.4.4-.85.59-1.4.59H4c-.55 0-1-.19-1.4-.59C2.21 19 2 18.53 2 18v-4.59c0-.32.06-.58.16-.8L4.5 7.22C4.84 6.41 5.45 6 6.33 6H7V5c0-.55.18-1 .57-1.41C7.96 3.2 8.44 3 9 3h6c.56 0 1.04.2 1.43.59c.39.41.57.86.57 1.41v1h.67c.88 0 1.49.41 1.83 1.22l2.34 5.39z"
+      fill="currentColor"
+    ></path>
+  </svg>
+</template>

package/dist/spa/src/composables/useFrontendApi.ts

@@ -0,0 +1,28 @@
+import adminforth from '@/adminforth';
+
+export function showSuccesTost(message: string) {
+  adminforth.alert({ message, variant: 'success' });  
+  return message;
+}
+
+export function showWarningTost(message: string) {
+  adminforth.alert({ message, variant: 'warning' });  
+  return message;
+}
+
+export function showErrorTost(message: string, timeout?: number) {
+  adminforth.alert({ message, variant: 'danger', timeout: timeout || 30});  
+  return message;
+}
+
+
+const useFrontendApi = () => {
+    return {
+        showSuccesTost,
+        showWarningTost,
+        showErrorTost
+    }
+}
+
+
+export default useFrontendApi;

package/dist/spa/src/i18n.ts

@@ -0,0 +1,54 @@
+import { createI18n } from 'vue-i18n';
+import { createApp } from 'vue';
+
+
+// taken from here https://vue-i18n.intlify.dev/guide/essentials/pluralization.html#custom-pluralization
+function slavicPluralRule(choice, choicesLength, orgRule) {
+  if (choice === 0) {
+    return 0
+  }
+
+  const teen = choice > 10 && choice < 20
+  const endsWithOne = choice % 10 === 1
+
+  if (!teen && endsWithOne) {
+    return 1
+  }
+  if (!teen && choice % 10 >= 2 && choice % 10 <= 4) {
+    return 2
+  }
+
+  return choicesLength < 4 ? 2 : 3
+}
+
+export function initI18n(app: ReturnType<typeof createApp>) {
+  const i18n = createI18n({
+    legacy: false,
+
+    missingWarn: false,
+    fallbackWarn: false,
+
+    pluralRules: {
+      'uk': slavicPluralRule,
+      'bg': slavicPluralRule,
+      'cs': slavicPluralRule,
+      'hr': slavicPluralRule,
+      'mk': slavicPluralRule,
+      'pl': slavicPluralRule,
+      'sk': slavicPluralRule,
+      'sl': slavicPluralRule,
+      'sr': slavicPluralRule,
+      'be': slavicPluralRule,
+      'ru': slavicPluralRule,
+    },
+
+    missing: (locale, key) => {
+      // very very dirty hack to make work $t("a {key} b", { key: "c" }) as "a c b" when translation is missing
+      // e.g. relevant for "Showing {from} to {to} of {total} entries" on list page
+      return key + ' ';
+    },
+  });
+
+  app.use(i18n);
+  return i18n
+}

package/dist/spa/src/index.scss

@@ -0,0 +1,34 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+
+// @layer base {
+//   /* width */
+//   ::-webkit-scrollbar {
+//     @apply w-2 p-2
+//   }
+  
+//   /* Track */
+//   ::-webkit-scrollbar-track {
+//     @apply bg-inherit
+//   }
+  
+//   /* Handle */
+//   ::-webkit-scrollbar-thumb {
+//     @apply bg-gray-200 dark:bg-gray-600 rounded-xl
+//   }
+  
+//   /* Handle on hover */
+//   ::-webkit-scrollbar-thumb:hover {
+//     @apply bg-gray-700
+//   }
+// }
+
+body {
+  scrollbar-gutter: stable;
+}
+
+*{
+  -moz-user-select: none;
+}

package/dist/spa/src/main.ts

@@ -0,0 +1,22 @@
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+/* IMPORTANT:ADMINFORTH IMPORTS */
+
+
+import App from './App.vue'
+import router from './router'
+import { initI18n } from './i18n'
+
+export const app: ReturnType<typeof createApp> = createApp(App)
+/* IMPORTANT:ADMINFORTH COMPONENT REGISTRATIONS */
+
+app.use(createPinia())
+app.use(router)
+
+// get access to i18n instance outside components
+window.i18n = initI18n(app);
+
+
+/* IMPORTANT:ADMINFORTH CUSTOM USES */
+
+app.mount('#app')

package/dist/spa/src/renderers/CompactField.vue

@@ -0,0 +1,46 @@
+<template>
+  <Tooltip>
+    <span class="flex items-center">
+      {{ visualValue }} <IconFileCopyAltSolid @click.stop="copyToCB" class="w-5 h-5 text-lightPrimary dark:text-darkPrimary" v-if="visualValue"/>
+    </span>
+    <template #tooltip v-if="visualValue">
+      {{ props.record[props.column.name] }}
+    </template>
+  </Tooltip>
+  
+</template>
+
+<script setup lang="ts">
+
+import { computed, ref, onMounted, nextTick } from 'vue';
+import { IconFileCopyAltSolid } from '@iconify-prerendered/vue-flowbite';
+import Tooltip from '@/afcl/Tooltip.vue';
+import adminforth from '@/adminforth';
+
+const visualValue = computed(() => {
+  // if lenght is more then 8, show only first 4 and last 4 characters, ... in the middle
+  const val = props.record[props.column.name];
+  if (val && val.length > 8) {
+    return `${val.substr(0, 4)}...${val.substr(val.length - 4)}`;
+  }
+  return val;
+});
+
+const props = defineProps(['column', 'record', 'meta', 'resource', 'adminUser']);
+
+const id = ref();
+
+function copyToCB() {
+  navigator.clipboard.writeText(props.record[props.column.name]);
+  adminforth.alert({
+    message: 'ID copied to clipboard',
+    variant: 'success',
+  })
+}
+
+onMounted(async () => {
+  id.value = Math.random().toString(36).substring(7);
+  await nextTick();
+});
+
+</script>

package/dist/spa/src/renderers/CompactUUID.vue

@@ -0,0 +1,46 @@
+<template>
+  <Tooltip>
+    <span class="flex items-center">
+      {{ visualValue }} <IconFileCopyAltSolid @click.stop="copyToCB" class="w-5 h-5 text-lightPrimary dark:text-darkPrimary" v-if="visualValue"/>
+    </span>
+    <template #tooltip v-if="visualValue">
+      {{ props.record[props.column.name] }}
+    </template>
+  </Tooltip>
+  
+</template>
+
+<script setup lang="ts">
+
+import { computed, ref, onMounted, nextTick } from 'vue';
+import { IconFileCopyAltSolid } from '@iconify-prerendered/vue-flowbite';
+import Tooltip from '@/afcl/Tooltip.vue';
+import adminforth from '@/adminforth';
+
+const visualValue = computed(() => {
+  // if lenght is more then 8, show only first 4 and last 4 characters, ... in the middle
+  const val = props.record[props.column.name];
+  if (val && val.length > 8) {
+    return `${val.substr(0, 4)}...${val.substr(val.length - 4)}`;
+  }
+  return val;
+});
+
+const props = defineProps(['column', 'record', 'meta', 'resource', 'adminUser']);
+
+const id = ref();
+
+function copyToCB() {
+  navigator.clipboard.writeText(props.record[props.column.name]);
+  adminforth.alert({
+    message: 'ID copied to clipboard',
+    variant: 'success',
+  })
+}
+
+onMounted(async () => {
+  id.value = Math.random().toString(36).substring(7);
+  await nextTick();
+});
+
+</script>

package/dist/spa/src/renderers/CountryFlag.vue

@@ -0,0 +1,65 @@
+<template>
+    <Tooltip>
+      <span class="flex items-center">
+        <span 
+          :class="{[`fi-${countryIsoLow}`]: true, 'flag-icon': countryName}"
+        ></span>
+        <span v-if="meta.showCountryName" class="ms-2">{{ countryName }}</span>
+      </span>
+      
+      <template v-if="shouldShowTooltip" #tooltip>
+        {{ countryName }}
+      </template>
+    </Tooltip>
+</template>
+
+<script setup>  
+
+import { computed, ref, onMounted } from 'vue';
+import 'flag-icons/css/flag-icons.min.css';
+import isoCountries from 'i18n-iso-countries';
+import enLocal from 'i18n-iso-countries/langs/en.json';
+import Tooltip from '@/afcl/Tooltip.vue';
+
+isoCountries.registerLocale(enLocal);
+
+const props = defineProps(['column', 'record', 'meta', 'resource', 'adminUser']);
+
+const id = ref();
+
+const shouldShowTooltip = computed(() => {
+  return !props.meta.showCountryName && countryName.value;
+});
+
+onMounted(async () => {
+  id.value = Math.random().toString(36).substring(7);
+});
+
+const countryIsoLow = computed(() => {
+  return props.record[props.column.name]?.toLowerCase();
+});
+
+const countryName = computed(() => {
+  if (!countryIsoLow.value) {
+    return '';
+  }
+  return isoCountries.getName(countryIsoLow.value, 'en');
+});
+
+</script>
+
+<style scoped lang="scss">
+
+.flag-icon {
+  width: 1.6rem;
+  height: 1.2rem;
+  flex-shrink: 0;
+
+  // border radius  for background
+  border-radius: 2px;
+  box-shadow: inset -0.3px -0.3px 0.3px 0px rgba(0 0 0 / 0.2), 
+    inset 0.3px 0.3px 0.3px 0px rgba(255 255 255 / 0.2),
+    0px 0px 3px #00000030;
+}
+
+</style>

package/dist/spa/src/renderers/HumanNumber.vue

@@ -0,0 +1,58 @@
+<template>
+    <Tooltip>
+      {{ formattedValue }} 
+      <template #tooltip v-if="formattedValue">
+        {{ formattedTooltipValue }}
+      </template>
+    </Tooltip>
+  </template>
+  
+  <script setup>
+  import { computed, ref, onMounted, nextTick } from 'vue';
+  import Tooltip from '@/afcl/Tooltip.vue';
+  
+  const props = defineProps(['column', 'record', 'meta', 'resource', 'adminUser']);
+
+  const id = ref();
+  const userLocale = ref(navigator.language || 'en-US'); 
+
+  const formattedValue = computed(() => {
+    const val = props.record[props.column.name];
+    if (typeof val === 'number') {
+      return formatNumber(val, userLocale.value);
+    }
+    return val;
+  });
+  
+  const formattedTooltipValue = computed(() => {
+    const val = props.record[props.column.name];
+    if (typeof val === 'number') {
+      return formatNumberUsingIntl(val, userLocale.value); 
+    }
+    return val;
+  });
+
+  function formatNumber(num, locale) {
+  if (typeof num !== 'number') {
+    return num.toString(); 
+  }
+
+  if (num >= 1_000_000) {
+    return `${(num / 1_000_000).toFixed(1).replace(/\.0$/, '')}M`;
+  } else if (num >= 1_000) {
+    return `${(num / 1_000).toFixed(1).replace(/\.0$/, '')}k`;
+  }
+
+  // If it's less than 1000, format using locale
+  return new Intl.NumberFormat(locale).format(num);
+}
+
+  function formatNumberUsingIntl(num, locale) {
+      return new Intl.NumberFormat(locale).format(num);
+  }
+
+  onMounted(async () => {
+    id.value = Math.random().toString(36).substring(7);
+    await nextTick();
+  });
+</script>