item handling

src/utils/helper.ts

@@ -2,7 +2,7 @@ import type { LocationQueryValue, RouteLocationRawI18n } from 'vue-router'
 
 export const bytesToBase64DataUrlAsync = async (
   bytes: Uint8Array,
-  type = 'application/octet-stream'
+  type = 'application/octet-stream',
 ) => {
   return await new Promise((resolve, reject) => {
     const reader = Object.assign(new FileReader(), {
@@ -65,16 +65,16 @@ export const readableFileSize = (sizeInByte: number | string = 0) => {
 }
 
 export const getSingleRouteParam = (
-  param: string | string[] | LocationQueryValue | LocationQueryValue[]
+  param: string | string[] | LocationQueryValue | LocationQueryValue[],
 ): string => {
   const _param = Array.isArray(param) ? param.at(0) ?? '' : param ?? ''
-  //console.log('found param', _param, param);
+  console.log('getSingleRouteParam found:', _param, param)
   return decodeURIComponent(_param)
 }
 
 export const isRouteActive = (
   to: RouteLocationRawI18n,
-  exact: boolean = false
+  exact: boolean = false,
 ) =>
   computed(() => {
     const found = useRouter()
@@ -85,7 +85,7 @@ export const isRouteActive = (
       ? found?.name === useRouter().currentRoute.value.name
       : found?.name === useRouter().currentRoute.value.name ||
           found?.children.some(
-            (child) => child.name === useRouter().currentRoute.value.name
+            (child) => child.name === useRouter().currentRoute.value.name,
           )
   })
 
@@ -95,7 +95,7 @@ export const isKey = <T extends object>(x: T, k: PropertyKey): k is keyof T => {
 
 export const filterAsync = async <T>(
   arr: T[],
-  predicate: (value: T, index: number, array: T[]) => Promise<boolean>
+  predicate: (value: T, index: number, array: T[]) => Promise<boolean>,
 ) => {
   // 1. Mappe jedes Element auf ein Promise, das zu true/false auflöst
   const results = await Promise.all(arr.map(predicate))
@@ -119,3 +119,39 @@ export const hexToString = (hex: string) => {
 
   return parsedValue ? parsedValue : ''
 }
+
+export const getContrastingTextColor = (
+  hexColor: string,
+): 'black' | 'white' => {
+  if (!hexColor) {
+    return 'black' // Fallback
+  }
+
+  // Entferne das '#' vom Anfang
+  let color = hexColor.startsWith('#') ? hexColor.slice(1) : hexColor
+
+  // Handle Kurzform-Hex-Werte (z.B. "F0C" -> "FF00CC")
+  if (color.length === 3) {
+    color = color
+      .split('')
+      .map((char) => char + char)
+      .join('')
+  }
+
+  if (color.length !== 6) {
+    return 'black' // Fallback für ungültige Farben
+  }
+
+  // Konvertiere Hex zu RGB
+  const r = parseInt(color.substring(0, 2), 16)
+  const g = parseInt(color.substring(2, 4), 16)
+  const b = parseInt(color.substring(4, 6), 16)
+
+  // Berechne die wahrgenommene Luminanz nach der WCAG-Formel.
+  // Werte von 0 (schwarz) bis 255 (weiß).
+  const luminance = 0.299 * r + 0.587 * g + 0.114 * b
+
+  // Wähle die Textfarbe basierend auf einem Schwellenwert.
+  // Ein Wert > 186 wird oft als "hell" genug für schwarzen Text angesehen.
+  return luminance > 186 ? 'black' : 'white'
+}