@edgedev/create-edge-app 1.2.32 → 1.2.34

package/edge/components/cms/sitesManager.vue

@@ -7,6 +7,7 @@ const isAiBusy = status => status === 'queued' || status === 'running'
 const state = reactive({
   filter: '',
 })
+const cmsMultiOrg = useState('cmsMultiOrg', () => false)
 
 const isAdmin = computed(() => {
   return edgeGlobal.isAdminGlobal(edgeFirebase).value
@@ -25,21 +26,21 @@ const canAddSite = computed(() => {
 })
 
 const queryField = computed(() => {
-  if (!isAdmin.value) {
+  if (!isAdmin.value && !cmsMultiOrg.value) {
     return 'users'
   }
   return ''
 })
 
 const queryValue = computed(() => {
-  if (!isAdmin.value) {
+  if (!isAdmin.value && !cmsMultiOrg.value) {
     return [edgeFirebase?.user?.uid]
   }
   return ''
 })
 
 const queryOperator = computed(() => {
-  if (!isAdmin.value) {
+  if (!isAdmin.value && !cmsMultiOrg.value) {
     return 'array-contains-any'
   }
   return ''
@@ -100,7 +101,7 @@ const queryOperator = computed(() => {
         <Separator class="dark:bg-slate-600" />
       </template>
       <div
-        v-if="slotProps.filtered.length === 0 && !isAdmin && disableAddSiteForNonAdmin"
+        v-if="slotProps.filtered.length === 0 && !isAdmin && disableAddSiteForNonAdmin && !cmsMultiOrg"
         class="px-4 py-6 text-sm text-muted-foreground"
       >
         No sites are assigned to your account. Contact an organization admin to add a site for you.

package/edge/components/cms/themeEditor.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { toTypedSchema } from '@vee-validate/zod'
-import { FolderCog } from 'lucide-vue-next'
+import { Download, FolderCog } from 'lucide-vue-next'
 import * as z from 'zod'
 const props = defineProps({
   themeId: {
@@ -11,98 +11,21 @@ const props = defineProps({
 
 const emit = defineEmits(['head'])
 const edgeFirebase = inject('edgeFirebase')
+const { themes: themeNewDocSchema } = useCmsNewDocs()
 const { createDefaults: createSiteSettingsDefaults } = useSiteSettingsTemplate()
 const state = reactive({
   filter: '',
   workingDoc: {},
   newDocs: {
-    themes: {
-      name: { value: '' },
-      headJSON: {
-        value: `{
-  "link": [
-    {
-      "rel": "preconnect",
-      "href": "https://fonts.googleapis.com"
-    },
-    {
-      "rel": "preconnect",
-      "href": "https://fonts.gstatic.com",
-      "crossorigin": ""
-    },
-    {
-      "rel": "stylesheet",
-      "href": "https://fonts.googleapis.com/css2?family=Overpass:wght@400;700&family=Kode+Mono:wght@400;700&display=swap"
-    }
-  ]
-}`,
-      },
-      theme: {
-        value: `{
-  "extend": {
-    "colors": {
-      "brand": "#3B82F6",
-      "accent": "#F59E0B",
-      "surface": "#FAFAFA",
-      "subtle": "#F3F4F6",
-      "text": "#1F2937",
-      "muted": "#9CA3AF",
-      "success": "#22C55E",
-      "danger": "#EF4444",
-      "border": "#E5E7EB",
-      "ring": "#93C5FD",
-      "link": "#3B82F6",
-      "linkHover": "#1D4ED8",
-      "navBg": "#000000",
-      "navText": "#FFFFFF",
-      "navMuted": "#6B7280",
-      "navBorder": "",
-      "navActive": "#3B82F6",
-      "navHoverBg": "",
-      "navActiveBg": "",
-      "sideNavBg": "#FFFFFF",
-      "sideNavText": "#000000",
-      "sideNavActive": "#AFBD23"
-    },
-    "fontFamily": {
-      "sans": ["Overpass", "sans-serif"],
-      "serif": ["Kode Mono", "monospace"],
-      "mono": ["Overpass", "sans-serif"],
-      "brand": ["Kode Mono", "monospace"]
-    }
-  },
-  "apply": {},
-  "slots": {},
-  "variants": {
-    "light": {
-      "apply": {}
-    },
-    "dark": {
-      "apply": {},
-      "slots": {}
-    }
-  }
-}`,
-      },
-      extraCSS: {
-        value: '',
-      },
-      version: 1,
-      defaultPages: { value: [] },
-      defaultMenus: {
-        value: {
-          'Site Root': [],
-          'Not In Menu': [],
-        },
-      },
-      defaultSiteSettings: { value: createSiteSettingsDefaults() },
-    },
+    themes: themeNewDocSchema.value,
   },
   mounted: false,
   loading: false,
   defaultSettingsOpen: false,
 })
 
+const editorViewportHeight = 'calc(100vh - 420px)'
+
 const blockSchema = toTypedSchema(z.object({
   name: z.string({
     required_error: 'Name is required',
@@ -126,6 +49,16 @@ const parseJsonSafe = (value, fallback) => {
 }
 
 const headObject = computed(() => lastValidHead.value)
+const previewTheme = computed(() => {
+  const isObjectTheme = !!lastValidTheme.value
+    && typeof lastValidTheme.value === 'object'
+    && !Array.isArray(lastValidTheme.value)
+  const baseTheme = isObjectTheme ? lastValidTheme.value : {}
+  return {
+    ...baseTheme,
+    extraCSS: typeof state.workingDoc?.extraCSS === 'string' ? state.workingDoc.extraCSS : '',
+  }
+})
 
 watch(headObject, (newHeadElements) => {
   emit('head', newHeadElements)
@@ -325,6 +258,62 @@ const templatePageOptions = computed(() => {
     .sort((a, b) => a.label.localeCompare(b.label))
 })
 
+const themesCollectionPath = computed(() => `${edgeGlobal.edgeState.organizationDocPath}/themes`)
+const themesCollection = computed(() => edgeFirebase.data?.[themesCollectionPath.value] || {})
+
+const downloadJsonFile = (payload, filename) => {
+  if (typeof window === 'undefined')
+    return
+  const blob = new Blob([JSON.stringify(payload, null, 2)], { type: 'application/json' })
+  const objectUrl = URL.createObjectURL(blob)
+  const anchor = document.createElement('a')
+  anchor.href = objectUrl
+  anchor.download = filename
+  document.body.appendChild(anchor)
+  anchor.click()
+  anchor.remove()
+  URL.revokeObjectURL(objectUrl)
+}
+
+const isPlainObject = value => !!value && typeof value === 'object' && !Array.isArray(value)
+
+const cloneSchemaValue = (value) => {
+  if (isPlainObject(value) || Array.isArray(value))
+    return edgeGlobal.dupObject(value)
+  return value
+}
+
+const getDocDefaultsFromSchema = (schema = {}) => {
+  const defaults = {}
+  for (const [key, schemaEntry] of Object.entries(schema || {})) {
+    const hasValueProp = isPlainObject(schemaEntry) && Object.prototype.hasOwnProperty.call(schemaEntry, 'value')
+    const baseValue = hasValueProp ? schemaEntry.value : schemaEntry
+    defaults[key] = cloneSchemaValue(baseValue)
+  }
+  return defaults
+}
+
+const getThemeDocDefaults = () => getDocDefaultsFromSchema(themeNewDocSchema.value || {})
+
+const notifySuccess = (message) => {
+  edgeFirebase?.toast?.success?.(message)
+}
+
+const notifyError = (message) => {
+  edgeFirebase?.toast?.error?.(message)
+}
+
+const exportCurrentTheme = () => {
+  const doc = themesCollection.value?.[props.themeId]
+  if (!doc || !doc.docId) {
+    notifyError('Save this theme before exporting.')
+    return
+  }
+  const exportPayload = { ...getThemeDocDefaults(), ...doc }
+  downloadJsonFile(exportPayload, `theme-${doc.docId}.json`)
+  notifySuccess(`Exported theme "${doc.docId}".`)
+}
+
 watch (sites, async (newSites) => {
   state.loading = true
   const selectedSite = String(edgeGlobal.edgeState.blockEditorSite || '').trim()
@@ -380,7 +369,9 @@ onBeforeMount(async () => {
       :doc-id="props.themeId"
       :schema="blockSchema"
       :new-doc-schema="state.newDocs.themes"
-      class="w-full mx-auto flex-1 bg-transparent flex flex-col border-none shadow-none"
+      header-class="py-2 bg-secondary text-foreground rounded-none sticky top-0 border"
+      class="w-full mx-auto flex-1 bg-transparent flex flex-col border-none shadow-none pt-0 px-0"
+      card-content-class="px-0"
       :show-footer="false"
       :no-close-after-save="true"
       :working-doc-overrides="state.workingDoc"
@@ -391,99 +382,142 @@ onBeforeMount(async () => {
         {{ slotProps.title }}
       </template>
       <template #header-center>
-        <div class="w-full flex gap-1 px-4">
+        <div class="w-full flex gap-2 px-4 items-center">
           <div class="w-full">
             <edge-shad-select
               v-if="!state.loading"
               v-model="edgeGlobal.edgeState.blockEditorSite"
-              label="Preview Site"
               name="site"
               :items="sites.map(s => ({ title: s.name, name: s.docId }))"
               placeholder="Select Site"
               class="w-full"
             />
           </div>
+          <div class="flex items-center gap-2">
+            <edge-shad-button
+              type="button"
+              size="icon"
+              variant="outline"
+              class="h-9 w-9"
+              :disabled="props.themeId === 'new' || !themesCollection?.[props.themeId]"
+              title="Export Theme"
+              aria-label="Export Theme"
+              @click="exportCurrentTheme"
+            >
+              <Download class="h-4 w-4" />
+            </edge-shad-button>
+          </div>
         </div>
       </template>
       <template #main="slotProps">
-        <div class="pt-4 flex flex-col gap-6 lg:flex-row">
-          <div class="lg:w-72 lg:max-w-xs w-full space-y-4">
-            <Card class="h-full">
-              <CardHeader class="pb-2">
-                <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>
-              </CardHeader>
-              <CardContent>
-                <edge-cms-theme-default-menu
-                  v-if="slotProps.workingDoc"
-                  v-model="slotProps.workingDoc.defaultMenus"
-                  :template-options="templatePageOptions"
-                  :template-pages="templatePages"
-                />
-              </CardContent>
-            </Card>
-          </div>
-          <div class="flex-1 space-y-4">
-            <edge-shad-input
-              v-model="slotProps.workingDoc.name"
-              label="Theme Name"
-              name="name"
-            />
-            <div class="flex flex-col gap-4 xl:flex-row">
-              <div class="w-1/2">
-                <edge-cms-code-editor
-                  v-model="slotProps.workingDoc.theme"
-                  title="Theme JSON"
-                  language="json"
-                  name="content"
-                  height="400px"
-                  class="mb-4 w-full"
-                />
-                <edge-cms-font-upload
-                  v-if="slotProps.workingDoc"
-                  v-model:head-json="slotProps.workingDoc.headJSON"
-                  :theme-id="props.themeId"
-                  class="mb-4"
-                />
-                <edge-cms-code-editor
-                  v-model="slotProps.workingDoc.headJSON"
-                  title="Head JSON"
-                  language="json"
-                  name="headJSON"
-                  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">
-                  <edge-cms-block-picker
-                    :site-id="edgeGlobal.edgeState.blockEditorSite"
-                    class="!h-[calc(100vh-220px)] overflow-y-auto"
-                    list-only
-                    :theme="lastValidTheme"
+        <div class="pt-4 space-y-4">
+          <edge-shad-input
+            v-model="slotProps.workingDoc.name"
+            label="Theme Name"
+            name="name"
+          />
+          <div class="flex flex-col gap-4 xl:flex-row">
+            <div class="w-full xl:w-1/2">
+              <Tabs class="w-full" default-value="theme-json">
+                <TabsList class="w-full mt-3 bg-secondary rounded-sm grid grid-cols-2 xl:grid-cols-5">
+                  <TabsTrigger value="theme-json" class="w-full text-black data-[state=active]:bg-black data-[state=active]:text-white">
+                    Theme JSON
+                  </TabsTrigger>
+                  <TabsTrigger value="head-json" class="w-full text-black data-[state=active]:bg-black data-[state=active]:text-white">
+                    Head JSON
+                  </TabsTrigger>
+                  <TabsTrigger value="custom-fonts" class="w-full text-black data-[state=active]:bg-black data-[state=active]:text-white">
+                    Custom Fonts
+                  </TabsTrigger>
+                  <TabsTrigger value="extra-css" class="w-full text-black data-[state=active]:bg-black data-[state=active]:text-white">
+                    Extra CSS
+                  </TabsTrigger>
+                  <TabsTrigger value="default-templates" class="w-full text-black data-[state=active]:bg-black data-[state=active]:text-white">
+                    Default Templates
+                  </TabsTrigger>
+                </TabsList>
+
+                <TabsContent value="theme-json" class="mt-4">
+                  <edge-cms-code-editor
+                    v-model="slotProps.workingDoc.theme"
+                    title="Theme JSON"
+                    language="json"
+                    name="content"
+                    :height="editorViewportHeight"
+                    class="w-full"
+                  />
+                </TabsContent>
+
+                <TabsContent value="head-json" class="mt-4">
+                  <edge-cms-code-editor
+                    v-model="slotProps.workingDoc.headJSON"
+                    title="Head JSON"
+                    language="json"
+                    name="headJSON"
+                    :height="editorViewportHeight"
+                    class="w-full"
+                  />
+                </TabsContent>
+
+                <TabsContent value="custom-fonts" class="mt-4">
+                  <edge-cms-font-upload
+                    v-if="slotProps.workingDoc"
+                    v-model:head-json="slotProps.workingDoc.headJSON"
+                    :theme-id="props.themeId"
+                    class="w-full"
                   />
-                </div>
+                </TabsContent>
+
+                <TabsContent value="extra-css" class="mt-4">
+                  <edge-cms-code-editor
+                    v-model="slotProps.workingDoc.extraCSS"
+                    title="Extra CSS"
+                    language="css"
+                    name="extraCSS"
+                    :height="editorViewportHeight"
+                    class="w-full"
+                  />
+                </TabsContent>
+
+                <TabsContent value="default-templates" class="mt-4">
+                  <Card class="h-full">
+                    <CardHeader class="pb-2">
+                      <div class="flex items-center justify-between gap-2">
+                        <CardTitle class="text-base">
+                          Default Templates
+                        </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>
+                    </CardHeader>
+                    <CardContent>
+                      <edge-cms-theme-default-menu
+                        v-if="slotProps.workingDoc"
+                        v-model="slotProps.workingDoc.defaultMenus"
+                        :template-options="templatePageOptions"
+                        :template-pages="templatePages"
+                      />
+                    </CardContent>
+                  </Card>
+                </TabsContent>
+              </Tabs>
+            </div>
+            <div class="w-full xl: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">
+                <edge-cms-block-picker
+                  :site-id="edgeGlobal.edgeState.blockEditorSite"
+                  class="!h-[calc(100vh-220px)] overflow-y-auto"
+                  list-only
+                  :theme="previewTheme"
+                />
               </div>
             </div>
           </div>

package/edge/components/editor.vue

@@ -27,6 +27,10 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
+  headerClass: {
+    type: String,
+    default: 'py-4 bg-secondary text-foreground rounded-none sticky top-0',
+  },
   class: {
     type: String,
     default: '',
@@ -583,7 +587,7 @@ const onError = async () => {
       @error="onError"
     >
       <slot name="header" :on-submit="triggerSubmit" :on-cancel="onCancel" :submitting="state.submitting" :unsaved-changes="unsavedChanges" :title="title" :working-doc="state.workingDoc" :errors="state.errors">
-        <edge-menu v-if="props.showHeader" class="py-4 bg-secondary text-foreground rounded-none sticky top-0">
+        <edge-menu v-if="props.showHeader" :class="props.headerClass">
           <template #start>
             <slot name="header-start" :unsaved-changes="unsavedChanges" :title="title" :errors="state.errors" :working-doc="state.workingDoc">
               <FilePenLine class="mr-2" />

package/edge/composables/global.ts

@@ -439,22 +439,54 @@ const allowMenuItem = (item: any, isAdmin: boolean) => {
   return true
 }
 
+const resolveCmsCollectionTokens = (input: any, currentSite: any = '') => {
+  const orgId = String(edgeState.currentOrganization || '')
+  const siteId = String(currentSite || '')
+
+  const replaceTokens = (raw: string) => {
+    let resolved = raw
+    if (orgId && resolved.includes('{orgId}'))
+      resolved = resolved.replaceAll('{orgId}', orgId)
+    if (siteId && resolved.includes('{siteId}'))
+      resolved = resolved.replaceAll('{siteId}', siteId)
+    return resolved
+  }
+
+  const walk = (value: any): any => {
+    if (typeof value === 'string')
+      return replaceTokens(value)
+    if (Array.isArray(value))
+      return value.map(item => walk(item))
+    if (value && typeof value === 'object') {
+      const out: Record<string, any> = {}
+      for (const [key, child] of Object.entries(value))
+        out[key] = walk(child)
+      return out
+    }
+    return value
+  }
+
+  return walk(input)
+}
+
 const cmsCollectionData = async (edgeFirebase: any, value: any, meta: any, currentSite: any = '') => {
   for (const key in meta) {
     if (meta[key]?.collection) {
       const staticSearch = new edgeFirebase.SearchStaticData()
 
-      const currentQuery = meta[key].collection.query || []
+      const currentQuery = Array.isArray(meta[key].collection.query)
+        ? resolveCmsCollectionTokens(dupObject(meta[key].collection.query), currentSite)
+        : []
       for (const queryKey in meta[key].queryItems || {}) {
         console.log('key', queryKey)
         if (meta[key].queryItems[queryKey]) {
           const findIndex = currentQuery.findIndex((q: any) => q.field === queryKey)
           const queryOption = meta[key]?.queryOptions?.find((o: any) => o.field === queryKey)
           const operator = queryOption?.operator || '=='
-          let value = meta[key].queryItems[queryKey]
-          if (operator === 'array-contains-any' && !Array.isArray(value))
-            value = [value]
-          const newQuery = { field: queryKey, operator, value }
+          let queryValue = resolveCmsCollectionTokens(meta[key].queryItems[queryKey], currentSite)
+          if (operator === 'array-contains-any' && !Array.isArray(queryValue))
+            queryValue = [queryValue]
+          const newQuery = { field: queryKey, operator, value: queryValue }
           if (findIndex > -1) {
             currentQuery[findIndex] = newQuery
           }

package/edge/composables/useCmsNewDocs.js

@@ -0,0 +1,100 @@
+export const useCmsNewDocs = () => {
+  const { createDefaults: createSiteSettingsDefaults } = useSiteSettingsTemplate()
+
+  const blocks = useState('edge-cms-new-docs-blocks', () => ({
+    name: { value: '' },
+    content: { value: '' },
+    tags: { value: [] },
+    themes: { value: [] },
+    previewType: { value: 'light' },
+    synced: { value: false },
+    version: 1,
+  }))
+
+  const themes = useState('edge-cms-new-docs-themes', () => ({
+    name: { value: '' },
+    headJSON: {
+      value: `{
+  "link": [
+    {
+      "rel": "preconnect",
+      "href": "https://fonts.googleapis.com"
+    },
+    {
+      "rel": "preconnect",
+      "href": "https://fonts.gstatic.com",
+      "crossorigin": ""
+    },
+    {
+      "rel": "stylesheet",
+      "href": "https://fonts.googleapis.com/css2?family=Overpass:wght@400;700&family=Kode+Mono:wght@400;700&display=swap"
+    }
+  ]
+}`,
+    },
+    theme: {
+      value: `{
+  "extend": {
+    "colors": {
+      "brand": "#3B82F6",
+      "accent": "#F59E0B",
+      "surface": "#FAFAFA",
+      "subtle": "#F3F4F6",
+      "text": "#1F2937",
+      "muted": "#9CA3AF",
+      "success": "#22C55E",
+      "danger": "#EF4444",
+      "border": "#E5E7EB",
+      "ring": "#93C5FD",
+      "link": "#3B82F6",
+      "linkHover": "#1D4ED8",
+      "navBg": "#000000",
+      "navText": "#FFFFFF",
+      "navMuted": "#6B7280",
+      "navBorder": "",
+      "navActive": "#3B82F6",
+      "navHoverBg": "",
+      "navActiveBg": "",
+      "sideNavBg": "#FFFFFF",
+      "sideNavText": "#000000",
+      "sideNavActive": "#AFBD23"
+    },
+    "fontFamily": {
+      "sans": ["Overpass", "sans-serif"],
+      "serif": ["Kode Mono", "monospace"],
+      "mono": ["Overpass", "sans-serif"],
+      "brand": ["Kode Mono", "monospace"]
+    }
+  },
+  "apply": {},
+  "slots": {},
+  "variants": {
+    "light": {
+      "apply": {}
+    },
+    "dark": {
+      "apply": {},
+      "slots": {}
+    }
+  }
+}`,
+    },
+    extraCSS: {
+      value: '',
+    },
+    version: 1,
+    defaultPages: { value: [] },
+    defaultMenus: {
+      value: {
+        'Site Root': [],
+        'Not In Menu': [],
+      },
+    },
+    defaultSiteSettings: { value: createSiteSettingsDefaults() },
+  }))
+
+  return {
+    blocks,
+    themes,
+  }
+}

package/edge/composables/useEdgeCmsDialogPositionFix.js

@@ -0,0 +1,19 @@
+import { useHead } from '#imports'
+
+export const useEdgeCmsDialogPositionFix = () => {
+  useHead({
+    style: [
+      {
+        key: 'edge-cms-dialog-position-fix',
+        id: 'edge-cms-dialog-position-fix',
+        children: `
+.fixed.left-1\\/2.top-1\\/2.-translate-x-1\\/2.-translate-y-1\\/2 {
+  translate: initial !important;
+  --un-translate-x: initial !important;
+  --un-translate-y: initial !important;
+}
+        `,
+      },
+    ],
+  })
+}