@edgedev/create-edge-app 1.1.27 → 1.1.28

package/edge/components/formSubtypes/myOrgs.vue

@@ -30,18 +30,38 @@ const state = reactive({
   },
   deleteDialog: false,
   loading: false,
+  bringUserIds: [],
+})
+
+const edgeUsers = toRef(edgeFirebase.state, 'users')
+const users = computed(() => Object.values(edgeUsers.value ?? {}))
+const roles = computed(() => edgeFirebase.user.roles)
+
+const bringUserOptions = computed(() => {
+  return users.value.filter(user => user.userId !== edgeFirebase.user.uid)
+})
+
+const showBringUsers = computed(() => {
+  return state.saveButton === 'Add Organization' && bringUserOptions.value.length > 0
 })
 
 const newItem = {
   name: '',
 }
 
+const startUsersSnapshot = async () => {
+  if (!edgeGlobal.edgeState.currentOrganization)
+    return
+  await edgeFirebase.startUsersSnapshot(`organizations/${edgeGlobal.edgeState.currentOrganization}`)
+}
+
 const addItem = () => {
   console.log(newItem)
   state.saveButton = 'Add Organization'
   state.workingItem = edgeGlobal.dupObject(newItem)
   state.workingItem.id = edgeGlobal.generateShortId()
   state.currentTitle = 'Add Organization'
+  state.bringUserIds = []
   state.dialog = true
 }
 
@@ -75,9 +95,77 @@ const register = reactive({
   dynamicDocumentFieldValue: '',
 })
 
