feat(katzencore): Added Default value to UI Components

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

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>

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>

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)
 }

src/runtime/stores/UiStore.ts

@@ -2,6 +2,7 @@ import { defineStore } from 'pinia'
 
 export interface KatzenUIOptions {
   key: string
+  default?: string
 }
 
 export enum ComponentType {