@edgedev/create-edge-app 1.1.27 → 1.1.29

package/edge/components/cms/themeDefaultMenu.vue

@@ -1,7 +1,7 @@
 <script setup>
-import { computed, reactive, watchEffect } from 'vue'
+import { computed, reactive, watch, watchEffect } from 'vue'
 import { useVModel } from '@vueuse/core'
-import { File as FileIcon, FileMinus2, FilePen, Folder, FolderMinus, FolderPen, FolderPlus, GripVertical, Plus } from 'lucide-vue-next'
+import { FileCog, File as FileIcon, FileMinus2, FilePen, Folder, FolderMinus, FolderPen, FolderPlus, GripVertical, Link, Plus } from 'lucide-vue-next'
 
 const props = defineProps({
   modelValue: {
@@ -31,6 +31,15 @@ const state = reactive({
     menu: '',
     value: '',
   },
+  linkDialog: {
+    open: false,
+    mode: 'add',
+    menu: '',
+    folder: '',
+    index: -1,
+    name: '',
+    url: '',
+  },
   renameDialog: {
     open: false,
     type: 'page',
@@ -84,7 +93,25 @@ const uniqueSlug = (value, siblings = [], current = '', options = {}) => {
   return candidate
 }
 
-const isFolder = entry => entry && typeof entry.item === 'object'
+const uniqueDisplayName = (value, siblings = [], current = '') => {
+  const base = String(value || '').trim() || 'Link'
+  const siblingSet = new Set(siblings.filter(Boolean))
+  if (current)
+    siblingSet.delete(current)
+  if (!siblingSet.has(base))
+    return base
+  let suffix = 2
+  let candidate = `${base} (${suffix})`
+  while (siblingSet.has(candidate)) {
+    suffix += 1
+    candidate = `${base} (${suffix})`
+  }
+  return candidate
+}
+
+const isExternalLinkEntry = entry => entry?.item && typeof entry.item === 'object' && entry.item.type === 'external'
+const isFolder = entry => entry && typeof entry.item === 'object' && !isExternalLinkEntry(entry)
+const isPageEntry = entry => typeof entry?.item === 'string'
 
 const getFolderName = (entry) => {
   if (!isFolder(entry))
@@ -112,7 +139,13 @@ const resolveTemplateTitle = (pageId) => {
 
 const siblingSlugs = (list = [], excludeIndex = -1) => {
   return list
-    .map((entry, idx) => (idx === excludeIndex || typeof entry?.item !== 'string') ? null : entry.name)
+    .map((entry, idx) => (idx === excludeIndex || !entry?.name) ? null : entry.name)
+    .filter(Boolean)
+}
+
+const siblingNames = (list = [], excludeIndex = -1) => {
+  return list
+    .map((entry, idx) => (idx === excludeIndex ? null : entry?.name))
     .filter(Boolean)
 }
 
@@ -124,6 +157,8 @@ const addPageToList = (list, pageId, nameHint) => {
   list.push({
     name: slug,
     item: pageId,
+    disableRename: false,
+    disableDelete: false,
   })
 }
 
@@ -136,6 +171,21 @@ const addPageToMenu = (menuName, pageId, folderName = null) => {
   addPageToList(targetList, pageId, resolveTemplateTitle(pageId))
 }
 
+const addLinkToMenu = (menuName, label, url, folderName = null) => {
+  const targetList = getParentList(menuName, folderName)
+  if (!targetList)
+    return
+  const siblings = siblingNames(targetList)
+  const name = uniqueDisplayName(label, siblings)
+  targetList.push({
+    name,
+    item: {
+      type: 'external',
+      url,
+    },
+  })
+}
+
 const removePage = (menuName, index, folderName = null) => {
   const targetList = getParentList(menuName, folderName)
   if (!targetList)
@@ -199,7 +249,7 @@ const deleteFolder = (menuName, index) => {
 
 const openRenameDialogForPage = (menuName, index, folderName = null) => {
   const parentList = getParentList(menuName, folderName)
-  if (!parentList?.[index])
+  if (!parentList?.[index] || isExternalLinkEntry(parentList[index]))
     return
   state.renameDialog = {
     open: true,
@@ -222,6 +272,62 @@ const openRenameDialogForFolder = (menuName, folderName, index) => {
   }
 }
 
+const resetLinkDialog = () => {
+  state.linkDialog.mode = 'add'
+  state.linkDialog.menu = ''
+  state.linkDialog.folder = ''
+  state.linkDialog.index = -1
+  state.linkDialog.name = ''
+  state.linkDialog.url = ''
+}
+
+watch(() => state.linkDialog.open, (open) => {
+  if (!open)
+    resetLinkDialog()
+})
+
+const openAddLinkDialog = (menuName, folderName = null) => {
+  state.linkDialog.mode = 'add'
+  state.linkDialog.menu = menuName
+  state.linkDialog.folder = folderName || ''
+  state.linkDialog.index = -1
+  state.linkDialog.name = ''
+  state.linkDialog.url = ''
+  state.linkDialog.open = true
+}
+
+const openEditLinkDialog = (menuName, index, entry, folderName = null) => {
+  state.linkDialog.mode = 'edit'
+  state.linkDialog.menu = menuName
+  state.linkDialog.folder = folderName || ''
+  state.linkDialog.index = index
+  state.linkDialog.name = entry?.name || ''
+  state.linkDialog.url = entry?.item?.url || ''
+  state.linkDialog.open = true
+}
+
+const submitLinkDialog = () => {
+  const label = state.linkDialog.name?.trim() || ''
+  const url = state.linkDialog.url?.trim() || ''
+  if (!label || !url)
+    return
+  const targetList = getParentList(state.linkDialog.menu, state.linkDialog.folder || null)
+  if (!targetList)
+    return
+  if (state.linkDialog.mode === 'edit') {
+    const target = targetList[state.linkDialog.index]
+    if (!target || !isExternalLinkEntry(target))
+      return
+    const siblings = siblingNames(targetList, state.linkDialog.index)
+    target.name = uniqueDisplayName(label, siblings, target.name)
+    target.item = { type: 'external', url }
+  }
+  else {
+    addLinkToMenu(state.linkDialog.menu, label, url, state.linkDialog.folder || null)
+  }
+  state.linkDialog.open = false
+}
+
 const submitRenameDialog = () => {
   if (!state.renameDialog.open)
     return
@@ -298,6 +404,11 @@ const hasEntries = computed(() => {
               <div v-else class="px-3 py-2 text-xs text-muted-foreground">
                 All template pages are already assigned.
               </div>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem @click="openAddLinkDialog(menuName)">
+                <Link class="w-4 h-4" />
+                <span>External Link</span>
+              </DropdownMenuItem>
             </DropdownMenuContent>
           </DropdownMenu>
           <edge-shad-button
@@ -377,11 +488,16 @@ const hasEntries = computed(() => {
                     <div v-else class="px-3 py-2 text-xs text-muted-foreground">
                       All template pages are already assigned.
                     </div>
+                    <DropdownMenuSeparator />
+                    <DropdownMenuItem @click="openAddLinkDialog(menuName, getFolderName(element))">
+                      <Link class="w-4 h-4" />
+                      <span>External Link</span>
+                    </DropdownMenuItem>
                   </DropdownMenuContent>
                 </DropdownMenu>
               </div>
             </div>
-            <div class="space-y-3 border-l border-dashed border-border/80 px-3 py-3 ml-4">
+            <div class="space-y-2 border-l border-dashed border-border/80 px-2 py-2 ml-3">
               <div class="flex justify-end" />
               <draggable
                 :list="element.item[getFolderName(element)]"
@@ -391,21 +507,42 @@ const hasEntries = computed(() => {
                 :group="dragGroup"
               >
                 <template #item="{ element: child, index: childIndex }">
-                  <div class="flex items-center justify-between gap-3 rounded-md border border-border/70 bg-card px-3 py-2">
-                    <div class="flex items-center gap-2">
+                  <div class="flex items-center justify-between gap-2 rounded-md border border-border/70 bg-card px-2 py-1.5">
+                    <div class="flex items-center gap-2 flex-1 min-w-0">
                       <GripVertical class="w-4 h-4 text-muted-foreground drag-handle" />
-                      <div>
-                        <div class="text-sm font-semibold flex items-center gap-1">
-                          <FileIcon class="w-4 h-4" />
-                          {{ element.item[getFolderName(element)][childIndex].name }}
+                      <div class="min-w-0">
+                        <div class="text-xs font-semibold flex items-center gap-1 leading-tight">
+                          <template v-if="isExternalLinkEntry(child)">
+                            <Link class="w-3.5 h-3.5" />
+                            {{ child.name }}
+                          </template>
+                          <template v-else>
+                            <FileIcon class="w-3.5 h-3.5" />
+                            {{ child.name }}
+                          </template>
                         </div>
-                        <div class="text-[11px] text-muted-foreground">
-                          Template: {{ resolveTemplateTitle(element.item[getFolderName(element)][childIndex].item) }}
+                        <div class="text-[10px] text-muted-foreground leading-tight">
+                          <template v-if="isExternalLinkEntry(child)">
+                            {{ child.item?.url || 'External link' }}
+                          </template>
+                          <template v-else>
+                            {{ resolveTemplateTitle(child.item) }}
+                          </template>
                         </div>
                       </div>
                     </div>
                     <div class="flex gap-1">
                       <edge-shad-button
+                        v-if="isExternalLinkEntry(child)"
+                        variant="ghost"
+                        size="icon"
+                        class="h-7 w-7"
+                        @click="openEditLinkDialog(menuName, childIndex, child, getFolderName(element))"
+                      >
+                        <Link class="w-3.5 h-3.5" />
+                      </edge-shad-button>
+                      <edge-shad-button
+                        v-else
                         variant="ghost"
                         size="icon"
                         class="h-7 w-7"
@@ -413,6 +550,25 @@ const hasEntries = computed(() => {
                       >
                         <FilePen class="w-3.5 h-3.5" />
                       </edge-shad-button>
+                      <DropdownMenu v-if="isPageEntry(child)">
+                        <DropdownMenuTrigger as-child>
+                          <edge-shad-button
+                            variant="ghost"
+                            size="icon"
+                            class="h-7 w-7"
+                          >
+                            <FileCog class="w-3.5 h-3.5" />
+                          </edge-shad-button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align="end" class="w-48">
+                          <DropdownMenuCheckboxItem v-model="child.disableRename">
+                            Disable Rename
+                          </DropdownMenuCheckboxItem>
+                          <DropdownMenuCheckboxItem v-model="child.disableDelete">
+                            Disable Delete
+                          </DropdownMenuCheckboxItem>
+                        </DropdownMenuContent>
+                      </DropdownMenu>
                       <edge-shad-button
                         variant="ghost"
                         size="icon"
@@ -435,21 +591,42 @@ const hasEntries = computed(() => {
               </draggable>
             </div>
           </div>
-          <div v-else class="flex items-center justify-between gap-3 rounded-md border border-border/70 bg-card px-3 py-2">
-            <div class="flex items-center gap-2">
+          <div v-else class="flex items-center justify-between gap-2 rounded-md border border-border/70 bg-card px-2 py-1.5">
+            <div class="flex items-center gap-2 flex-1 min-w-0">
               <GripVertical class="w-4 h-4 text-muted-foreground drag-handle" />
-              <div>
-                <div class="text-sm font-semibold flex items-center gap-1">
-                  <FileIcon class="w-4 h-4" />
-                  {{ element.name }}
+              <div class="min-w-0">
+                <div class="text-xs font-semibold flex items-center gap-1 leading-tight">
+                  <template v-if="isExternalLinkEntry(element)">
+                    <Link class="w-3.5 h-3.5" />
+                    {{ element.name }}
+                  </template>
+                  <template v-else>
+                    <FileIcon class="w-3.5 h-3.5" />
+                    {{ element.name }}
+                  </template>
                 </div>
-                <div class="text-[11px] text-muted-foreground">
-                  Template: {{ resolveTemplateTitle(element.item) }}
+                <div class="text-[10px] text-muted-foreground leading-tight">
+                  <template v-if="isExternalLinkEntry(element)">
+                    {{ element.item?.url || 'External link' }}
+                  </template>
+                  <template v-else>
+                    {{ resolveTemplateTitle(element.item) }}
+                  </template>
                 </div>
               </div>
             </div>
             <div class="flex gap-1">
               <edge-shad-button
+                v-if="isExternalLinkEntry(element)"
+                variant="ghost"
+                size="icon"
+                class="h-7 w-7"
+                @click="openEditLinkDialog(menuName, index, element)"
+              >
+                <Link class="w-3.5 h-3.5" />
+              </edge-shad-button>
+              <edge-shad-button
+                v-else
                 variant="ghost"
                 size="icon"
                 class="h-7 w-7"
@@ -457,6 +634,25 @@ const hasEntries = computed(() => {
               >
                 <FilePen class="w-3.5 h-3.5" />
               </edge-shad-button>
+              <DropdownMenu v-if="isPageEntry(element)">
+                <DropdownMenuTrigger as-child>
+                  <edge-shad-button
+                    variant="ghost"
+                    size="icon"
+                    class="h-7 w-7"
+                  >
+                    <FileCog class="w-3.5 h-3.5" />
+                  </edge-shad-button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end" class="w-48">
+                  <DropdownMenuCheckboxItem v-model="element.disableRename">
+                    Disable Rename
+                  </DropdownMenuCheckboxItem>
+                  <DropdownMenuCheckboxItem v-model="element.disableDelete">
+                    Disable Delete
+                  </DropdownMenuCheckboxItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
               <edge-shad-button
                 variant="ghost"
                 size="icon"
@@ -514,6 +710,46 @@ const hasEntries = computed(() => {
     </DialogContent>
   </edge-shad-dialog>
 
+  <edge-shad-dialog v-model="state.linkDialog.open">
+    <DialogContent class="pt-10">
+      <DialogHeader>
+        <DialogTitle>
+          {{ state.linkDialog.mode === 'edit' ? 'Edit External Link' : 'Add External Link' }}
+        </DialogTitle>
+      </DialogHeader>
+      <div class="space-y-4">
+        <edge-shad-input
+          v-model="state.linkDialog.name"
+          name="linkName"
+          label="Label"
+          placeholder="Link label"
+        />
+        <edge-shad-input
+          v-model="state.linkDialog.url"
+          name="linkUrl"
+          label="URL"
+          placeholder="https://example.com or tel:123-456-7890"
+        />
+      </div>
+      <DialogFooter class="pt-2">
+        <edge-shad-button
+          variant="destructive"
+          @click="state.linkDialog.open = false"
+        >
+          Cancel
+        </edge-shad-button>
+        <edge-shad-button
+          type="button"
+          class="bg-slate-800 hover:bg-slate-500 text-white"
+          :disabled="!state.linkDialog.name?.trim()?.length || !state.linkDialog.url?.trim()?.length"
+          @click="submitLinkDialog"
+        >
+          {{ state.linkDialog.mode === 'edit' ? 'Update Link' : 'Add Link' }}
+        </edge-shad-button>
+      </DialogFooter>
+    </DialogContent>
+  </edge-shad-dialog>
+
   <edge-shad-dialog v-model="state.renameDialog.open">
     <DialogContent class="pt-10">
       <DialogHeader>

package/edge/components/cms/themeEditor.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { toTypedSchema } from '@vee-validate/zod'
+import { FolderCog } from 'lucide-vue-next'
 import * as z from 'zod'
 const props = defineProps({
   themeId: {
@@ -10,6 +11,7 @@ const props = defineProps({
 
 const emit = defineEmits(['head'])
 const edgeFirebase = inject('edgeFirebase')
+const { createDefaults: createSiteSettingsDefaults } = useSiteSettingsTemplate()
 const state = reactive({
   filter: '',
   workingDoc: {},
@@ -82,6 +84,9 @@ const state = reactive({
   }
 }`,
       },
+      extraCSS: {
+        value: '',
+      },
       version: 1,
       defaultPages: { value: [] },
       defaultMenus: {
@@ -90,10 +95,12 @@ const state = reactive({
           'Not In Menu': [],
         },
       },
+      defaultSiteSettings: { value: createSiteSettingsDefaults() },
     },
   },
   mounted: false,
   loading: false,
+  defaultSettingsOpen: false,
 })
 
 const blockSchema = toTypedSchema(z.object({
@@ -106,14 +113,19 @@ onMounted(() => {
   // state.mounted = true
 })
 
-const headObject = computed(() => {
+const lastValidHead = ref({})
+const lastValidTheme = ref({})
+
+const parseJsonSafe = (value, fallback) => {
   try {
-    return JSON.parse(state.workingDoc.headJSON || '{}')
+    return JSON.parse(value || '{}')
   }
-  catch (e) {
-    return {}
+  catch (error) {
+    return fallback
   }
-})
+}
+
+const headObject = computed(() => lastValidHead.value)
 
 watch(headObject, (newHeadElements) => {
   emit('head', newHeadElements)
@@ -153,6 +165,19 @@ const ensureDefaultMenusObject = (doc = state.workingDoc) => {
   return doc.defaultMenus
 }
 
+const ensureDefaultSiteSettings = (doc = state.workingDoc) => {
+  if (!doc)
+    return {}
+  if (!doc.defaultSiteSettings || typeof doc.defaultSiteSettings !== 'object' || Array.isArray(doc.defaultSiteSettings))
+    doc.defaultSiteSettings = createSiteSettingsDefaults()
+  const defaults = createSiteSettingsDefaults()
+  for (const key of Object.keys(defaults)) {
+    if (doc.defaultSiteSettings[key] === undefined)
+      doc.defaultSiteSettings[key] = defaults[key]
+  }
+  return doc.defaultSiteSettings
+}
+
 const collectTemplateIdsFromMenus = (menus = {}) => {
   const ids = new Set()
   const traverse = (items = []) => {
@@ -229,6 +254,8 @@ const hydrateMenusFromDefaultPages = (doc = state.workingDoc) => {
     return {
       name: slug,
       item: entry.pageId,
+      disableRename: !!entry?.disableRename,
+      disableDelete: !!entry?.disableDelete,
     }
   })
 }
@@ -245,6 +272,8 @@ const flattenMenusToDefaultPages = (menus = {}) => {
         collected.push({
           pageId: entry.item,
           name: templatePageName(entry.item, entry.name),
+          disableRename: !!entry?.disableRename,
+          disableDelete: !!entry?.disableDelete,
         })
       }
       else if (typeof entry.item === 'object') {
@@ -266,7 +295,11 @@ const syncDefaultPagesFromMenus = () => {
   const defaults = ensureDefaultPagesArray()
   const sameLength = defaults.length === normalized.length
   const sameOrder = sameLength && defaults.every((entry, index) => entry.pageId === normalized[index].pageId)
-  if (sameLength && sameOrder)
+  const sameFlags = sameLength && defaults.every((entry, index) => (
+    !!entry.disableRename === !!normalized[index]?.disableRename
+    && !!entry.disableDelete === !!normalized[index]?.disableDelete
+  ))
+  if (sameLength && sameOrder && sameFlags)
     return
   defaults.splice(0, defaults.length, ...normalized)
 }
@@ -275,6 +308,7 @@ const editorDocUpdates = (workingDoc) => {
   state.workingDoc = workingDoc
   ensureDefaultPagesArray(state.workingDoc)
   ensureDefaultMenusObject(state.workingDoc)
+  ensureDefaultSiteSettings(state.workingDoc)
   hydrateMenusFromDefaultPages(state.workingDoc)
   syncDefaultPagesFromMenus()
 }
@@ -312,6 +346,14 @@ watch(() => state.workingDoc?.defaultMenus, () => {
   syncDefaultPagesFromMenus()
 }, { deep: true })
 
+watch(() => state.workingDoc?.headJSON, (value) => {
+  lastValidHead.value = parseJsonSafe(value, lastValidHead.value)
+}, { immediate: true })
+
+watch(() => state.workingDoc?.theme, (value) => {
+  lastValidTheme.value = parseJsonSafe(value, lastValidTheme.value)
+}, { immediate: true })
+
 onBeforeMount(async () => {
   if (!edgeFirebase.data?.[`organizations/${edgeGlobal.edgeState.currentOrganization}/sites`]) {
     await edgeFirebase.startSnapshot(`organizations/${edgeGlobal.edgeState.currentOrganization}/sites`)
@@ -359,12 +401,21 @@ onBeforeMount(async () => {
       </template>
       <template #main="slotProps">
         <div class="pt-4 flex flex-col gap-6 lg:flex-row">
-          <div class="lg:w-1/3 lg:max-w-sm w-full space-y-4">
+          <div class="lg:w-72 lg:max-w-xs w-full space-y-4">
             <Card class="h-full">
               <CardHeader class="pb-2">
-                <CardTitle class="text-base">
-                  Default Template Pages
-                </CardTitle>
+                <div class="flex items-center justify-between gap-2">
+                  <CardTitle class="text-base">
+                    Default Template Pages
+                  </CardTitle>
+                  <edge-shad-button
+                    size="icon"
+                    type="text"
+                    @click="state.defaultSettingsOpen = true"
+                  >
+                    <FolderCog class="h-4 w-4" />
+                  </edge-shad-button>
+                </div>
                 <CardDescription class="text-xs">
                   Choose which template pages are created for new sites and organize them into Site Menu or Not In Menu.
                 </CardDescription>
@@ -409,6 +460,14 @@ onBeforeMount(async () => {
                   height="400px"
                   class="mb-4 w-full"
                 />
+                <edge-cms-code-editor
+                  v-model="slotProps.workingDoc.extraCSS"
+                  title="Extra CSS"
+                  language="css"
+                  name="extraCSS"
+                  height="300px"
+                  class="mb-4 w-full"
+                />
               </div>
               <div class="w-1/2">
                 <div class="w-full mx-auto bg-white drop-shadow-[4px_4px_6px_rgba(0,0,0,0.5)] shadow-lg shadow-black/30">
@@ -416,7 +475,7 @@ onBeforeMount(async () => {
                     :site-id="edgeGlobal.edgeState.blockEditorSite"
                     class="!h-[calc(100vh-220px)] overflow-y-auto"
                     list-only
-                    :theme="JSON.parse(slotProps.workingDoc.theme)"
+                    :theme="lastValidTheme"
                   />
                 </div>
               </div>
@@ -425,5 +484,30 @@ onBeforeMount(async () => {
         </div>
       </template>
     </edge-editor>
+    <Sheet v-model:open="state.defaultSettingsOpen">
+      <SheetContent side="left" class="w-full md:w-1/2 max-w-none sm:max-w-none max-w-2xl">
+        <SheetHeader>
+          <SheetTitle>Default Site Settings</SheetTitle>
+          <SheetDescription>
+            These values seed new sites created with this theme.
+          </SheetDescription>
+        </SheetHeader>
+        <div class="p-6 h-[calc(100vh-140px)] overflow-y-auto">
+          <edge-cms-site-settings-form
+            v-if="state.workingDoc"
+            :settings="state.workingDoc.defaultSiteSettings"
+            :show-users="false"
+            :show-theme-fields="false"
+            :is-admin="true"
+            :enable-media-picker="false"
+          />
+        </div>
+        <SheetFooter class="pt-2">
+          <edge-shad-button class="w-full" @click="state.defaultSettingsOpen = false">
+            Done
+          </edge-shad-button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
   </div>
 </template>

package/edge/components/editor.vue

@@ -569,6 +569,7 @@ const onError = async () => {
           <AlertDescription>
             {{ state.successMessage }}
           </AlertDescription>
+          <slot name="success-alert" :message="state.successMessage" :working-doc="state.workingDoc" />
         </Alert>
         <slot name="main" :title="title" :on-cancel="onCancel" :submitting="state.submitting" :unsaved-changes="unsavedChanges" :on-submit="triggerSubmit" :working-doc="state.workingDoc">
           <div class="flex flex-wrap justify-between">