adminforth 1.3.55-next.0 → 1.3.55

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">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">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 === 'json'">
+      <JsonViewer :value="record[column.name]" copyable sort :theme="theme" />
+    </span>
+    <span v-else>
+      {{ checkEmptyValues(record[column.name],route.meta.type) }}
+    </span>
+  </div>
+</template>
+
+
+<script setup>
+
+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 { useCoreStore } from '@/stores/core';
+import { computed } from 'vue';
+
+const coreStore = useCoreStore();
+const route = useRoute();
+
+const theme = computed(() => {
+  return window.localStorage.getItem('af__theme') || 'light';
+});
+
+dayjs.extend(utc);
+dayjs.extend(timezone);
+
+const props = defineProps({
+  column: Object,
+  record: Object
+});
+
+function protectAgainstXSS(value) {
+  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) {
+  if (!date) return '';
+  return dayjs.utc(date).local().format(`${coreStore.config?.datesFormat} ${coreStore.config?.timeFormat}` || 'YYYY-MM-DD HH:mm:ss');
+}
+
+function formatDate(date) {
+  if (!date) return '';
+  return dayjs.utc(date).local().format(coreStore.config?.datesFormat || 'YYYY-MM-DD');
+}
+
+function formatTime(time) {
+  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,26 @@
+export function showSuccesTost(message: string) {
+  window.adminforth.alert({ message, variant: 'success' });  
+  return message;
+}
+
+export function showWarningTost(message: string) {
+  window.adminforth.alert({ message, variant: 'warning' });  
+  return message;
+}
+
+export function showErrorTost(message: string, timeout?: number) {
+  window.adminforth.alert({ message, variant: 'danger', timeout: timeout || 30});  
+  return message;
+}
+
+
+const useFrontendApi = () => {
+    return {
+        showSuccesTost,
+        showWarningTost,
+        showErrorTost
+    }
+}
+
+
+export default useFrontendApi;

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

@@ -0,0 +1,131 @@
+import type { FrontendAPIInterface, ConfirmParams, AlertParams, } from '../types/FrontendAPI';
+import type { AdminForthFilterOperators } from '@/types/AdminForthConfig';
+import { useToastStore } from '../stores/toast';
+import { useModalStore } from '../stores/modal';
+import { useCoreStore } from '@/stores/core';
+import { useFiltersStore } from '@/stores/filters';
+import router from '@/router'
+import type { AdminForthResourceColumn } from '@/types/AdminForthConfig';
+
+ type FilterParams = {
+  /**
+   * Field of resource to filter
+   */
+  field: string;
+  /**
+   * Operator of filter
+   */
+  operator: AdminForthFilterOperators;
+  /**
+   * Value of filter
+   */
+  value: string | number | boolean ;
+}
+
+declare global {
+  interface Window {
+    adminforth: FrontendAPIInterface;
+  }
+}
+
+export class FrontendAPI {
+  private toastStore:any
+  private modalStore:any
+  private filtersStore:any  
+  private coreStore:any
+  init() {
+    if (window.adminforth) {
+      throw new Error('adminforth already initialized');
+    }
+    this.toastStore = useToastStore();
+    this.modalStore = useModalStore();
+    
+    window.adminforth = {
+      confirm: this.confirm.bind(this),
+      alert: this.alert.bind(this),
+
+      list: {
+        refresh: () => {/* will be redefined in list*/},
+        closeThreeDotsDropdown: () => {/* will be redefined in list*/},
+        closeUserMenuDropdown: () => {/* will be redefined in list*/},
+        setFilter: () => this.setListFilter.bind(this),
+        updateFilter: () => this.updateListFilter.bind(this),
+        clearFilters: () => this.clearListFilters.bind(this),
+      }
+    };
+  }
+
+  confirm(params: ConfirmParams): Promise<void> {
+    return new Promise((resolve, reject) => {
+      this.modalStore.setModalContent({ 
+        content: params.message, 
+        acceptText: params.yes || 'Yes',
+        cancelText: params.no || 'Cancel' 
+      })
+      this.modalStore.onAcceptFunction = resolve
+      this.modalStore.onCancelFunction = reject
+      this.modalStore.togleModal()
+    })
+  }
+
+  alert(params: AlertParams): void {
+    this.toastStore.addToast({
+      message: params.message,
+      messageHtml: params.messageHtml,
+      variant: params.variant,
+      timeout: params.timeout  
+    })
+  }
+
+  listFilterValidation(filter: FilterParams): boolean {
+    if(router.currentRoute.value.meta.type !== 'list'){
+      throw new Error(`Cannot use ${this.setListFilter.name} filter on a list page`)
+    } else {
+      if(!this.coreStore) this.coreStore = useCoreStore()
+      console.log(this.coreStore.resourceColumnsWithFilters,'core store')
+      const filterField = this.coreStore.resourceColumnsWithFilters.find((col: AdminForthResourceColumn) => col.name === filter.field)
+      if(!filterField){
+          throw new Error(`Field ${filter.field} is not available for filtering`)
+      }
+      
+    }
+    return true
+  }
+
+  setListFilter(filter: FilterParams): void {
+    if(this.listFilterValidation(filter)){
+      this.filtersStore = useFiltersStore()
+      if(this.filtersStore.filters.some((f) => {return f.field === filter.field && f.operator === filter.operator})){
+        throw new Error(`Filter ${filter.field} with operator ${filter.operator} already exists`)
+      } else {
+      this.filtersStore.setFilter(filter)
+      }
+    }
+  }
+
+  clearListFilters(): void {
+    this.filtersStore = useFiltersStore()
+    this.filtersStore.clearFilters()
+  }
+
+  updateListFilter(filter: FilterParams): void {
+    if(this.listFilterValidation(filter)){
+      this.filtersStore = useFiltersStore()
+      const index = this.filtersStore.filters.findIndex((f: FilterParams) => f.field === filter.field)
+      if(index === -1) {
+        this.filtersStore.setFilter(filter)
+      } else {
+        const filters = [...this.filtersStore.filters];
+        if (filter.value === undefined) {
+          filters.splice(index, 1);
+        } else {
+          filters[index] = filter;
+        }
+        this.filtersStore.setFilters(filters);
+      }
+    }
+  }
+
+
+
+}

package/dist/spa/src/index.scss

@@ -0,0 +1,31 @@
+@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
+//   }
+// }
+
+
+*{
+  -moz-user-select: none;
+}

package/dist/spa/src/main.ts

@@ -0,0 +1,18 @@
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+/* IMPORTANT:ADMINFORTH IMPORTS */
+
+
+import App from './App.vue'
+import router from './router'
+
+export const app = createApp(App)
+/* IMPORTANT:ADMINFORTH COMPONENT REGISTRATIONS */
+
+ 
+app.use(createPinia())
+app.use(router)
+
+/* IMPORTANT:ADMINFORTH CUSTOM USES */
+
+app.mount('#app')

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

@@ -0,0 +1,48 @@
+<template>
+  <span class="flex items-center"  
+    :data-tooltip-target="val && `tooltip-${id}`"
+    data-tooltip-placement="top"
+  >
+    {{ visualValue }} <IconFileCopyAltSolid @click.stop="copyToCB" class="w-5 h-5 text-lightPrimary dark:text-darkPrimary" v-if="val"/>
+
+    <div :id="`tooltip-${id}`" role="tooltip" v-if="val"
+          class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
+      {{ props.record[props.column.name] }}
+      <div class="tooltip-arrow" data-popper-arrow></div>
+    </div>
+  </span>
+</template>
+
+<script setup>  
+import { computed, ref, onMounted } from 'vue';
+import { IconFileCopyAltSolid } from '@iconify-prerendered/vue-flowbite';
+import { initFlowbite } from 'flowbite';
+
+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']);
+
+const id = ref();
+
+function copyToCB() {
+  navigator.clipboard.writeText(props.record[props.column.name]);
+  window.adminforth.alert({
+    message: 'ID copied to clipboard',
+    variant: 'success',
+  })
+}
+
+onMounted(async () => {
+  id.value = Math.random().toString(36).substring(7);
+  await new Promise(resolve => setTimeout(resolve, 0));
+  initFlowbite();
+});
+
+</script>

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

@@ -0,0 +1,69 @@
+<template>
+  <span class="flex items-center">
+    <span 
+      :class="{[`fi-${countryIsoLow}`]: true, 'flag-icon': countryName}"
+      :data-tooltip-target="`tooltip-${id}`"
+    ></span>
+
+    <span v-if="meta.showCountryName" class="ms-2">{{ countryName }}</span>
+    
+    <div 
+      v-if="!meta.showCountryName && countryName"
+      :id="`tooltip-${id}`" role="tooltip"
+      class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700"
+    >
+      {{ countryName }}
+      <div class="tooltip-arrow" data-popper-arrow></div>
+    </div>
+  </span>
+  
+</template>
+
+<script setup>  
+
+import { computed, ref, onMounted } from 'vue';
+import { initFlowbite } from 'flowbite';
+import 'flag-icons/css/flag-icons.min.css';
+import isoCountries from 'i18n-iso-countries';
+import enLocal from 'i18n-iso-countries/langs/en.json';
+
+isoCountries.registerLocale(enLocal);
+
+const props = defineProps(['column', 'record', 'meta', 'resource', 'adminUser']);
+
+const id = ref();
+
+
+onMounted(async () => {
+  id.value = Math.random().toString(36).substring(7);
+  await new Promise(resolve => setTimeout(resolve, 0));
+  initFlowbite();
+});
+
+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: 2rem;
+  height: 1.5rem;
+  flex-shrink: 0;
+
+  // border radius  for background
+  border-radius: 2px;
+  // add some silkiness to the flag
+  box-shadow: inset -1px -1px 0.5px 0px rgba(0 0 0 / 0.2), inset 1px 1px 0.5px 0px rgba(255 255 255 / 0.2);
+}
+
+</style>

