@edgedev/create-edge-app 1.1.27 → 1.1.29

package/edge/components/cms/codeEditor.vue

@@ -56,12 +56,34 @@ const props = defineProps({
     type: String,
     default: '',
   },
+  validateJson: {
+    type: Boolean,
+    default: false,
+  },
 })
 
 const emit = defineEmits(['update:modelValue', 'lineClick'])
 const localModelValue = ref(null)
 const edgeFirebase = inject('edgeFirebase')
 const expectsJsonObject = ref(false)
+const jsonValidationError = computed(() => {
+  if (!props.validateJson || props.language !== 'json')
+    return ''
+  const raw = localModelValue.value
+  if (raw === null || raw === undefined)
+    return ''
+  const text = String(raw).trim()
+  if (!text)
+    return ''
+  try {
+    JSON.parse(text)
+    return ''
+  }
+  catch (error) {
+    return `Invalid JSON: ${error.message}`
+  }
+})
+const displayError = computed(() => props.error || jsonValidationError.value)
 
 const editorOptions = {
   mode: 'htmlmixed',
@@ -166,6 +188,12 @@ const redo = () => {
 
 const editorCompRef = ref(null)
 const editorInstanceRef = shallowRef(null)
+let editorDomNode = null
+
+const stopEnterPropagation = (event) => {
+  if (event.key === 'Enter')
+    event.stopPropagation()
+}
 
 const setCursor = () => {
   const editor = editorInstanceRef.value
@@ -226,6 +254,9 @@ const runChatGpt = async () => {
 const handleMount = (editor) => {
   editorInstanceRef.value = editor
   editorInstanceRef.value?.getAction('editor.action.formatDocument').run()
+  editorDomNode = editor.getDomNode?.()
+  if (editorDomNode)
+    editorDomNode.addEventListener('keydown', stopEnterPropagation)
   editor.onMouseDown((event) => {
     const position = event?.target?.position
     const model = editor.getModel?.()
@@ -314,6 +345,12 @@ const getChanges = () => {
     formatCode()
   }
 }
+
+onBeforeUnmount(() => {
+  if (editorDomNode)
+    editorDomNode.removeEventListener('keydown', stopEnterPropagation)
+  editorDomNode = null
+})
 </script>
 
 <template>
@@ -364,11 +401,11 @@ const getChanges = () => {
       </template>
       <template #center>
         <div class="w-full px-2">
-          <Alert v-if="props.error" variant="destructive" class="rounded-[6px] py-1">
+          <Alert v-if="displayError" variant="destructive" class="rounded-[6px] py-1">
             <TriangleAlert class="h-4 w-4" />
             <AlertTitle>Error</AlertTitle>
             <AlertDescription>
-              {{ props.error }}
+              {{ displayError }}
             </AlertDescription>
           </Alert>
         </div>

package/edge/components/cms/htmlContent.vue

@@ -699,10 +699,18 @@ function rewriteAllClasses(scopeEl, theme, isolated = true, viewportMode = 'auto
   scopeEl.querySelectorAll('[class]').forEach((el) => {
     let base = el.dataset.viewportBaseClass
     if (typeof base !== 'string') {
-      base = el.className || ''
+      if (typeof el.className === 'string') {
+        base = el.className
+      }
+      else if (el.className && typeof el.className.baseVal === 'string') {
+        base = el.className.baseVal
+      }
+      else {
+        base = el.getAttribute('class') || ''
+      }
       el.dataset.viewportBaseClass = base
     }
-    const orig = base || ''
+    const orig = typeof base === 'string' ? base : String(base || '')
     if (!orig.trim())
       return
     const origTokens = orig.split(/\s+/).filter(Boolean)

package/edge/components/cms/init_blocks/footer.html

@@ -1,24 +1,116 @@
-<footer id="global-footer" class="bg-neutral-900 text-white">
-  <div class="mx-auto max-w-7xl px-6 py-12"> <!-- Top: Brand / Map / Contact -->
-    <div class="grid gap-10 md:grid-cols-3"> <!-- Brand / Title -->
-      <div class="text-center md:text-left">
-        <h6 class="text-lg font-semibold tracking-wide">{{{#text {"field":"name","value":""}}}}</h6>
-        <p class="mt-2 whitespace-pre-line text-sm text-neutral-300"> {{{#text {"field":"title","value":""}}}} </p>
-      </div> <!-- Map -->
-      <div> </div> <!-- Contact -->
-      <div class="text-center md:text-left">
-        <h6 class="text-lg font-semibold tracking-wide">Contact Us</h6>
-        <div class="mt-2 space-y-2 text-sm">
-          <p> Phone: <a class="font-normal hover:opacity-90 underline underline-offset-4" href="tel:2025502730"
-              aria-label="Call (202) 550-2730"> {{{#text {"field":"phone","value":""}}}} </a> </p>
-          <p> Office: <a class="font-normal hover:opacity-90 underline underline-offset-4" href="tel:6154755616"
-              aria-label="Call (615) 475-5616"> {{{#text {"field":"officeNumber","value":""}}}} </a> </p>
-          <div>
-            <div class="text-neutral-300">{{{#text {"field":"streetAddress","value":""}}}}</div>
-            <div class="text-neutral-300">{{{#text {"field":"city","value":"","title":"City, State & Zip"}}}}</div>
-          </div>
+<footer id="global-footer" class="bg-footerBg text-white h-[344px] overflow-hidden">
+  <div class="mx-auto px-1 sm:px-[100px] py-12 h-full w-full"> <!-- Top: Brand / Map / Contact -->
+    <div class="grid gap-10  md:grid-cols-2 h-full w-full">
+    {{{#array {"field":"agent","schema":[{"field":"contactEmail","value":"text"}],"collection":{"path":"users","uniqueKey":"{orgId}"},"queryOptions":[{"field":"userId","title":"Agent","optionsKey":"name","optionsValue":"userId","options":"users"}],"limit":1,"value":[]}}}}
+      <div class="text-center md:text-left  relative h-full">
+        <div class="flex justify-center md:justify-start gap-4 mb-8">
+          <img
+            src="{{{#image {"field":"logo","value":"","tags":["Logos"]}}}}"
+            class="h-10 object-contain"
+          />
+          <span class="h-10 w-px bg-white opacity-80"></span>
+          <img
+            src="{{{#image {"field":"brandLogo","value":"","tags":["Logos"]}}}}"
+            class="h-8 object-contain"
+          />
         </div>
+          Phone: {{item.contactPhone}} <br />
+          Email: {{item.contactEmail}}
+        <img  src="https://imagedelivery.net/h7EjKG0X9kOxmLp41mxOng/clearwater-hub-nSyJmnm6i2xLMPQ1PCX2-images-JyO9Jv7e5H6TghMPhq8W-watermark.png/public" class="absolute -bottom-14 -left-26" />
       </div>
+      <div class="flex w-full justify-center md:justify-right gap-1">
+        {{{#if {"cond":"item.socialFacebook"}}}}
+          <a
+            href="{{ item.socialFacebook }}"
+            target="_blank"
+            class="flex h-8 w-8 items-center justify-center bg-white rounded-full"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 320 512"
+              class="h-4 w-4"
+            >
+              <path d="M80 299.3V512H196V299.3h86.5l18-97.8H196V166.9c0-51.7 20.3-71.5 72.7-71.5c16.3 0 29.4 .4 37 1.2V7.9C291.4 4 256.4 0 236.2 0C129.3 0 80 50.5 80 159.4v42.1H14v97.8H80z"/>
+            </svg>
+          </a>
+        {{{/if}}}
+        {{{#if {"cond":"item.socialInstagram"}}}}
+          <a
+            href="{{ item.socialInstagram }}"
+            target="_blank"
+            class="flex h-8 w-8 items-center justify-center bg-white rounded-full"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 448 512"
+              class="h-4 w-4"
+            >
+              <path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"/>
+            </svg>
+          </a>
+        {{{/if}}}
+        {{{#if {"cond":"item.socialTwitter"}}}}
+          <a
+            href="{{ item.socialTwitter }}"
+            target="_blank"
+            class="flex h-8 w-8 items-center justify-center bg-white rounded-full"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 300 400"
+              class="h-5 w-5"
+            >
+              <path d="M279.14 288l14.22-16.53L319.08 240h-72.7l-39.5-46.2 93.9-109.2h-74.3l-59.4 69.1-54.5-69.1H0l99.8 116.3L0 320h74.3l64.3-74.8L198.5 320h120.7l-40.1-32zM164.6 213.6l-10.5-12.6-83.7-100.4h33.8l67.6 81.2 10.5 12.6 87.8 105.5h-33.8l-71.7-86.1z"/>
+            </svg>
+          </a>
+        {{{/if}}}
+        {{{#if {"cond":"item.socialLinkedIn"}}}}
+          <a
+            href="{{ item.socialLinkedIn }}"
+            target="_blank"
+            class="flex h-8 w-8 items-center justify-center bg-white rounded-full"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 448 512"
+              class="h-4 w-4"
+            >
+              <path d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z"/>
+            </svg>
+          </a>
+        {{{/if}}}
+        {{{#if {"cond":"item.socialYouTube"}}}}
+          <a
+            href="{{ item.socialYouTube }}"
+            target="_blank"
+            class="flex h-8 w-8 items-center justify-center bg-white rounded-full"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 576 512"
+              class="h-4 w-4"
+            >
+              <path d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"/>
+            </svg>
+          </a>
+        {{{/if}}}
+        {{{#if {"cond":"item.socialTikTok"}}}}
+          <a
+            href="{{ item.socialTikTok }}"
+            target="_blank"
+            class="flex h-8 w-8 items-center justify-center bg-white rounded-full"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 448 512"
+              class="h-4 w-4"
+            >
+              <path d="M448,209.91a210.06,210.06,0,0,1-122.77-39.25V349.38A162.55,162.55,0,1,1,185,188.31V278.2a74.62,74.62,0,1,0,52.23,71.18V0l88,0a121.18,121.18,0,0,0,1.86,22.17h0A122.18,122.18,0,0,0,381,102.39a121.43,121.43,0,0,0,67,20.14Z"/>
+            </svg>
+          </a>
+        {{{/if}}}
+      </div>
+      {{{/array}}}
     </div>
   </div>
 </footer>

package/edge/components/cms/init_blocks/image.html

@@ -0,0 +1,8 @@
+      <div class="w-full md:1/2 p-4">
+        <img
+          src="{{{#image {"field":"backgroundImage","value":"https://imagedelivery.net/h7EjKG0X9kOxmLp41mxOng/clearwater-hub-nSyJmnm6i2xLMPQ1PCX2-images-EdDjIxZYYcqeGMqk1ZDt-AdobeStock_New_Second.jpg/public"}}}}"
+          loading="lazy"
+          class="w-full h-auto"
+          alt="{{{#text {"field":"altTag","validation":{"required":true,"min":1},"value":""}}}}"
+        />
+      </div>

package/edge/components/cms/init_blocks/post_content.html

@@ -1,7 +1,8 @@
 <div class="pa-8 bg-white font-sans">
-{{{#array {"field":"list","schema":[{"field":"name","value":"text"},{"field":"content","value":"richtext"}],"collection":{"path":"post","query":[{"field":"doc_created_at","operator":">","value":0}],"order":[{"field":"doc_created_at","direction":"desc"}]},"queryOptions":[],"limit":1,"value":[]}}}}
+    {{{#array
+    {"field":"list","schema":[{"field":"name","value":"text"},{"field":"content","value":"richtext"}],"collection":{"path":"posts","uniqueKey":"{orgId}:{siteId}","query":[],"order":[]},"queryOptions":[],"limit":1,"value":[]}}}}
     <h1 class="text-sm">
         {{item.content}}
     </h1>
-{{{/array}}}
+    {{{/array}}}
 </div>

package/edge/components/cms/init_blocks/post_title_header.html

@@ -1,8 +1,9 @@
-{{{#array {"field":"list","schema":[{"field":"name","value":"text"}],"collection":{"path":"post","query":[{"field":"doc_created_at","operator":">","value":0}],"order":[{"field":"doc_created_at","direction":"desc"}]},"queryOptions":[],"limit":1,"value":[]}}}}
-  <section
-    class="relative h-[50dvh] min-h-[260px] w-full bg-cover bg-center"
-    style="background-image: url('{{item.featuredImage}}')"
-  >
+<div class="relative h-[20dvh] md:h-[30dvh] w-full bg-cover bg-center {{{#text {"
+  field":"backgroundColor","option":{"optionsKey":"title","optionsValue":"value","options":[{"title":"Brand","value":"bg-brand"},{"title":"Primary","value":"bg-primary"},{"title":"Secondary","value":"bg-secondary"},{"title":"White","value":"bg-white"},{"title":"Transparent","value":"bg-transparent"}]},"value":"bg-primary"}}}}">
+  {{{#array
+  {"field":"list","schema":[{"field":"name","value":"text"}],"collection":{"path":"posts","uniqueKey":"{orgId}:{siteId}","query":[],"order":[]},"queryOptions":[],"limit":1,"value":[]}}}}
+  <section class="relativeh-[20dvh] md:h-[30dvh] w-full bg-cover bg-center"
+    style="background-image: url('{{item.featuredImage}}')">
     <!-- Dark overlay -->
     <div class="absolute inset-0 bg-black/40"></div>
 
@@ -18,4 +19,5 @@
     <!-- Optional vignette -->
     <div class="pointer-events-none absolute inset-0 bg-gradient-to-b from-black/20 via-transparent to-black/30"></div>
   </section>
-  {{{/array}}}
+  {{{/array}}}
+</div>

package/edge/components/cms/init_blocks/posts_list.html

@@ -1,20 +1,21 @@
 <div class="p-8 bg-gray-50 font-sans">
   <div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
-    {{{#array {"field":"list","schema":[{"field":"name","value":"text"},{"field":"content","value":"richtext"}],"collection":{"path":"posts","query":[{"field":"doc_created_at","operator":">","value":0}],"order":[{"field":"doc_created_at","direction":"desc"}]},"queryOptions":[{"field":"tags","operator":"array-contains-any","options":[]}],"limit":10,"value":[]}}}}
-
-    <div class="bg-white rounded-2xl shadow-sm hover:shadow-md transition-shadow duration-200 overflow-hidden flex flex-col">
+    {{{#array
+    {"field":"list","schema":[{"field":"name","value":"text"},{"field":"content","value":"richtext"}],"collection":{"path":"posts","uniqueKey":"{orgId}:{siteId}","query":[{"field":"doc_created_at","operator":">","value":0}],"order":[{"field":"doc_created_at","direction":"desc"}]},"queryOptions":[{"field":"tags","operator":"array-contains-any","options":[]}],"limit":10,"value":[]}}}}
+    <div
+      class="bg-white rounded-2xl shadow-sm hover:shadow-md transition-shadow duration-200 overflow-hidden flex flex-col">
       <img src="{{item.featuredImage}}" alt="{{item.title}}" class="h-48 w-full object-cover" />
       <div class="p-5 flex flex-col flex-1">
         <h2 class="text-lg font-semibold text-gray-800 mb-2 line-clamp-2">{{ item.title }}</h2>
         <div class="text-gray-600 text-sm flex-1 mb-4 line-clamp-3">
           {{ item.blurb }}
         </div>
-        <a href="/posts/{{item.name}}" class="inline-block mt-auto self-start text-sm font-medium text-blue-600 hover:text-blue-800 transition-colors duration-150">
+        <a href="{{item.name}}"
+          class="inline-block mt-auto self-start text-sm font-medium text-blue-600 hover:text-blue-800 transition-colors duration-150">
           Read More →
         </a>
       </div>
     </div>
-
     {{{/array}}}
   </div>
 </div>

package/edge/components/cms/mediaCard.vue

@@ -55,13 +55,24 @@ const timeAgo = (timestamp) => {
     return `${minutes} minute${minutes > 1 ? 's' : ''} ago`
   return `${seconds} second${seconds > 1 ? 's' : ''} ago`
 }
+
+const isLightName = (name) => {
+  if (!name)
+    return false
+  return String(name).toLowerCase().includes('light')
+}
+
+const previewBackgroundClass = computed(() => {
+  const displayName = props.item?.name
+  return isLightName(displayName) ? 'bg-neutral-900/90' : 'bg-neutral-100'
+})
 </script>
 
 <template>
   <Card
     class="w-full group overflow-hidden rounded-2xl border bg-card hover:shadow-md hover:border-muted-foreground/20 transition-all"
   >
-    <div class="relative w-full h-[200px] bg-muted">
+    <div class="relative w-full h-[200px] flex items-center justify-center" :class="previewBackgroundClass">
       <div class="z-10 absolute w-full flex inset-0 bg-black/10 dark:bg-black/30 justify-between items-start p-2">
         <edge-shad-button
           v-if="!props.selectMode"
@@ -90,7 +101,7 @@ const timeAgo = (timestamp) => {
         v-else
         :src="edgeGlobal.getImage(item, 'thumbnail')"
         alt=""
-        class="absolute inset-0 h-full w-full object-cover transition-transform duration-200 group-hover:scale-[1.02]"
+        class="max-h-full max-w-full h-auto w-auto object-contain transition-transform duration-200 group-hover:scale-[1.02]"
       >
     </div>
 

package/edge/components/cms/mediaManager.vue

@@ -8,6 +8,11 @@ const props = defineProps({
     required: false,
     default: 'all',
   },
+  includeCmsAll: {
+    type: Boolean,
+    required: false,
+    default: true,
+  },
   selectMode: {
     type: Boolean,
     required: false,
@@ -137,6 +142,7 @@ onBeforeMount(() => {
   console.log('Default tags prop:', props.defaultTags)
   if (props.defaultTags && Array.isArray(props.defaultTags) && props.defaultTags.length > 0) {
     state.filterTags = [...props.defaultTags]
+    state.tags = [...props.defaultTags]
   }
 })
 
@@ -158,6 +164,20 @@ const itemClick = (item) => {
     state.workingDoc = item
   }
 }
+
+const isLightName = (name) => {
+  if (!name)
+    return false
+  return String(name).toLowerCase().includes('light')
+}
+
+const previewBackgroundClass = computed(() => (isLightName(state.workingDoc?.name) ? 'bg-neutral-900/90' : 'bg-neutral-100'))
+
+const siteQueryValue = computed(() => {
+  if (!props.site)
+    return []
+  return props.includeCmsAll ? ['all', props.site] : [props.site]
+})
 </script>
 
 <template>
@@ -220,8 +240,12 @@ const itemClick = (item) => {
             v-if="state.tags.length === 0"
             class="pointer-events-auto absolute inset-0 z-20 rounded-[20px] border border-dashed border-border/70 bg-background/85 dark:bg-background/80 backdrop-blur-sm flex flex-col items-center justify-center text-center px-6 text-foreground"
           >
-            <div class="text-lg font-semibold">Tags are required</div>
-            <div class="text-sm text-muted-foreground">Add tags above to enable upload</div>
+            <div class="text-lg font-semibold">
+              Tags are required
+            </div>
+            <div class="text-sm text-muted-foreground">
+              Add tags above to enable upload
+            </div>
           </div>
         </div>
       </SheetContent>
@@ -231,7 +255,7 @@ const itemClick = (item) => {
       sort-field="uploadTime"
       query-field="meta.cmssite"
       :filters="filters"
-      :query-value="['all', props.site]"
+      :query-value="siteQueryValue"
       query-operator="array-contains-any"
       header-class=""
       sort-direction="desc" class="w-full flex-1 border-none shadow-none bg-background"
@@ -305,7 +329,7 @@ const itemClick = (item) => {
         </div>
       </template>
       <template #list="slotProps">
-        <div class=" mx-auto px-0 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+        <div class="mx-auto px-0 grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5">
           <div v-for="item in slotProps.filtered" :key="item.docId" class="w-full cursor-pointer" @click="itemClick(item)">
             <edge-cms-media-card
               :item="item"
@@ -325,7 +349,13 @@ const itemClick = (item) => {
         <SheetHeader>
           <SheetTitle>{{ state.workingDoc?.fileName }}</SheetTitle>
           <SheetDescription>
-            <img :src="edgeGlobal.getImage(state.workingDoc, 'public')" alt="" class="h-[450px] m-auto object-fit rounded-lg mb-4">
+            <div class="h-[450px] rounded-lg mb-4 flex items-center justify-center overflow-hidden" :class="previewBackgroundClass">
+              <img
+                :src="edgeGlobal.getImage(state.workingDoc, 'public')"
+                alt=""
+                class="max-h-full max-w-full h-auto w-auto object-contain"
+              >
+            </div>
             Original Name: <span class="font-semibold">{{ state.workingDoc?.fileName }}</span>, Size: <span class="font-semibold">{{ (state.workingDoc?.fileSize / 1024).toFixed(2) }} KB</span>
           </SheetDescription>
         </SheetHeader>