@edgedev/create-edge-app 1.0.41 → 1.0.43

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

@@ -0,0 +1,183 @@
+<script setup>
+import { toTypedSchema } from '@vee-validate/zod'
+import * as z from 'zod'
+const route = useRoute()
+const router = useRouter()
+// const edgeGlobal = inject('edgeGlobal')
+
+const edgeFirebase = inject('edgeFirebase')
+
+const state = reactive({
+  filter: '',
+  newDocs: {
+    things: {
+      name: { bindings: { 'field-type': 'text', 'label': 'Name', 'helper': 'Name' }, cols: '12', value: '' },
+      description: { bindings: { 'field-type': 'text', 'label': 'Description', 'helper': 'Description' }, cols: '12', value: '' },
+      subthings: { bindings: { 'field-type': 'collection', 'label': 'Subthings', 'helper': 'Subthings', 'collection-path': 'subthings' }, cols: '12', value: '' },
+    },
+    subthings: {
+      name: { bindings: { 'field-type': 'text', 'label': 'Name', 'helper': 'Name' }, cols: '6', value: '' },
+      test: { bindings: { 'field-type': 'boolean', 'label': 'Description', 'helper': 'Test' }, cols: '6', value: '' },
+      selectTest: { bindings: { 'field-type': 'select', 'label': 'Select', 'helper': 'Select', 'items': ['test1', 'test2', 'test3'] }, cols: '12', value: '' },
+      testtextarea: { bindings: { 'field-type': 'textarea', 'label': 'Test Textarea', 'helper': 'Textarea' }, cols: '12', value: '' },
+      arrayThing: { bindings: { 'field-type': 'array', 'label': 'Array', 'helper': 'Array' }, cols: '12', value: [] },
+      objectThing: { bindings: { 'field-type': 'object', 'label': 'Object', 'helper': 'Obj' }, cols: '12', value: {} },
+      stringArray: { bindings: { 'field-type': 'stringArray', 'label': 'stringArray', 'helper': 'Obj' }, cols: '12', value: [] },
+      numberArray: { bindings: { 'field-type': 'numberArray', 'label': 'numberArray', 'helper': 'Obj' }, cols: '12', value: [] },
+      intArray: { bindings: { 'field-type': 'intArray', 'label': 'intArray', 'helper': 'Obj' }, cols: '12', value: [] },
+      usersThing: { bindings: { 'field-type': 'users', 'label': 'Users', 'helper': 'Users', 'hint': 'Choose a user' }, cols: '12', value: '' },
+      numberTest: { bindings: { 'field-type': 'number', 'label': 'Number', 'helper': 'Number' }, cols: '12', value: 0 },
+      intTest: { bindings: { 'field-type': 'integer', 'label': 'Int', 'helper': 'Int' }, cols: '12', value: 0 },
+      moneyTest: { bindings: { 'field-type': 'money', 'label': 'Money', 'helper': 'Money' }, cols: '12', value: 0 },
+    },
+  },
+})
+
+const schemas = {
+  things: toTypedSchema(z.object({
+    name: z.string({
+      required_error: 'Name is required',
+    }).min(1, { message: 'Name is required' }),
+  })),
+  subthings: toTypedSchema(z.object({
+    name: z.string({
+      required_error: 'Name is required',
+    }).min(1, { message: 'Name is required' }),
+  })),
+}
+
+const collection = computed(() => {
+  if (route.params.collection) {
+    return route.params.collection
+  }
+  return 'things'
+})
+const docId = computed(() => {
+  if (route.params.docId) {
+    return route.params.docId
+  }
+  return ''
+})
+definePageMeta({
+  middleware: 'auth',
+})
+
+onMounted(() => {
+  if (!route.params.collection) {
+    // If making a static collection route, this onMounted should be removed
+    router.push('/app/dashboard/things')
+  }
+})
+</script>
+
+<template>
+  <div
+    v-if="edgeFirebase?.user?.loggedIn"
+    class="p-3 w-full h-[calc(100vh-118px)] overflow-y-auto"
+  >
+    <edge-dashboard v-if="docId === ''" :filter="state.filter" :collection="collection">
+      <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>
+          <div class="grow text-left">
+            <div class="text-lg">
+              {{ slotProps.item.name }}
+            </div>
+          </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]"
+    >
+      <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}`"
+            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>
+</template>

package/pages/app/login.vue

@@ -2,13 +2,15 @@
 </script>
 
 <template>
-  <v-container class="fill-height" fluid>
-    <v-row align="center" class="fill-height" justify="center">
-      <v-col cols="12" class="center-align" sm="8" md="6">
-        <edge-auth type="login" />
-      </v-col>
-    </v-row>
-  </v-container>
+  <div class="flex w-full h-full align-center items-center overflow-y-auto">
+    <edge-auth type="login" class="p-8 mx-auto max-w-lg w-full">
+      <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,13 +3,15 @@ const config = useRuntimeConfig()
 </script>
 
 <template>
-  <v-container class="fill-height" fluid>
-    <v-row align="center" class="fill-height" justify="center">
-      <v-col cols="12" class="center-align" sm="8" md="6">
-        <edge-auth type="register" :registration-code="config.public.registrationCode" />
-      </v-col>
-    </v-row>
-  </v-container>
+  <div class="flex w-full h-full align-center  overflow-y-auto">
+    <edge-auth type="register" :registration-code="config.public.registrationCode" class="p-8 mx-auto max-w-lg w-full">
+      <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/plugins/icons.ts

@@ -0,0 +1,72 @@
+import {
+  ArrowLeft,
+  ArrowRight,
+  Box,
+  Braces,
+  Brackets,
+  CalendarIcon,
+  Check,
+  ChevronDown,
+  ChevronLeft,
+  ChevronRight,
+  ChevronsUpDown,
+  CircleUser,
+  Copy,
+  Eye,
+  EyeOff,
+  FilePenLine,
+  Grip,
+  Group,
+  Info,
+  LayoutDashboard,
+  List,
+  ListPlus,
+  Loader2,
+  LogOut, MoreHorizontal,
+  Package,
+  Pencil,
+  PlusIcon,
+  Settings,
+  Settings2,
+  Trash,
+  TrashIcon,
+  User,
+  Users,
+} from 'lucide-vue-next'
+
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.component('Package', Package)
+  nuxtApp.vueApp.component('Braces', Braces)
+  nuxtApp.vueApp.component('Brackets', Brackets)
+  nuxtApp.vueApp.component('Grip', Grip)
+  nuxtApp.vueApp.component('ListPlus', ListPlus)
+  nuxtApp.vueApp.component('Pencil', Pencil)
+  nuxtApp.vueApp.component('Trash', Trash)
+  nuxtApp.vueApp.component('Check', Check)
+  nuxtApp.vueApp.component('Loader2', Loader2)
+  nuxtApp.vueApp.component('User', User)
+  nuxtApp.vueApp.component('ChevronsUpDown', ChevronsUpDown)
+  nuxtApp.vueApp.component('Eye', Eye)
+  nuxtApp.vueApp.component('EyeOff', EyeOff)
+  nuxtApp.vueApp.component('CircleUser', CircleUser)
+  nuxtApp.vueApp.component('Group', Group)
+  nuxtApp.vueApp.component('Settings', Settings)
+  nuxtApp.vueApp.component('Users', Users)
+  nuxtApp.vueApp.component('Settings2', Settings2)
+  nuxtApp.vueApp.component('ChevronDown', ChevronDown)
+  nuxtApp.vueApp.component('PlusIcon', PlusIcon)
+  nuxtApp.vueApp.component('TrashIcon', TrashIcon)
+  nuxtApp.vueApp.component('CalendarIcon', CalendarIcon)
+  nuxtApp.vueApp.component('MoreHorizontal', MoreHorizontal)
+  nuxtApp.vueApp.component('ChevronRight', ChevronRight)
+  nuxtApp.vueApp.component('ChevronLeft', ChevronLeft)
+  nuxtApp.vueApp.component('ArrowRight', ArrowRight)
+  nuxtApp.vueApp.component('ArrowLeft', ArrowLeft)
+  nuxtApp.vueApp.component('Box', Box)
+  nuxtApp.vueApp.component('LogOut', LogOut)
+  nuxtApp.vueApp.component('Info', Info)
+  nuxtApp.vueApp.component('FilePenLine', FilePenLine)
+  nuxtApp.vueApp.component('List', List)
+  nuxtApp.vueApp.component('Copy', Copy)
+  nuxtApp.vueApp.component('LayoutDashboard', LayoutDashboard)
+})

package/tailwind.config.js

@@ -0,0 +1,85 @@
+const animate = require('tailwindcss-animate')
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: ['class'],
+  safelist: ['dark'],
+  prefix: '',
+  theme: {
+    container: {
+      center: true,
+      padding: '2rem',
+      screens: {
+        '2xl': '1400px',
+      },
+    },
+    extend: {
+      colors: {
+        border: 'hsl(var(--border))',
+        input: 'hsl(var(--input))',
+        ring: 'hsl(var(--ring))',
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
+        primary: {
+          DEFAULT: 'hsl(var(--primary))',
+          foreground: 'hsl(var(--primary-foreground))',
+        },
+        secondary: {
+          DEFAULT: 'hsl(var(--secondary))',
+          foreground: 'hsl(var(--secondary-foreground))',
+        },
+        destructive: {
+          DEFAULT: 'hsl(var(--destructive))',
+          foreground: 'hsl(var(--destructive-foreground))',
+        },
+        muted: {
+          DEFAULT: 'hsl(var(--muted))',
+          foreground: 'hsl(var(--muted-foreground))',
+        },
+        accent: {
+          DEFAULT: 'hsl(var(--accent))',
+          foreground: 'hsl(var(--accent-foreground))',
+        },
+        popover: {
+          DEFAULT: 'hsl(var(--popover))',
+          foreground: 'hsl(var(--popover-foreground))',
+        },
+        card: {
+          DEFAULT: 'hsl(var(--card))',
+          foreground: 'hsl(var(--card-foreground))',
+        },
+      },
+      borderRadius: {
+        xl: 'calc(var(--radius) + 4px)',
+        lg: 'var(--radius)',
+        md: 'calc(var(--radius) - 2px)',
+        sm: 'calc(var(--radius) - 4px)',
+      },
+      keyframes: {
+        'accordion-down': {
+          from: { height: 0 },
+          to: { height: 'var(--radix-accordion-content-height)' },
+        },
+        'accordion-up': {
+          from: { height: 'var(--radix-accordion-content-height)' },
+          to: { height: 0 },
+        },
+        'collapsible-down': {
+          from: { height: 0 },
+          to: { height: 'var(--radix-collapsible-content-height)' },
+        },
+        'collapsible-up': {
+          from: { height: 'var(--radix-collapsible-content-height)' },
+          to: { height: 0 },
+        },
+      },
+      animation: {
+        'accordion-down': 'accordion-down 0.2s ease-out',
+        'accordion-up': 'accordion-up 0.2s ease-out',
+        'collapsible-down': 'collapsible-down 0.2s ease-in-out',
+        'collapsible-up': 'collapsible-up 0.2s ease-in-out',
+      },
+    },
+  },
+  plugins: [animate],
+}

package/components/account.vue

@@ -1,107 +0,0 @@
-<script setup>
-import { useRoute, useRouter } from 'vue-router'
-
-const route = useRoute()
-const router = useRouter()
-const edgeGlobal = inject('edgeGlobal')
-const site = computed(() => {
-  return route.params.collection
-})
-const metaFields = [
-  {
-    field: 'name',
-    type: 'text',
-    label: 'Name',
-    hint: 'Your name, shown in the user interface.',
-    rules: [edgeGlobal.edgeRules.required],
-  },
-]
-const orgFields = [
-  {
-    field: 'name',
-    type: 'text',
-    label: 'Name',
-    hint: 'Your name, shown in the user interface.',
-    rules: [edgeGlobal.edgeRules.required],
-  },
-]
-
-const config = useRuntimeConfig()
-</script>
-
-<template>
-  <v-card :rounded="0">
-    <sub-toolbar>
-      <v-icon class="mx-4">
-        mdi-account
-      </v-icon>
-      Account Settings
-    </sub-toolbar>
-    <v-card-text>
-      <v-row>
-        <v-col cols="12" sm="3" class="d-none d-sm-block">
-          <!-- Desktop sidebar -->
-          <v-card>
-            <v-list :lines="false" density="compact" nav>
-              <v-list-subheader class="">
-                Organization
-              </v-list-subheader>
-              <v-list-item link to="/app/account/organization-settings">
-                <v-list-item-title>Settings</v-list-item-title>
-              </v-list-item>
-
-              <v-list-item link to="/app/account/organization-members">
-                <v-list-item-title>Members</v-list-item-title>
-              </v-list-item>
-            </v-list>
-            <v-divider />
-            <v-list :lines="false" density="compact" nav>
-              <v-list-subheader class="">
-                My Settings
-              </v-list-subheader>
-              <v-list-item link to="/app/account/my-profile">
-                <v-list-item-title>Profile</v-list-item-title>
-              </v-list-item>
-
-              <v-list-item link to="/app/account/my-account">
-                <v-list-item-title>Account</v-list-item-title>
-              </v-list-item>
-              <v-list-item link to="/app/account/my-organizations">
-                <v-list-item-title>Organizations</v-list-item-title>
-              </v-list-item>
-            </v-list>
-
-            <v-divider />
-          </v-card>
-        </v-col>
-        <v-col cols="12" sm="9">
-          <!-- Mobile tabs -->
-          <v-tabs v-model="site" center-active show-arrows class="d-sm-none">
-            <v-tab key="org-settings" value="org-settings" to="/app/account/organization-settings">
-              Org Settings
-            </v-tab>
-            <v-tab key="org-members" value="org-members" to="/app/account/organization-members">
-              Org Members
-            </v-tab>
-            <v-tab key="my-profile" value="my-profile" to="/app/account/my-profile">
-              Profile
-            </v-tab>
-            <v-tab key="my-account" value="my-account" to="/app/account/my-account">
-              Account
-            </v-tab>
-            <v-tab key="my-organizations" value="my-organizations" to="/app/account/my-organizations">
-              Organizations
-            </v-tab>
-          </v-tabs>
-          <!-- Content -->
-          <edge-organization-settings v-if="site === 'organization-settings'" :org-fields="orgFields" />
-          <edge-my-account v-if="site === 'my-account'" />
-          <edge-my-profile v-if="site === 'my-profile'" :meta-fields="metaFields" />
-          <edge-organization-members v-if="site === 'organization-members'" />
-          <edge-my-organizations v-if="site === 'my-organizations'" :registration-code="config.public.registrationCode" />
-          <billing v-if="site === 'subscription'" />
-        </v-col>
-      </v-row>
-    </v-card-text>
-  </v-card>
-</template>

package/components/billing.vue

@@ -1,8 +0,0 @@
-<script setup>
-</script>
-
-<template>
-  <div>
-    <v-card v-if="globalState.subscribedStatus.isSubscribed" outlined />
-  </div>
-</template>

package/components/bottomMenu.vue

@@ -1,35 +0,0 @@
-<script setup>
-const edgeFirebase = inject('edgeFirebase')
-const edgeGlobal = inject('edgeGlobal')
-</script>
-
-<template>
-  <v-bottom-navigation>
-    <v-btn to="/app/dashboard">
-      <v-icon>mdi-view-dashboard</v-icon>
-
-      Dashboard
-    </v-btn>
-    <v-btn to="/app/dashboard/subthings">
-      <v-icon>mdi-cube</v-icon>
-
-      Sub Things
-    </v-btn>
-
-    <v-btn to="/app/account/organization-settings">
-      <v-icon>mdi-cog</v-icon>
-
-      Settings
-    </v-btn>
-
-    <v-btn @click="logOut(edgeFirebase, edgeGlobal)">
-      <v-icon>mdi-logout</v-icon>
-
-      Logout
-    </v-btn>
-  </v-bottom-navigation>
-</template>
-
-<style lang="scss" scoped>
-
-</style>