package/dist/spa/src/router/index.ts

@@ -0,0 +1,59 @@
+import { createRouter, createWebHistory } from 'vue-router';
+import ResourceParent from '@/views/ResourceParent.vue';
+
+/* IMPORTANT:ADMINFORTH ROUTES IMPORTS */
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes: [
+    {
+      path: '/login',
+      name: 'login',
+      component: () => import('@/views/LoginView.vue'),
+      meta: { title: 'login' },
+      beforeEnter: async (to, from, next) => {
+        if(localStorage.getItem('isAuthorized') === 'true'){
+          next({name: 'home'})
+        } else {
+          next()
+        }
+      }
+    },
+    {
+      path: '/resource/:resourceId',
+      component: ResourceParent,
+      name: 'resource',
+      children: [
+        {
+          path: '',
+          component: () => import('@/views/ListView.vue'),
+          name: 'resource-list',
+          meta: { title: 'list',type: 'list' }
+        },
+        {
+          path: 'show/:primaryKey',
+          component: () => import('@/views/ShowView.vue'),
+          name: 'resource-show',
+          meta: { title: 'show', type: 'show'}
+
+        },
+        {
+          path: 'edit/:primaryKey',
+          component: () => import('@/views/EditView.vue'),
+          name: 'resource-edit',
+          meta: { title: 'edit', type: 'edit'}
+        },
+        {
+          path: 'create',
+          component: () => import('@/views/CreateView.vue'),
+          name: 'resource-create',
+          meta: { title: 'create', type: 'create'}
+
+        },
+      ]
+    },
+    /* IMPORTANT:ADMINFORTH ROUTES */
+  ]
+})
+
+export default router

