From 5732cf124e4e89305edef70b30f7d702169938df Mon Sep 17 00:00:00 2001
From: Maximilian Schleining <maximilian.schleining@agenda-software.de>
Date: Mon, 12 Aug 2024 09:39:16 +0200
Subject: [PATCH] feat(katzencore): Added Default value to UI Components

---
 playground/pages/image_test.vue            |  2 +-
 playground/pages/index.vue                 | 48 +++++++++++++++-------
 src/runtime/components/views/EditView.vue  | 17 +++++++-
 src/runtime/composables/useUiComponents.ts | 10 ++---
 src/runtime/stores/UiStore.ts              |  1 +
 5 files changed, 55 insertions(+), 23 deletions(-)

diff --git a/playground/pages/image_test.vue b/playground/pages/image_test.vue
index 9e18a75..1aafab9 100644
--- a/playground/pages/image_test.vue
+++ b/playground/pages/image_test.vue
@@ -4,7 +4,7 @@ const customImage = useKatzeImage({ key: 'image_link' })
 
 <template>
   <div>
-    <h1>Image Test</h1>
+    <h1>Custom Image Test</h1>
     <div class="flex flex-col">
       <div class="flex flex-row">
         <div
diff --git a/playground/pages/index.vue b/playground/pages/index.vue
index ef81922..a18e1aa 100644
--- a/playground/pages/index.vue
+++ b/playground/pages/index.vue
@@ -1,22 +1,40 @@
 <script setup lang="ts">
-const buttonText = useKatzeText({ key: 'button_text' })
+const editableText = useKatzeText({
+  key: 'editable_text',
+  default: 'Katze is a Nuxt module that allows you to manage your content on the fly. This is an editable text.',
+})
+const buttonText = useKatzeText({ key: 'button_text', default: 'The text on this button is also editable.' })
+
+const richTextExample = useKatzeRichText({ key: 'rich_text_example',
+  default: '<span>This is a rich text example. You can edit this text add italics and boldness and more.</span>',
+})
 </script>
 
 <template>
-  <div>
-    <h1>INDEX</h1>
-    <div class="flex flex-col">
-      <div class="flex flex-row">
-        <p class="text-2xl">
-          Hello World
-        </p>
-        <button
-          class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
-          kat-e="button_text"
-        >
-          {{ buttonText }}
-        </button>
-      </div>
+  <div class="size-full flex flex-col items-center">
+    <h1 class="text-4xl font-bold font-mono py-20">
+      Katze CMS Playground
+    </h1>
+    <div class="flex flex-col gap-5">
+      <p
+        class="text-2xl"
+        kat-e="editable_text"
+      >
+        {{ editableText }}
+      </p>
+      <button
+        class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
+        kat-e="button_text"
+      >
+        {{ buttonText }}
+      </button>
+
+      <p
+        class="text-2xl"
+        kat-e="rich_text_example"
+      >
+        <katze-rich-text :content="richTextExample" />
+      </p>
     </div>
   </div>
 </template>
diff --git a/src/runtime/components/views/EditView.vue b/src/runtime/components/views/EditView.vue
index 20effda..a55b411 100644
--- a/src/runtime/components/views/EditView.vue
+++ b/src/runtime/components/views/EditView.vue
@@ -791,7 +791,20 @@ watch(mobileView, () => {
 }
 
 .route-container *[kat-e] {
-  min-height: 12px;
-  min-width: 12px;
+  min-height: 24px;
+  min-width: 24px;
+  position: relative;
+}
+
+.route-container *[kat-e]:before {
+  content: '';
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+
+  border: 2px dashed rgb(255 207 207 / 85%);
 }
 </style>
diff --git a/src/runtime/composables/useUiComponents.ts b/src/runtime/composables/useUiComponents.ts
index 96d2fa5..773a491 100644
--- a/src/runtime/composables/useUiComponents.ts
+++ b/src/runtime/composables/useUiComponents.ts
@@ -22,17 +22,17 @@ export const getContent = () => {
   return useRuntimeConfig().public.content as Record<string, unknown> || {}
 }
 
-export const getContentByKey = <T = string>(key: string) => {
+export const getContentByKey = <T = string>(key: string, defaultValue: string = '') => {
   const content = getContent()
   if (content[key]) {
-    return content[key] as T
+    return content[key] as T || defaultValue
   }
-  return undefined
+  return defaultValue
 }
 
 export const useKatzeRichText = (options: KatzenUIOptions) => {
   const uiStore = useUiStore()
-  const component: KatzenUIComponent = { type: ComponentType.RichText, options, content: getContentByKey(options.key) }
+  const component: KatzenUIComponent = { type: ComponentType.RichText, options, content: getContentByKey(options.key, options.default) }
   uiStore.addToContextStack(component)
   return reactiveProperty(options.key)
 }
@@ -46,7 +46,7 @@ export const useKatzeImage = (options: KatzenUIOptions) => {
 
 export const useKatzeText = (options: KatzenUIOptions) => {
   const uiStore = useUiStore()
-  const component: KatzenUIComponent = { type: ComponentType.Text, options, content: getContentByKey(options.key) }
+  const component: KatzenUIComponent = { type: ComponentType.Text, options, content: getContentByKey(options.key, options.default) }
   uiStore.addToContextStack(component)
   return reactiveProperty(options.key)
 }
diff --git a/src/runtime/stores/UiStore.ts b/src/runtime/stores/UiStore.ts
index b22c16b..57a9e54 100644
--- a/src/runtime/stores/UiStore.ts
+++ b/src/runtime/stores/UiStore.ts
@@ -2,6 +2,7 @@ import { defineStore } from 'pinia'
 
 export interface KatzenUIOptions {
   key: string
+  default?: string
 }
 
 export enum ComponentType {