@edgedev/create-edge-app 1.1.3 → 1.1.5

package/app.vue

@@ -9,7 +9,4 @@
 
 <style lang="scss">
 .firebase-emulator-warning { display: none; }
-html, body {
-  overflow: hidden;
-}
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edgedev/create-edge-app",
-  "version": "1.1.3",
+  "version": "1.1.5",
   "description": "Create Edge Starter App",
   "bin": {
     "create-edge-app": "./bin/cli.js"

package/pages/app/account.vue

@@ -40,36 +40,33 @@ const menuItems = [
 </script>
 
 <template>
-  <NuxtLayout name="app">
-    <div
-      v-if="edgeGlobal.edgeState.organizationDocPath"
-      class="flex-1 flex flex-col overflow-y-auto p-3 pt-0"
-    >
-      <div class="h-full p-0">
-        <SidebarProvider class="min-h-full">
-          <div class="h-full md:w-[180px]">
-            <edge-side-bar
-              :menu-items="menuItems"
-              :settings-menu-items="isAdmin ? adminMenuItems : []"
-              collapsible="submenu"
-              class="bg-background text-foreground border-none w-[180px] absolute shadow-none"
-              :show-settings-section="false"
-              title="My Settings"
-              settings-title="Organization Settings"
-              group-label-classes="text-foreground/70"
-            >
-              <template #header>
-                <h1 class="text-xl">
-                  Settings
-                </h1>
-              </template>
-            </edge-side-bar>
-          </div>
-          <NuxtPage class="flex-1 flex flex-col overflow-y-auto p-3" />
-        </SidebarProvider>
-      </div>
+  <div
+    v-if="edgeGlobal.edgeState.organizationDocPath"
+  >
+    <div class="h-full p-0">
+      <SidebarProvider class="min-h-full">
+        <div class="h-full md:w-[180px]">
+          <edge-side-bar
+            :menu-items="menuItems"
+            :settings-menu-items="isAdmin ? adminMenuItems : []"
+            collapsible="submenu"
+            class="bg-background text-foreground border-none w-[180px] absolute shadow-none"
+            :show-settings-section="false"
+            title="My Settings"
+            settings-title="Organization Settings"
+            group-label-classes="text-foreground/70"
+          >
+            <template #header>
+              <h1 class="text-xl">
+                Settings
+              </h1>
+            </template>
+          </edge-side-bar>
+        </div>
+        <NuxtPage class="flex-1 flex flex-col overflow-y-auto p-3" />
+      </SidebarProvider>
     </div>
-  </NuxtLayout>
+  </div>
 </template>
 
 <style lang="scss">

package/pages/app/dashboard/[[collection]]/[[docId]].vue

@@ -71,69 +71,90 @@ onMounted(() => {
 </script>
 
 <template>
-  <NuxtLayout name="app">
-    <div
-      v-if="edgeGlobal.edgeState.organizationDocPath"
-      class="flex-1 flex flex-col overflow-y-auto p-3 pt-0"
-    >
-      <edge-dashboard v-if="docId === ''" :filter="state.filter" :collection="collection" class="flex-1">
-        <template #header-start>
-          <LayoutDashboard class="mr-2" />
-          <span class="capitalize">{{ collection }}</span>
-        </template>
-        <template #header-center>
-          <div class="w-full px-6">
-            <edge-shad-input
-              v-model="state.filter"
-              label=""
-              name="filter"
-              placeholder="Filter..."
-            />
+  <div
+    v-if="edgeGlobal.edgeState.organizationDocPath"
+  >
+    <edge-dashboard v-if="docId === ''" :filter="state.filter" :collection="collection" class="flex-1">
+      <template #header-start>
+        <LayoutDashboard class="mr-2" />
+        <span class="capitalize">{{ collection }}</span>
+      </template>
+      <template #header-center>
+        <div class="w-full px-6">
+          <edge-shad-input
+            v-model="state.filter"
+            label=""
+            name="filter"
+            placeholder="Filter..."
+          />
+        </div>
+      </template>
+      <template #header-end="slotProps">
+        <edge-shad-button class="uppercase bg-slate-600" :to="`/app/dashboard/${collection}/new`">
+          Add {{ slotProps.title }}
+        </edge-shad-button>
+      </template>
+      <template #list-item="slotProps">
+        <edge-shad-button variant="text" class="cursor-pointer w-full flex justify-between slotProps.items-center py-2 gap-3" :to="`/app/dashboard/${collection}/${slotProps.item.docId}`">
+          <div>
+            <Avatar class="cursor-pointer p-0 h-8 w-8 mr-2">
+              <FilePenLine class="h-5 w-5" />
+            </Avatar>
           </div>
-        </template>
-        <template #header-end="slotProps">
-          <edge-shad-button class="uppercase bg-slate-600" :to="`/app/dashboard/${collection}/new`">
-            Add {{ slotProps.title }}
-          </edge-shad-button>
-        </template>
-        <template #list-item="slotProps">
-          <edge-shad-button variant="text" class="cursor-pointer w-full flex justify-between slotProps.items-center py-2 gap-3" :to="`/app/dashboard/${collection}/${slotProps.item.docId}`">
-            <div>
-              <Avatar class="cursor-pointer p-0 h-8 w-8 mr-2">
-                <FilePenLine class="h-5 w-5" />
-              </Avatar>
-            </div>
-            <div class="grow text-left">
-              <div class="text-lg">
-                {{ slotProps.item.name }}
-              </div>
+          <div class="grow text-left">
+            <div class="text-lg">
+              {{ slotProps.item.name }}
             </div>
-            <div>
-              <edge-shad-button
-                size="icon"
-                class="bg-slate-600 h-7 w-7"
-                @click.stop="slotProps.deleteItem(slotProps.item.docId)"
-              >
-                <Trash class="h-5 w-5" />
-              </edge-shad-button>
-            </div>
-          </edge-shad-button>
-          <Separator class="dark:bg-slate-600" />
-        </template>
-      </edge-dashboard>
-      <edge-editor
-        v-else
-        :collection="collection"
-        :doc-id="docId"
-        :schema="schemas[collection]"
-        :new-doc-schema="state.newDocs[collection]"
-        class="w-full max-w-7xl mx-auto flex-1"
-      >
-        <template #header-start="slotProps">
-          <FilePenLine class="mr-2" />
-          {{ slotProps.title }}
-        </template>
-        <template #header-end="slotProps">
+          </div>
+          <div>
+            <edge-shad-button
+              size="icon"
+              class="bg-slate-600 h-7 w-7"
+              @click.stop="slotProps.deleteItem(slotProps.item.docId)"
+            >
+              <Trash class="h-5 w-5" />
+            </edge-shad-button>
+          </div>
+        </edge-shad-button>
+        <Separator class="dark:bg-slate-600" />
+      </template>
+    </edge-dashboard>
+    <edge-editor
+      v-else
+      :collection="collection"
+      :doc-id="docId"
+      :schema="schemas[collection]"
+      :new-doc-schema="state.newDocs[collection]"
+      class="w-full max-w-7xl mx-auto flex-1"
+    >
+      <template #header-start="slotProps">
+        <FilePenLine class="mr-2" />
+        {{ slotProps.title }}
+      </template>
+      <template #header-end="slotProps">
+        <edge-shad-button
+          v-if="!slotProps.unsavedChanges"
+          :to="`/app/dashboard/${collection}`"
+          class="bg-red-700 uppercase h-8 hover:bg-slate-400 w-20"
+        >
+          Close
+        </edge-shad-button>
+        <edge-shad-button
+          v-else
+          :to="`/app/dashboard/${collection}`"
+          class="bg-red-700 uppercase h-8 hover:bg-slate-400 w-20"
+        >
+          Cancel
+        </edge-shad-button>
+        <edge-shad-button
+          type="submit"
+          class="bg-slate-500 uppercase h-8 hover:bg-slate-400 w-20"
+        >
+          Save
+        </edge-shad-button>
+      </template>
+      <template #footer="slotProps">
+        <div class="flex w-full gap-1 items-center justify-end">
           <edge-shad-button
             v-if="!slotProps.unsavedChanges"
             :to="`/app/dashboard/${collection}`"
@@ -148,39 +169,15 @@ onMounted(() => {
           >
             Cancel
           </edge-shad-button>
+
           <edge-shad-button
             type="submit"
             class="bg-slate-500 uppercase h-8 hover:bg-slate-400 w-20"
           >
             Save
           </edge-shad-button>
-        </template>
-        <template #footer="slotProps">
-          <div class="flex w-full gap-1 items-center justify-end">
-            <edge-shad-button
-              v-if="!slotProps.unsavedChanges"
-              :to="`/app/dashboard/${collection}`"
-              class="bg-red-700 uppercase h-8 hover:bg-slate-400 w-20"
-            >
-              Close
-            </edge-shad-button>
-            <edge-shad-button
-              v-else
-              :to="`/app/dashboard/${collection}`"
-              class="bg-red-700 uppercase h-8 hover:bg-slate-400 w-20"
-            >
-              Cancel
-            </edge-shad-button>
-
-            <edge-shad-button
-              type="submit"
-              class="bg-slate-500 uppercase h-8 hover:bg-slate-400 w-20"
-            >
-              Save
-            </edge-shad-button>
-          </div>
-        </template>
-      </edge-editor>
-    </div>
-  </NuxtLayout>
+        </div>
+      </template>
+    </edge-editor>
+  </div>
 </template>

package/pages/app/login.vue

@@ -2,17 +2,15 @@
 </script>
 
 <template>
-  <NuxtLayout name="app">
-    <div class="flex w-full h-full align-center items-center">
-      <edge-auth type="login" class="p-8 mx-auto max-w-lg w-full h-full max-h-[540px] overflow-y-auto">
-        <div class="grid gap-2 text-center">
-          <h1 class="text-2xl font-bold">
-            Login
-          </h1>
-        </div>
-      </edge-auth>
-    </div>
-  </NuxtLayout>
+  <div class="flex w-full h-full align-center items-center">
+    <edge-auth type="login" class="p-8 mx-auto max-w-lg w-full h-full max-h-[540px] overflow-y-auto">
+      <div class="grid gap-2 text-center">
+        <h1 class="text-2xl font-bold">
+          Login
+        </h1>
+      </div>
+    </edge-auth>
+  </div>
 </template>
 
 <style lang="scss" scoped>

package/pages/app/signup.vue

@@ -3,17 +3,15 @@ const config = useRuntimeConfig()
 </script>
 
 <template>
-  <NuxtLayout name="app">
-    <div class="flex w-full h-full align-center items-center">
-      <edge-auth type="register" :registration-code="config.public.registrationCode" class="p-8 mx-auto max-w-lg w-full h-full max-h-[760px] overflow-y-auto">
-        <div class="grid gap-2 text-center">
-          <h1 class="text-2xl font-bold">
-            Sign Up
-          </h1>
-        </div>
-      </edge-auth>
-    </div>
-  </NuxtLayout>
+  <div class="flex w-full h-full align-center items-center">
+    <edge-auth type="register" :registration-code="config.public.registrationCode" class="p-8 mx-auto max-w-lg w-full h-full max-h-[760px] overflow-y-auto">
+      <div class="grid gap-2 text-center">
+        <h1 class="text-2xl font-bold">
+          Sign Up
+        </h1>
+      </div>
+    </edge-auth>
+  </div>
 </template>
 
 <style lang="scss" scoped>

package/{layouts → pages}/app.vue

@@ -2,6 +2,8 @@
 const edgeFirebase = inject('edgeFirebase')
 // const edgeGlobal = inject('edgeGlobal')
 
+const route = useRoute()
+
 const currentOrganization = computed(() => {
   return edgeGlobal.edgeState.currentOrganization
 })
@@ -70,6 +72,59 @@ const colorMode = useColorMode()
 onMounted(() => {
   colorMode.preference = 'system'
 })
+
+const showLeftPanel = computed(() => {
+  return edgeGlobal?.edgeState?.showLeftPanel[route.path]
+})
+
+const leftPanelDefaultSize = computed(() => {
+  if (showLeftPanel.value) {
+    return 20
+  }
+  return 0
+})
+
+const mainPanelDefaultSize = computed(() => {
+  if (showLeftPanel.value) {
+    return 80
+  }
+  return 100
+})
+
+const leftPanel = ref(null)
+const mainPanel = ref(null)
+
+watch(showLeftPanel, (value) => {
+  if (leftPanel.value && mainPanel.value) {
+    const animateResize = (panel, targetSize) => {
+      let currentSize = panel.value.getSize()
+      const step = (targetSize - currentSize) / 10 // Smooth out the transition
+
+      const animate = () => {
+        if (Math.abs(currentSize - targetSize) > 0.5) {
+          currentSize += step
+          panel.value.resize(currentSize)
+          requestAnimationFrame(animate)
+        }
+        else {
+          panel.value.resize(targetSize)
+        }
+      }
+
+      animate()
+    }
+
+    if (value) {
+      animateResize(leftPanel, 20)
+      animateResize(mainPanel, 80)
+    }
+    else {
+      animateResize(leftPanel, 0)
+      animateResize(mainPanel, 100)
+    }
+  }
+})
+
 edgeFirebase.runFunction('edgeFirebase-initFirestore', {})
 edgeGlobal.edgeState.userRoles = [
   {
@@ -104,30 +159,6 @@ const menuItems = [
     icon: 'Package',
   },
 ]
-
-const slots = useSlots()
-const hasLeftPanel = computed(() => {
-  const leftPanelSlot = slots['left-panel']
-  if (!leftPanelSlot) {
-    return false
-  }
-  const slotContent = leftPanelSlot()
-  return slotContent.length > 0 && slotContent.some(node => node.children && node.children.length > 0)
-})
-
-const leftPanelDefaultSize = computed(() => {
-  if (hasLeftPanel.value) {
-    return 20
-  }
-  return 0
-})
-
-const mainPanelDefaultSize = computed(() => {
-  if (hasLeftPanel.value) {
-    return 80
-  }
-  return 100
-})
 </script>
 
 <template>
@@ -136,8 +167,8 @@ const mainPanelDefaultSize = computed(() => {
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover">
   </Head>
   <Toaster />
-  <div class="flex flex-col h-screen">
-    <div class="flex h-full w-full">
+  <div class="flex flex-col h-[calc(100vh+200px)]">
+    <div class="flex h-full w-full fixed">
       <edge-sidebar-provider
         v-slot="sideBarProviderProps"
         enable-nested-menu
@@ -175,20 +206,17 @@ const mainPanelDefaultSize = computed(() => {
                 </CardContent>
               </Card>
             </template>
-            <template #nested-menu>
-              <slot name="nested-menu" />
-            </template>
           </edge-side-bar>
         </div>
         <ResizablePanelGroup
           direction="horizontal"
           class="h-full w-full"
         >
-          <ResizablePanel class="bg-sidebar text-sidebar-foreground" :default-size="leftPanelDefaultSize">
-            <slot name="left-panel" />
+          <ResizablePanel ref="leftPanel" class="bg-sidebar text-sidebar-foreground" :default-size="leftPanelDefaultSize">
+            <div id="left-panel" />
           </ResizablePanel>
-          <ResizableHandle v-if="hasLeftPanel" with-handle />
-          <ResizablePanel :default-size="mainPanelDefaultSize">
+          <ResizableHandle v-if="showLeftPanel" with-handle />
+          <ResizablePanel ref="mainPanel" :default-size="mainPanelDefaultSize">
             <div class="grow h-full flex flex-col h-screen">
               <edge-menu
                 v-if="edgeFirebase.user.loggedIn"
@@ -207,7 +235,7 @@ const mainPanelDefaultSize = computed(() => {
                   </edge-shad-button>
                 </template>
               </edge-menu>
-              <slot />
+              <NuxtPage class="flex-1 flex flex-col overflow-y-auto p-3 pt-0" />
             </div>
           </ResizablePanel>
         </ResizablePanelGroup>
@@ -218,7 +246,11 @@ const mainPanelDefaultSize = computed(() => {
 
 <style lang="scss">
 .firebase-emulator-warning { display: none; }
-html, body {
-  overflow: hidden;
+html {
+  scrollbar-width: none;
+}
+
+html::-webkit-scrollbar {
+  display: none;
 }
 </style>

package/tsconfig.json

@@ -1,3 +1,3 @@
 {
   "extends": "./.nuxt/tsconfig.json"
-}
+}