package/dist/spa/src/spa_types/core.ts

@@ -0,0 +1,53 @@
+import type { AdminForthResource, AdminForthResourceColumn } from '../types/AdminForthConfig';
+
+export type resourceById = {
+    [key: string]: AdminForthResource;
+}
+
+export type Menu = {
+    label: string,
+    icon: string,
+    resourceId: string,
+    children?: Array<Menu>,
+}
+
+export type Record = {
+    [key: string]: any;
+}
+
+export type ResourceColumns = {
+    [key: string]: Array<AdminForthResourceColumn>;
+}
+
+export type CoreConfig = {
+    brandName: string,
+    brandLogo: string,
+    title: string,
+    datesFormat: string,
+    timeFormat: string,
+    usernameField: string,
+    usernameFieldName?: string,
+    deleteConfirmation?: boolean,
+    auth?: {
+        resourceId: string,
+        usernameField: string,
+        passwordHashField: string,
+        loginBackgroundImage: string,
+        loginBackgroundPosition: string,
+        userFullnameField: string,
+    },
+    emptyFieldPlaceholder?: {
+        show: string,
+        list: string,
+       
+    } | string,
+}
+
+
+export type AllowedActions = {
+    show: boolean,
+    create: boolean,
+    edit: boolean,
+    delete: boolean,
+}
+