adminforth 1.2.79 → 1.2.81

package/dist/modules/styleGenerator.js

@@ -1,4 +1,4 @@
-import { transformObject, deepMerge, createRGBA, parseColorForAliases, darkenRGBA, lightenRGBA } from "./utils.js";
+import { transformObject, deepMerge, createRGBA, parseColorForAliases, darkenRGBA, lightenRGBA, inverseRGBA } from "./utils.js";
 import { styles } from "./styles.js";
 export class StylesGenerator {
     constructor(styleConfig) {
@@ -15,7 +15,7 @@ export class StylesGenerator {
         return plainCustomStyles;
     }
     changeAlias(str, mergedStyles) {
-        const { aliasMatch, opacityMatch, darkenMatch, lightenMatch } = parseColorForAliases(str);
+        const { aliasMatch, opacityMatch, darkenMatch, lightenMatch, inverseMatch } = parseColorForAliases(str);
         if (!aliasMatch) {
             return str;
         }
@@ -29,6 +29,9 @@ export class StylesGenerator {
             if (lightenMatch) {
                 return lightenRGBA(createRGBA(color, opacity));
             }
+            if (inverseMatch) {
+                return inverseRGBA(createRGBA(color, opacity));
+            }
             return createRGBA(color, opacity);
         }
     }

package/dist/modules/styles.js

@@ -2,6 +2,7 @@ export const styles = () => ({
     colors: {
         lightHtml: "#FFFFFF", // main background
         lightPrimary: "#1a56db", // primary color
+        lightPrimaryContrast: "alias:lightPrimary inverse", // primary color contrast
         lightPrimaryOpacity: "alias:lightPrimary opacity:0.05", // primary color opacity
         lightNavbar: "#FFFFFF", // navbar background
         lightNavbarBorder: "rgb(229 231 235)", // border
@@ -9,6 +10,8 @@ export const styles = () => ({
         lightNavbarTextHover: "alias:lightNavbarText darken", // navbar text hover
         lightNavbarTextActive: "alias:lightNavbarText darken", // navbar text active
         lightNavbarIcons: "alias:lightNavbarText opacity:0.7", // navbar icons
+        lightAnnouncementText: "alias:lightPrimaryContrast", // announcement text
+        lightAnnouncementBG: "alias:lightPrimary", // announcement
         lightSidebar: "#f9fafb", // sidebar background
         lightSidebarBorder: "alias:lightSidebarText opacity:0.05", // sidebar right border
         lightSidebarItemHover: "alias:lightSidebarText opacity:0.05", // sidebar list item hover
@@ -51,6 +54,7 @@ export const styles = () => ({
         // colors for dark theme
         darkHtml: "#111827",
         darkPrimary: "#1c64f2", // primary color
+        darkPrimaryContrast: "alias:darkPrimary inverse", // primary color contrast
         darkPrimaryOpacity: "alias:darkPrimary opacity:0.1", // primary color opacity
         darkNavbar: "#111827",
         darkNavbarBorder: "#e5e7eb",
@@ -58,6 +62,8 @@ export const styles = () => ({
         darkNavbarTextHover: "alias:darkNavbarText lighten",
         darkNavbarTextActive: "alias:darkNavbarText lighten",
         darkNavbarIcons: "alias:darkNavbarText opacity:0.7",
+        darkAnnouncementText: "alias:darkPrimaryContrast",
+        darkAnnouncementBG: "alias:darkPrimary",
         darkSidebar: "#1f2937",
         darkSidebarBorder: "alias:darkSidebarText opacity:0.3",
         darkSidebarItemHover: "alias:darkSidebarText opacity:0.1",

package/dist/modules/utils.js

@@ -266,12 +266,14 @@ export function parseColorForAliases(str) {
     const opacityRegex = /opacity:([0-9.]+)/;
     const darkenRegex = /darken/;
     const lightenRegex = /lighten/;
+    const inverseRegex = /inverse/;
     // Extract alias and properties
     const aliasMatch = str.match(aliasRegex);
     const opacityMatch = str.match(opacityRegex);
     const darkenMatch = str.match(darkenRegex);
     const lightenMatch = str.match(lightenRegex);
-    return { aliasMatch, opacityMatch, darkenMatch, lightenMatch };
+    const inverseMatch = str.match(inverseRegex);
+    return { aliasMatch, opacityMatch, darkenMatch, lightenMatch, inverseMatch };
 }
 export function darkenRGBA(rgba) {
     let amount = 0.2;
@@ -299,3 +301,9 @@ export function lightenRGBA(rgba) {
     // Return the new RGBA color
     return `rgba(${Math.round(r)}, ${Math.round(g)}, ${Math.round(b)}, ${a})`;
 }
+export function inverseRGBA(rgba) {
+    // return white or black depending on the brightness of the color
+    let [r, g, b] = rgba.match(/\d+/g).map(Number);
+    let brightness = (r * 299 + g * 587 + b * 114) / 1000;
+    return brightness > 128 ? 'rgba(0,0,0,1)' : 'rgba(255,255,255,1)';
+}

package/modules/styleGenerator.ts

@@ -1,4 +1,4 @@
-import { transformObject,deepMerge,createRGBA,parseColorForAliases,darkenRGBA, lightenRGBA } from "./utils.js";
+import { transformObject,deepMerge,createRGBA,parseColorForAliases,darkenRGBA, lightenRGBA, inverseRGBA } from "./utils.js";
 import { styles } from "./styles.js";
 
 
@@ -23,7 +23,7 @@ export class StylesGenerator {
     }
    
     private changeAlias(str:any, mergedStyles:any){
-      const {aliasMatch,opacityMatch,darkenMatch,lightenMatch} = parseColorForAliases(str);
+      const {aliasMatch,opacityMatch,darkenMatch,lightenMatch, inverseMatch} = parseColorForAliases(str);
       if (!aliasMatch) {
         return str;
       } else {
@@ -33,9 +33,12 @@ export class StylesGenerator {
         if (darkenMatch) {
           return darkenRGBA(createRGBA(color, opacity))
         }
-        if  (lightenMatch){
+        if (lightenMatch){
           return lightenRGBA(createRGBA(color, opacity))
         }
+        if (inverseMatch){
+          return inverseRGBA(createRGBA(color, opacity))
+        }
         return createRGBA(color, opacity);
       }
     }  

package/modules/styles.ts

@@ -5,6 +5,7 @@ export const styles = () => ({
     lightHtml: "#FFFFFF", // main background
 
     lightPrimary: "#1a56db", // primary color
+    lightPrimaryContrast: "alias:lightPrimary inverse", // primary color contrast
     lightPrimaryOpacity: "alias:lightPrimary opacity:0.05", // primary color opacity
 
     lightNavbar: "#FFFFFF", // navbar background
@@ -13,6 +14,8 @@ export const styles = () => ({
     lightNavbarTextHover: "alias:lightNavbarText darken", // navbar text hover
     lightNavbarTextActive: "alias:lightNavbarText darken", // navbar text active
     lightNavbarIcons: "alias:lightNavbarText opacity:0.7", // navbar icons
+    lightAnnouncementText: "alias:lightPrimaryContrast", // announcement text
+    lightAnnouncementBG: "alias:lightPrimary", // announcement
 
     lightSidebar: "#f9fafb", // sidebar background
     lightSidebarBorder: "alias:lightSidebarText opacity:0.05", // sidebar right border
@@ -63,6 +66,7 @@ export const styles = () => ({
     darkHtml: "#111827",
 
     darkPrimary: "#1c64f2", // primary color
+    darkPrimaryContrast: "alias:darkPrimary inverse", // primary color contrast
     darkPrimaryOpacity: "alias:darkPrimary opacity:0.1", // primary color opacity
 
     darkNavbar: "#111827", 
@@ -71,6 +75,8 @@ export const styles = () => ({
     darkNavbarTextHover: "alias:darkNavbarText lighten",
     darkNavbarTextActive: "alias:darkNavbarText lighten",
     darkNavbarIcons: "alias:darkNavbarText opacity:0.7",
+    darkAnnouncementText: "alias:darkPrimaryContrast",
+    darkAnnouncementBG: "alias:darkPrimary",
 
     darkSidebar: "#1f2937", 
     darkSidebarBorder: "alias:darkSidebarText opacity:0.3", 

package/modules/utils.ts

@@ -282,13 +282,15 @@ export function parseColorForAliases(str){
   const opacityRegex = /opacity:([0-9.]+)/;
   const darkenRegex = /darken/;
   const lightenRegex = /lighten/;
+  const inverseRegex = /inverse/;
 
   // Extract alias and properties
   const aliasMatch = str.match(aliasRegex);
   const opacityMatch = str.match(opacityRegex)
   const darkenMatch = str.match(darkenRegex)
   const lightenMatch = str.match(lightenRegex)
-  return {aliasMatch,opacityMatch,darkenMatch,lightenMatch}
+  const inverseMatch = str.match(inverseRegex)
+  return {aliasMatch,opacityMatch,darkenMatch,lightenMatch, inverseMatch}
 }
 
 export function darkenRGBA(rgba) {
@@ -326,4 +328,10 @@ export function lightenRGBA(rgba) {
 }
 
 
+export function inverseRGBA(rgba) {
+  // return white or black depending on the brightness of the color
+  let [r, g, b] = rgba.match(/\d+/g).map(Number);
+  let brightness = (r * 299 + g * 587 + b * 114) / 1000;
+  return brightness > 128 ? 'rgba(0,0,0,1)' : 'rgba(255,255,255,1)';
+}
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "adminforth",
-  "version": "1.2.79",
+  "version": "1.2.81",
   "description": "OpenSource Vue3 powered forth-generation admin panel",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/spa/src/App.vue

@@ -107,17 +107,20 @@
         </ul>
 
 
-        <div id="dropdown-cta" class="p-4 mt-6 rounded-lg bg-lightPrimaryOpacity dark:bg-darkPrimaryOpacity" role="alert"
+        <div id="dropdown-cta" class="p-4 mt-6 rounded-lg bg-lightAnnouncementBG dark:bg-darkAnnouncementBG 
+          fill-lightAnnouncementText dark:fill-darkAccent text-lightAnnouncementText dark:text-darkAccent text-sm
+        " role="alert"
           v-if="ctaBadge"
         >
           <div class="flex items-center mb-3">
-            <span class="bg-lightPrimaryOpacity dark:bg-darkPrimaryOpacity text-lightNavbarText dark:text-darkNavbarPrimary text-sm font-semibold me-2 px-2.5 py-0.5 rounded "
+            <!-- <span class="bg-lightPrimaryOpacity dark:bg-darkPrimaryOpacity  text-sm font-semibold me-2 px-2.5 py-0.5 rounded "
               v-if="ctaBadge.title"
-            >
+            > -->
+            <span>
               {{ctaBadge.title}}
             </span>
             <button type="button" 
-              class="ms-auto -mx-1.5 -my-1.5 bg-lightPrimaryOpacity dark:bg-darkPrimaryOpacity inline-flex justify-center items-center w-6 h-6 text-lightNavbarText dark:text-darkNavbarText rounded-lg focus:ring-2 focus:ring-blue-400 p-1 hover:bg-blue-200 dark:bg-blue-900 dark:text-blue-400 dark:hover:bg-blue-800" 
+              class="ms-auto -mx-1.5 -my-1.5 bg-lightPrimaryOpacity dark:bg-darkPrimaryOpacity inline-flex justify-center items-center w-6 h-6  rounded-lg  p-1 hover:brightness-110" 
               data-dismiss-target="#dropdown-cta" aria-label="Close"
               v-if="ctaBadge?.closable" @click="closeCTA"
             >
@@ -127,7 +130,7 @@
               </svg>
             </button>
           </div>
-          <p class="mb-3 text-sm fill-lightNavbarText dark:fill-darkPrimary text-lightNavbarText dark:text-darkNavbarPrimary" v-if="ctaBadge.html" v-html="ctaBadge.html"></p>
+          <p class="mb-3 text-sm " v-if="ctaBadge.html" v-html="ctaBadge.html"></p>
           <p class="mb-3 text-sm fill-lightNavbarText dark:fill-darkPrimary text-lightNavbarText dark:text-darkNavbarPrimary" v-else>
             {{ ctaBadge.text }}  
           </p>

package/spa/src/components/ValueRenderer.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <span @click="(e)=>{e.stopPropagation()}" v-if="column.foreignResource">
-      <RouterLink v-if="record[column.name]" class="font-medium text-blue-600 dark:text-blue-500 hover:brightness-110"
+      <RouterLink v-if="record[column.name]" class="font-medium text-lightPrimary dark:text-darkPrimary hover:brightness-110"
         :to="{ name: 'resource-show', params: { resourceId: column.foreignResource.resourceId, primaryKey: record[column.name].pk } }">
         {{ record[column.name].label }}
       </RouterLink>
@@ -21,7 +21,7 @@
       {{ checkEmptyValues(formatDate(record[column.name]),route.meta.type) }}
     </span>
     <span v-else-if="column.type === 'richtext'">
-      <div v-html="protectAgainstXSS(record[column.name])"></div>
+      <div v-html="protectAgainstXSS(record[column.name])" class="allow-lists"></div>
     </span>
     <span v-else>
       {{ checkEmptyValues(record[column.name],route.meta.type) }}
@@ -55,7 +55,11 @@ const props = defineProps({
 });
 
 function protectAgainstXSS(value) {
-  return sanitizeHtml(value);
+  return sanitizeHtml(value, {
+    allowedAttributes: {
+    'li': [ 'data-list' ],
+    } 
+  });
 }
 
 
@@ -63,4 +67,22 @@ function formatDate(date) {
   if (!date) return '';
   return dayjs.utc(date).local().format(coreStore.config?.datesFormat || 'YYYY-MM-DD HH:mm:ss');
 }
-</script>
+</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>