+const updateBringUserSelection = (docId, checked) => {
+  const selections = new Set(state.bringUserIds)
+  if (checked) {
+    selections.add(docId)
+  }
+  else {
+    selections.delete(docId)
+  }
+  state.bringUserIds = Array.from(selections)
+}
+
+const addUsersToOrganization = async (orgId) => {
+  if (!orgId || state.bringUserIds.length === 0)
+    return
+  const targetUsers = users.value.filter(user => state.bringUserIds.includes(user.docId))
+  for (const user of targetUsers) {
+    const roleName = edgeGlobal.getRoleName(user.roles, edgeGlobal.edgeState.currentOrganization)
+    const resolvedRoleName = roleName === 'Unknown' ? 'User' : roleName
+    const orgRoles = edgeGlobal.orgUserRoles(orgId)
+    const roleMatch = orgRoles.find(role => role.name === resolvedRoleName)
+    if (!roleMatch)
+      continue
+    for (const role of roleMatch.roles) {
+      await edgeFirebase.storeUserRoles(user.docId, role.collectionPath, role.role)
+    }
+  }
+}
+
+const waitForOrgRole = async (orgId) => {
+  const orgPath = `organizations-${String(orgId).replaceAll('/', '-')}`
+  const maxAttempts = 30
+  const delayMs = 300
+  for (let attempt = 0; attempt < maxAttempts; attempt++) {
+    if (edgeFirebase.user.roles.some(role => role.collectionPath === orgPath)) {
+      return true
+    }
+    await new Promise(resolve => setTimeout(resolve, delayMs))
+  }
+  return false
+}
+
+const waitForNewOrgRole = async (previousOrgPaths) => {
+  const maxAttempts = 30
+  const delayMs = 300
+  for (let attempt = 0; attempt < maxAttempts; attempt++) {
+    const currentOrgRoles = edgeFirebase.user.roles.filter(role => role.collectionPath.startsWith('organizations-'))
+    const newOrgRole = currentOrgRoles.find(role => !previousOrgPaths.includes(role.collectionPath))
+    if (newOrgRole) {
+      return newOrgRole
+    }
+    await new Promise(resolve => setTimeout(resolve, delayMs))
+  }
+  return null
+}
+
+onBeforeMount(async () => {
+  await startUsersSnapshot()
+})
+
+watch(() => edgeGlobal.edgeState.currentOrganization, async (nextOrg, prevOrg) => {
+  if (nextOrg && nextOrg !== prevOrg) {
+    await startUsersSnapshot()
+  }
+})
+
 const onSubmit = async () => {
   const registerSend = edgeGlobal.dupObject(register)
   state.loading = true
+  const existingOrgPaths = edgeFirebase.user.roles
+    .filter(role => role.collectionPath.startsWith('organizations-'))
+    .map(role => role.collectionPath)
   if (state.saveButton === 'Add Organization') {
     registerSend.dynamicDocumentFieldValue = state.workingItem.name
   }
@@ -86,7 +174,14 @@ const onSubmit = async () => {
     registerSend.registrationCode = state.workingItem.name
   }
   const results = await edgeFirebase.currentUserRegister(registerSend)
-  edgeGlobal.getOrganizations(edgeFirebase)
+  await edgeGlobal.getOrganizations(edgeFirebase)
+  if (state.saveButton === 'Add Organization') {
+    const newOrgRole = await waitForNewOrgRole(existingOrgPaths)
+    const newOrgId = newOrgRole?.collectionPath?.replace('organizations-', '')
+    if (newOrgId) {
+      await addUsersToOrganization(newOrgId)
+    }
+  }
   console.log(results)
   edgeGlobal.edgeState.changeTracker = {}
   state.dialog = false
@@ -189,6 +284,22 @@ const schema = toTypedSchema(z.object({
         <template v-else>
           To join an existing organization, please enter the registration code provided by the organization.
         </template>
+        <div v-if="showBringUsers" class="mt-4 w-full">
+          <div class="text-sm font-medium text-foreground">
+            Users to bring over (you will be added automatically)
+          </div>
+          <div class="mt-2 w-full flex flex-wrap gap-2">
+            <div v-for="user in bringUserOptions" :key="user.docId" class="flex-1 min-w-[220px]">
+              <edge-shad-checkbox
+                :name="`bring-user-${user.docId}`"
+                :model-value="state.bringUserIds.includes(user.docId)"
+                @update:model-value="val => updateBringUserSelection(user.docId, val)"
+              >
+                {{ user.meta.name }}
+              </edge-shad-checkbox>
+            </div>
+          </div>
+        </div>
         <DialogFooter class="pt-6 flex justify-between">
           <edge-shad-button variant="destructive" @click="closeDialog">
             Close

package/edge/components/orgSwitcher.vue

@@ -4,7 +4,7 @@ import { inject } from 'vue'
 const props = defineProps({
   title: {
     type: String,
-    default: 'Organization(s)',
+    default: 'Organization',
   },
 })
 const edgeFirebase = inject('edgeFirebase')

package/edge/components/organizationMembers.vue

@@ -80,6 +80,9 @@ const state = reactive({
     role: '',
     isTemplate: false,
   },
+  inviteOrgIds: [],
+  editOrgIds: [],
+  removeOrgIds: [],
   loaded: false,
 })
 
@@ -92,6 +95,37 @@ const roleNamesOnly = computed(() => {
 const edgeUsers = toRef(edgeFirebase.state, 'users')
 const users = computed(() => Object.values(edgeUsers.value ?? {}))
 
+const orgCollectionPath = orgId => `organizations-${String(orgId).replaceAll('/', '-')}`
+
+const adminOrgOptions = computed(() => {
+  const orgs = edgeGlobal.edgeState.organizations || []
+  const roles = edgeFirebase?.user?.roles || []
+  return orgs.filter(org =>
+    roles.some(role => role.collectionPath === orgCollectionPath(org.docId) && role.role === 'admin'),
+  )
+})
+
+const inviteOrgOptions = computed(() => adminOrgOptions.value)
+
+const editOrgOptions = computed(() => adminOrgOptions.value)
+
+const removeOrgOptions = computed(() => {
+  const userRoles = state.workingItem?.roles || []
+  return adminOrgOptions.value.filter(org =>
+    userRoles.some(role => role.collectionPath.startsWith(orgCollectionPath(org.docId))),
+  )
+})
+
+const showInviteOrgSelect = computed(() => inviteOrgOptions.value.length > 1)
+const showEditOrgSelect = computed(() => editOrgOptions.value.length > 1)
+const showRemoveOrgSelect = computed(() => removeOrgOptions.value.length > 1)
+
+const selfRemoveBlocked = computed(() => {
+  return state.workingItem.userId === edgeFirebase.user.uid
+    && adminCount.value === 1
+    && state.removeOrgIds.includes(edgeGlobal.edgeState.currentOrganization)
+})
+
 const WIDTHS = {
   1: 'md:col-span-1',
   2: 'md:col-span-2',
@@ -175,6 +209,8 @@ const addItem = () => {
   state.workingItem = newItem
   state.workingItem.id = edgeGlobal.generateShortId()
   state.currentTitle = 'Invite User'
+  state.inviteOrgIds = [edgeGlobal.edgeState.currentOrganization]
+  state.editOrgIds = []
   state.dialog = true
 }
 
@@ -184,6 +220,9 @@ const editItem = (item) => {
   state.workingItem = edgeGlobal.dupObject(item)
   state.workingItem.meta = edgeGlobal.dupObject(item.meta)
   state.workingItem.role = edgeGlobal.getRoleName(item.roles, edgeGlobal.edgeState.currentOrganization)
+  state.editOrgIds = editOrgOptions.value
+    .filter(org => state.workingItem.roles.some(role => role.collectionPath.startsWith(orgCollectionPath(org.docId))))
+    .map(org => org.docId)
   const newItemKeys = Object.keys(state.newItem)
   newItemKeys.forEach((key) => {
     if (!state.workingItem?.[key]) {
@@ -205,15 +244,20 @@ const editItem = (item) => {
 const deleteConfirm = (item) => {
   state.currentTitle = item.name
   state.workingItem = edgeGlobal.dupObject(item)
+  state.removeOrgIds = [edgeGlobal.edgeState.currentOrganization]
   state.deleteDialog = true
 }
 
 const deleteAction = async () => {
+  const targetUserId = state.workingItem.docId || state.workingItem.userId
+  const selectedOrgIds = state.removeOrgIds.length > 0
+    ? state.removeOrgIds
+    : [edgeGlobal.edgeState.currentOrganization]
   const userRoles = state.workingItem.roles.filter((role) => {
-    return role.collectionPath.startsWith(edgeGlobal.edgeState.organizationDocPath.replaceAll('/', '-'))
+    return selectedOrgIds.some(orgId => role.collectionPath.startsWith(orgCollectionPath(orgId)))
   })
   for (const role of userRoles) {
-    await edgeFirebase.removeUserRoles(state.workingItem.docId, role.collectionPath)
+    await edgeFirebase.removeUserRoles(targetUserId, role.collectionPath)
     // console.log(role.collectionPath)
   }
   state.deleteDialog = false
@@ -229,10 +273,49 @@ const disableTracking = computed(() => {
   return state.saveButton === 'Invite User'
 })
 
+const updateInviteOrgSelection = (orgId, checked) => {
+  const selections = new Set(state.inviteOrgIds)
+  if (checked) {
+    selections.add(orgId)
+  }
+  else {
+    selections.delete(orgId)
+  }
+  state.inviteOrgIds = Array.from(selections)
+}
+
+const updateEditOrgSelection = (orgId, checked) => {
+  const selections = new Set(state.editOrgIds)
+  if (checked) {
+    selections.add(orgId)
+  }
+  else {
+    selections.delete(orgId)
+  }
+  state.editOrgIds = Array.from(selections)
+}
+
+const updateRemoveOrgSelection = (orgId, checked) => {
+  const selections = new Set(state.removeOrgIds)
+  if (checked) {
+    selections.add(orgId)
+  }
+  else {
+    selections.delete(orgId)
+  }
+  state.removeOrgIds = Array.from(selections)
+}
+
 const onSubmit = async () => {
   state.loading = true
-  const userRoles = edgeGlobal.orgUserRoles(edgeGlobal.edgeState.currentOrganization)
-  const roles = userRoles.find(role => role.name === state.workingItem.role).roles
+  const selectedOrgIds = state.inviteOrgIds.length > 0
+    ? state.inviteOrgIds
+    : [edgeGlobal.edgeState.currentOrganization]
+  const roles = selectedOrgIds.flatMap((orgId) => {
+    const userRoles = edgeGlobal.orgUserRoles(orgId)
+    const roleMatch = userRoles.find(role => role.name === state.workingItem.role)
+    return roleMatch ? roleMatch.roles : []
+  })
   if (state.saveButton === 'Invite User') {
     if (!state.workingItem.isTemplate) {
       await edgeFirebase.addUser({ roles, meta: state.workingItem.meta })
@@ -242,19 +325,41 @@ const onSubmit = async () => {
     }
   }
   else {
-    const oldRoles = state.workingItem.roles.filter((role) => {
-      return role.collectionPath.startsWith(edgeGlobal.edgeState.organizationDocPath.replaceAll('/', '-'))
-        && !roles.find(r => r.collectionPath === role.collectionPath)
-    })
-
-    for (const role of oldRoles) {
-      await edgeFirebase.removeUserRoles(state.workingItem.docId, role.collectionPath)
-    }
-
-    for (const role of roles) {
-      await edgeFirebase.storeUserRoles(state.workingItem.docId, role.collectionPath, role.role)
+    const targetUserId = state.workingItem.docId || state.workingItem.userId
+    const selectedOrgIds = state.editOrgIds
+    for (const org of editOrgOptions.value) {
+      const orgId = org.docId
+      const orgPath = orgCollectionPath(orgId)
+      const shouldHave = selectedOrgIds.includes(orgId)
+      const existingRoles = state.workingItem.roles.filter(role =>
+        role.collectionPath.startsWith(orgPath),
+      )
+      if (!shouldHave && existingRoles.length > 0) {
+        for (const role of existingRoles) {
+          await edgeFirebase.removeUserRoles(targetUserId, role.collectionPath)
+        }
+        continue
+      }
+      if (shouldHave) {
+        const orgRoles = edgeGlobal.orgUserRoles(orgId)
+        const roleMatch = orgRoles.find(role => role.name === state.workingItem.role)
+        if (!roleMatch)
+          continue
+        for (const role of existingRoles) {
+          if (!roleMatch.roles.some(r => r.collectionPath === role.collectionPath && r.role === role.role)) {
+            await edgeFirebase.removeUserRoles(targetUserId, role.collectionPath)
+          }
+        }
+        for (const role of roleMatch.roles) {
+          if (!existingRoles.some(r => r.collectionPath === role.collectionPath && r.role === role.role)) {
+            await edgeFirebase.storeUserRoles(targetUserId, role.collectionPath, role.role)
+          }
+        }
+      }
     }
     const stagedUserId = state.workingItem.docId
+    console.log('Staged User ID:', stagedUserId)
+    console.log('Updating meta:', state.workingItem.meta)
     await edgeFirebase.setUserMeta(state.workingItem.meta, '', stagedUserId)
   }
   edgeGlobal.edgeState.changeTracker = {}
@@ -386,21 +491,34 @@ onBeforeMount(async () => {
             <DialogDescription />
           </DialogHeader>
 
-          <h3 v-if="state.workingItem.userId === edgeFirebase.user.uid && adminCount > 1">
-            Are you sure you want to remove yourself from the organization "{{ currentOrganization.name }}"? You will no longer have access to any of the organization's data.
-          </h3>
-          <h3 v-else-if="state.workingItem.userId === edgeFirebase.user.uid && adminCount === 1">
+          <h3 v-if="selfRemoveBlocked">
             You cannot remove yourself from this organization because you are the only admin. You can delete the organization or add another admin.
           </h3>
+          <h3 v-else-if="state.workingItem.userId === edgeFirebase.user.uid">
+            <span v-if="showRemoveOrgSelect">Select the organizations you want to leave.</span>
+            <span v-else>Are you sure you want to remove yourself from the organization "{{ currentOrganization.name }}"? You will no longer have access to any of the organization's data.</span>
+          </h3>
           <h3 v-else>
-            Are you sure you want to remove "{{ state.workingItem.meta.name }}" from the organization "{{ currentOrganization.name }}"?
+            <span v-if="showRemoveOrgSelect">Select the organizations you want to remove "{{ state.workingItem.meta.name }}" from.</span>
+            <span v-else>Are you sure you want to remove "{{ state.workingItem.meta.name }}" from the organization "{{ currentOrganization.name }}"?</span>
           </h3>
+          <div v-if="showRemoveOrgSelect" class="mt-4 w-full flex flex-wrap gap-2">
+            <div v-for="org in removeOrgOptions" :key="org.docId" class="flex-1 min-w-[220px]">
+              <edge-shad-checkbox
+                :name="`remove-org-${org.docId}`"
+                :model-value="state.removeOrgIds.includes(org.docId)"
+                @update:model-value="val => updateRemoveOrgSelection(org.docId, val)"
+              >
+                {{ org.name }}
+              </edge-shad-checkbox>
+            </div>
+          </div>
           <DialogFooter class="pt-6 flex justify-between">
             <edge-shad-button class="text-white  bg-slate-800 hover:bg-slate-400" @click="state.deleteDialog = false">
               Cancel
             </edge-shad-button>
             <edge-shad-button
-              :disabled="adminCount === 1 && state.workingItem.userId === edgeFirebase.user.uid"
+              :disabled="selfRemoveBlocked"
               class="w-full"
               variant="destructive"
               @click="deleteAction()"
@@ -437,6 +555,38 @@ onBeforeMount(async () => {
                 :parent-tracker-id="`inviteUser-${state.workingItem.id}`"
                 :disabled="state.workingItem.userId === edgeFirebase.user.uid"
               />
+              <div v-if="state.saveButton !== 'Invite User' && showEditOrgSelect" class="mt-4 w-full">
+                <div class="text-sm font-medium text-foreground">
+                  Organizations
+                </div>
+                <div class="mt-2 w-full flex flex-wrap gap-2">
+                  <div v-for="org in editOrgOptions" :key="org.docId" class="flex-1 min-w-[220px]">
+                    <edge-shad-checkbox
+                      :name="`edit-add-org-${org.docId}`"
+                      :model-value="state.editOrgIds.includes(org.docId)"
+                      @update:model-value="val => updateEditOrgSelection(org.docId, val)"
+                    >
+                      {{ org.name }}
+                    </edge-shad-checkbox>
+                  </div>
+                </div>
+              </div>
+              <div v-if="state.saveButton === 'Invite User' && showInviteOrgSelect" class="mt-4 w-full">
+                <div class="text-sm font-medium text-foreground">
+                  Add to organizations
+                </div>
+                <div class="mt-2 w-full flex flex-wrap gap-2">
+                  <div v-for="org in inviteOrgOptions" :key="org.docId" class="flex-1 min-w-[220px]">
+                    <edge-shad-checkbox
+                      :name="`invite-org-${org.docId}`"
+                      :model-value="state.inviteOrgIds.includes(org.docId)"
+                      @update:model-value="val => updateInviteOrgSelection(org.docId, val)"
+                    >
+                      {{ org.name }}
+                    </edge-shad-checkbox>
+                  </div>
+                </div>
+              </div>
               <edge-g-input
                 v-if="state.saveButton === 'Invite User'"
                 v-model="state.workingItem.meta.email"

package/edge/components/shad/html.vue

@@ -163,6 +163,10 @@ const modelValue = useVModel(props, 'modelValue', emits, {
 })
 
 const editor = ref(null)
+const enterKeyHandler = (event) => {
+  if (event.key === 'Enter')
+    event.stopPropagation()
+}
 const imageState = reactive({
   active: false,
   size: 'medium',
@@ -279,6 +283,7 @@ onMounted(() => {
   })
   editor.value.on('selectionUpdate', updateImageState)
   editor.value.on('transaction', updateImageState)
+  editor.value?.view?.dom?.addEventListener('keydown', enterKeyHandler)
   updateImageState()
   applyHeightClasses()
 })
@@ -287,6 +292,7 @@ onBeforeUnmount(() => {
   if (editor.value) {
     editor.value.off('selectionUpdate', updateImageState)
     editor.value.off('transaction', updateImageState)
+    editor.value?.view?.dom?.removeEventListener('keydown', enterKeyHandler)
     editor.value.destroy()
   }
 })

package/edge/components/sideBar.vue

@@ -16,7 +16,7 @@ const props = defineProps({
   },
   organizationTitle: {
     type: String,
-    default: 'Organization(s)',
+    default: 'Organization',
   },
   menuItems: {
     type: Array,
@@ -86,7 +86,8 @@ onMounted(() => {
   try {
     devOverride.value = localStorage.getItem(DEV_OVERRIDE_KEY) === '1'
     edgeGlobal.edgeState.devOverride = devOverride.value
-  } catch (error) {
+  }
+  catch (error) {
     console.warn('dev override read failed', error)
   }
 })
@@ -97,10 +98,12 @@ const toggleDevOverride = () => {
   try {
     if (devOverride.value) {
       localStorage.setItem(DEV_OVERRIDE_KEY, '1')
-    } else {
+    }
+    else {
       localStorage.removeItem(DEV_OVERRIDE_KEY)
     }
-  } catch (error) {
+  }
+  catch (error) {
     console.warn('dev override write failed', error)
   }
 }

package/edge/components/sideBarContent.vue

@@ -17,7 +17,7 @@ const props = defineProps({
   },
   organizationTitle: {
     type: String,
-    default: 'Organization(s)',
+    default: 'Organization',
   },
   singleOrg: {
     type: Boolean,

package/edge/components/userMenu.vue

@@ -3,7 +3,7 @@ import { cn } from '@/lib/utils'
 const props = defineProps({
   title: {
     type: String,
-    default: 'Organization(s)',
+    default: 'Organization',
   },
   buttonClass: {
     type: String,
@@ -26,6 +26,20 @@ const isAdmin = computed(() => {
 
   return orgRole && orgRole.role === 'admin'
 })
+const organizations = computed(() => edgeGlobal.edgeState.organizations || [])
+const currentOrg = computed(() => organizations.value.find(org => org.docId === edgeGlobal.edgeState.currentOrganization))
+const currentOrgName = computed(() => currentOrg.value?.name || 'Organization')
+const hasMultipleOrgs = computed(() => organizations.value.length > 1)
+const orgDialogOpen = ref(false)
+const openOrgDialog = () => {
+  if (hasMultipleOrgs.value) {
+    orgDialogOpen.value = true
+  }
+}
+const selectOrg = (orgId) => {
+  edgeGlobal.setOrganization(orgId, edgeFirebase)
+  orgDialogOpen.value = false
+}
 const route = useRoute()
 const router = useRouter()
 const goTo = (path) => {
@@ -69,19 +83,16 @@ const firstPart = computed(() => {
       <DropdownMenuLabel v-if="!props.singleOrg" class="text-xs text-muted-foreground">
         {{ props.title }}
       </DropdownMenuLabel>
-      <template v-for="org in edgeGlobal.edgeState.organizations">
-        <DropdownMenuItem
-          v-if="!props.singleOrg"
-          :key="org.docId"
-          class="cursor-pointer"
-          :class="{ 'bg-accent': org.docId === edgeGlobal.edgeState.currentOrganization }"
-          @click="edgeGlobal.setOrganization(org.docId, edgeFirebase)"
-        >
-          {{ org.name }}
-          <Check v-if="org.docId === edgeGlobal.edgeState.currentOrganization" class="h-3 w-3 mr-2 ml-auto" />
-          <div v-else class="h-3 w-3 mr-2" />
-        </DropdownMenuItem>
-      </template>
+      <DropdownMenuItem
+        v-if="!props.singleOrg"
+        class="cursor-pointer"
+        :disabled="!hasMultipleOrgs"
+        @click="openOrgDialog"
+      >
+        <span class="truncate max-w-[180px]">{{ currentOrgName }}</span>
+        <span v-if="hasMultipleOrgs" class="ml-auto text-xs text-muted-foreground">Switch</span>
+        <ChevronsUpDown v-if="hasMultipleOrgs" class="h-4 w-4 ml-2" />
+      </DropdownMenuItem>
       <template v-if="isAdmin">
         <DropdownMenuSeparator />
         <DropdownMenuLabel class="text-xs text-muted-foreground">
@@ -145,4 +156,29 @@ const firstPart = computed(() => {
       </DropdownMenuItem>
     </DropdownMenuContent>
   </DropdownMenu>
+
+  <edge-shad-dialog v-model="orgDialogOpen">
+    <DialogContent class="w-full max-w-3xl max-h-[80vh] flex flex-col">
+      <DialogHeader>
+        <DialogTitle>Select Organization</DialogTitle>
+        <DialogDescription class="text-left">
+          Choose an organization to switch context.
+        </DialogDescription>
+      </DialogHeader>
+      <div class="mt-4 flex-1 overflow-y-auto">
+        <div class="space-y-2">
+          <edge-shad-button
+            v-for="org in organizations"
+            :key="org.docId"
+            variant="ghost"
+            class="w-full justify-between"
+            @click="selectOrg(org.docId)"
+          >
+            <span class="truncate text-left">{{ org.name }}</span>
+            <Check v-if="org.docId === edgeGlobal.edgeState.currentOrganization" class="h-4 w-4" />
+          </edge-shad-button>
+        </div>
+      </div>
+    </DialogContent>
+  </edge-shad-dialog>
 </template>