@edgedev/create-edge-app 1.2.33 → 1.2.35

package/edge/components/cms/siteSettingsForm.vue

@@ -480,13 +480,17 @@ watch(() => props.settings?.forwardApex, (value) => {
           </div>
           <div class="space-y-2 text-sm">
             <div class="grid grid-cols-[70px_1fr] gap-3">
-              <div class="text-muted-foreground">CNAME</div>
+              <div class="text-muted-foreground">
+                CNAME
+              </div>
               <div class="font-mono">
                 {{ entry?.dnsRecords?.www?.name || 'www' }} → {{ entry?.dnsRecords?.www?.value || pagesDomain }}
               </div>
             </div>
             <div class="grid grid-cols-[70px_1fr] gap-3">
-              <div class="text-muted-foreground">CNAME</div>
+              <div class="text-muted-foreground">
+                CNAME
+              </div>
               <div class="font-mono">
                 {{ entry?.dnsRecords?.apex?.name || '@' }} → {{ entry?.dnsRecords?.apex?.value || pagesDomain }}
               </div>
@@ -532,7 +536,7 @@ watch(() => props.settings?.forwardApex, (value) => {
         item-value="value"
         @update:model-value="value => (props.settings.theme = value || '')"
       />
-      <edge-shad-select
+      <!-- <edge-shad-select
         :model-value="props.settings.menuPosition || ''"
         name="menuPosition"
         label="Menu Position"
@@ -542,7 +546,7 @@ watch(() => props.settings?.forwardApex, (value) => {
         item-title="label"
         item-value="value"
         @update:model-value="value => (props.settings.menuPosition = value || '')"
-      />
+      /> -->
     </TabsContent>
     <TabsContent value="branding" class="pt-4 space-y-4">
       <div v-if="props.enableMediaPicker && props.siteId" class="space-y-2">
@@ -562,7 +566,7 @@ watch(() => props.settings?.forwardApex, (value) => {
             <img
               :src="props.settings.logo"
               alt="Logo preview"
-              :class="['max-h-16 max-w-[220px] h-auto w-auto rounded-md border border-border object-contain', previewBackgroundClass(props.settings.logo)]"
+              class="max-h-16 max-w-[220px] h-auto w-auto rounded-md border border-border object-contain" :class="[previewBackgroundClass(props.settings.logo)]"
             >
             <edge-shad-button
               type="button"
@@ -612,7 +616,7 @@ watch(() => props.settings?.forwardApex, (value) => {
             <img
               :src="props.settings.logoLight"
               alt="Light logo preview"
-              :class="['max-h-16 max-w-[220px] h-auto w-auto rounded-md border border-border object-contain', previewBackgroundClass(props.settings.logoLight)]"
+              class="max-h-16 max-w-[220px] h-auto w-auto rounded-md border border-border object-contain" :class="[previewBackgroundClass(props.settings.logoLight)]"
             >
             <edge-shad-button
               type="button"
@@ -666,7 +670,7 @@ watch(() => props.settings?.forwardApex, (value) => {
               <img
                 :src="props.settings.brandLogoDark"
                 alt="Brand dark logo preview"
-                :class="['max-h-16 max-w-[220px] h-auto w-auto rounded-md border border-border object-contain', previewBackgroundClass(props.settings.brandLogoDark)]"
+                class="max-h-16 max-w-[220px] h-auto w-auto rounded-md border border-border object-contain" :class="[previewBackgroundClass(props.settings.brandLogoDark)]"
               >
               <edge-shad-button
                 type="button"
@@ -716,7 +720,7 @@ watch(() => props.settings?.forwardApex, (value) => {
               <img
                 :src="props.settings.brandLogoLight"
                 alt="Brand light logo preview"
-                :class="['max-h-16 max-w-[220px] h-auto w-auto rounded-md border border-border object-contain', previewBackgroundClass(props.settings.brandLogoLight)]"
+                class="max-h-16 max-w-[220px] h-auto w-auto rounded-md border border-border object-contain" :class="[previewBackgroundClass(props.settings.brandLogoLight)]"
               >
               <edge-shad-button
                 type="button"
@@ -767,7 +771,7 @@ watch(() => props.settings?.forwardApex, (value) => {
             <img
               :src="props.settings.favicon"
               alt="Favicon preview"
-              :class="['max-h-12 max-w-12 h-auto w-auto rounded-md border border-border object-contain', previewBackgroundClass(props.settings.favicon)]"
+              class="max-h-12 max-w-12 h-auto w-auto rounded-md border border-border object-contain" :class="[previewBackgroundClass(props.settings.favicon)]"
             >
             <edge-shad-button
               type="button"
@@ -856,6 +860,12 @@ watch(() => props.settings?.forwardApex, (value) => {
           name="trackingAdroll"
           placeholder="ADROLL-ID"
         />
+        <edge-shad-input
+          v-model="props.settings.sureFeedURL"
+          label="Sure Feedback"
+          name="sureFeedURL"
+          placeholder=""
+        />
       </div>
     </TabsContent>
     <TabsContent value="social" class="pt-4">

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/themeDefaultMenu.vue

@@ -118,6 +118,17 @@ const getFolderName = (entry) => {
     return ''
   return Object.keys(entry.item || {})[0] || ''
 }
+const getFolderTitle = (entry) => {
+  if (!isFolder(entry))
+    return ''
+  const title = String(entry?.menuTitle || entry?.folderTitle || '').trim()
+  if (title)
+    return title
+  const folderName = getFolderName(entry)
+  if (!folderName)
+    return ''
+  return folderName.replace(/-/g, ' ').replace(/\b\w/g, l => l.toUpperCase())
+}
 
 const getFolderList = (menuName, folderName) => {
   const targetMenu = modelValue.value[menuName] || []
@@ -228,6 +239,7 @@ const submitFolderDialog = () => {
     return
   const slug = uniqueFolderSlug(value, state.folderDialog.menu)
   modelValue.value[state.folderDialog.menu].push({
+    menuTitle: value,
     item: { [slug]: [] },
   })
   state.folderDialog.open = false
@@ -262,13 +274,16 @@ const openRenameDialogForPage = (menuName, index, folderName = null) => {
 }
 
 const openRenameDialogForFolder = (menuName, folderName, index) => {
+  const folderList = modelValue.value[menuName] || []
+  const target = folderList[index]
+  const currentTitle = String(target?.menuTitle || target?.folderTitle || '').trim()
   state.renameDialog = {
     open: true,
     type: 'folder',
     menu: menuName,
     folder: folderName,
     index,
-    value: folderName,
+    value: currentTitle || folderName,
   }
 }
 
@@ -347,6 +362,9 @@ const submitRenameDialog = () => {
       return
     const currentName = getFolderName(target)
     const slug = uniqueFolderSlug(value || currentName, state.renameDialog.menu, currentName)
+    target.menuTitle = value || target.menuTitle || target.folderTitle || currentName
+    if (Object.prototype.hasOwnProperty.call(target, 'folderTitle'))
+      delete target.folderTitle
     if (slug !== currentName) {
       target.item[slug] = target.item[currentName]
       delete target.item[currentName]
@@ -438,7 +456,7 @@ const hasEntries = computed(() => {
                 <div>
                   <div class="text-sm font-semibold flex items-center gap-1">
                     <Folder class="w-4 h-4" />
-                    {{ getFolderName(element) }}
+                    {{ getFolderTitle(element) }}
                   </div>
                   <div class="text-[11px] text-muted-foreground">
                     Folder

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" />