@edgedev/create-edge-app 1.1.25 → 1.1.26

package/edge/components/userMenu.vue

@@ -0,0 +1,148 @@
+<script setup>
+import { cn } from '@/lib/utils'
+const props = defineProps({
+  title: {
+    type: String,
+    default: 'Organization(s)',
+  },
+  buttonClass: {
+    type: String,
+    default: '',
+  },
+  iconClass: {
+    type: String,
+    default: '',
+  },
+  singleOrg: {
+    type: Boolean,
+    default: false,
+  },
+})
+const edgeFirebase = inject('edgeFirebase')
+const isAdmin = computed(() => {
+  const orgRole = edgeFirebase?.user?.roles.find(role =>
+    role.collectionPath === edgeGlobal.edgeState.organizationDocPath.replaceAll('/', '-'),
+  )
+
+  return orgRole && orgRole.role === 'admin'
+})
+const route = useRoute()
+const router = useRouter()
+const goTo = (path) => {
+  router.push(path)
+}
+
+const currentRoutePath = computed(() => {
+  const currentRoutePath = route.fullPath.endsWith('/') ? route.fullPath.substring(0, route.fullPath.length - 1) : route.fullPath
+  return currentRoutePath
+})
+
+const firstPart = computed(() => {
+  const firstPart = route.path.split('/')[1]
+  return `/${firstPart}`
+})
+</script>
+
+<template>
+  <DropdownMenu>
+    <DropdownMenuTrigger v-bind="$attrs" class="flex flex-col items-center" as-child>
+      <slot name="trigger">
+        <Button size="icon" :class="cn('rounded-full', props.buttonClass)">
+          <Settings2 :class="cn('h-5 w-5', props.iconClass)" />
+        </Button>
+      </slot>
+    </DropdownMenuTrigger>
+    <DropdownMenuContent align="end">
+      <!-- <DropdownMenuItem class="bg-accent"> -->
+      <Card class="border-0 p-4 bg-popover shadow-none">
+        <CardHeader class="p-0">
+          <CardTitle>
+            {{ edgeFirebase.user.meta.name }}
+          </CardTitle>
+          <CardDescription class="p-2">
+            {{ edgeFirebase.user.firebaseUser.providerData[0].email }}
+          </CardDescription>
+        </CardHeader>
+      </Card>
+      <!-- </DropdownMenuItem> -->
+      <DropdownMenuSeparator v-if="!props.singleOrg" />
+      <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>
+      <template v-if="isAdmin">
+        <DropdownMenuSeparator />
+        <DropdownMenuLabel class="text-xs text-muted-foreground">
+          {{ props.title }} Settings
+        </DropdownMenuLabel>
+        <DropdownMenuItem
+          class="cursor-pointer"
+          :class="{ 'bg-accent': currentRoutePath === `${firstPart}/account/organization-settings` }"
+          @click="goTo(`${firstPart}/account/organization-settings`)"
+        >
+          <Settings class="h-4 w-4 mr-2" />
+          Settings
+          <Check v-if="currentRoutePath === `${firstPart}/account/organization-settings`" class="h-3 w-3 mr-2 ml-auto" />
+        </DropdownMenuItem>
+        <DropdownMenuItem
+          class="cursor-pointer"
+          :class="{ 'bg-accent': currentRoutePath === `${firstPart}/account/organization-members` }"
+          @click="goTo(`${firstPart}/account/organization-members`)"
+        >
+          <Users class="h-4 w-4 mr-2" />
+          Members
+          <Check v-if="currentRoutePath === `${firstPart}/account/organization-members`" class="h-3 w-3 mr-2 ml-auto" />
+        </DropdownMenuItem>
+      </template>
+      <DropdownMenuSeparator />
+      <DropdownMenuLabel class="text-xs text-muted-foreground">
+        My Settings
+      </DropdownMenuLabel>
+      <DropdownMenuItem
+        class="cursor-pointer"
+        :class="{ 'bg-accent': currentRoutePath === `${firstPart}/account/my-profile` }"
+        @click="goTo(`${firstPart}/account/my-profile`)"
+      >
+        <User class="h-4 w-4 mr-2" />
+        Profile
+        <Check v-if="currentRoutePath === `${firstPart}/account/my-profile`" class="h-3 w-3 mr-2 ml-auto" />
+      </DropdownMenuItem>
+      <DropdownMenuItem
+        class="cursor-pointer"
+        :class="{ 'bg-accent': currentRoutePath === `${firstPart}/account/my-account` }"
+        @click="goTo(`${firstPart}/account/my-account`)"
+      >
+        <CircleUser class="h-4 w-4 mr-2" />
+        Account
+        <Check v-if="currentRoutePath === `${firstPart}/account/my-account`" class="h-3 w-3 mr-2 ml-auto" />
+      </DropdownMenuItem>
+      <DropdownMenuItem
+        v-if="!props.singleOrg"
+        class="cursor-pointer"
+        :class="{ 'bg-accent': currentRoutePath === `${firstPart}/account/my-organizations` }"
+        @click="goTo(`${firstPart}/account/my-organizations`)"
+      >
+        <Group class="h-4 w-4 mr-2" />
+        Organizations
+        <Check v-if="currentRoutePath === `${firstPart}/account/my-organizations`" class="h-3 w-3 mr-2 ml-auto" />
+      </DropdownMenuItem>
+      <DropdownMenuSeparator />
+      <DropdownMenuItem class="cursor-pointer" @click="logOut(edgeFirebase, edgeGlobal)">
+        <LogOut class="h-4 w-4 mr-2" />
+        Logout
+      </DropdownMenuItem>
+    </DropdownMenuContent>
+  </DropdownMenu>
+</template>

package/edge/components/v/alert.vue

@@ -0,0 +1,59 @@
+<script setup>
+import { cn } from '@/lib/utils'
+const props = defineProps({
+  variant: {
+    type: String,
+    default: 'plain',
+  },
+  type: {
+    type: String,
+    default: 'info',
+  },
+  class: {
+    type: String,
+    required: false,
+  },
+})
+
+const cardClassesBasedOnVariantProp = computed(() => {
+  switch (props.variant) {
+    case 'text':
+      return ''
+    case 'flat':
+      return ''
+    case 'elevated':
+      return ''
+    case 'tonal':
+      return 'bg-muted/30 shadow-md'
+    case 'outlined':
+      return ''
+    case 'plain':
+      return ''
+  }
+})
+
+const cardClassesBasedOnTypeProp = computed(() => {
+  switch (props.type) {
+    case 'info':
+      return 'bg-info'
+    case 'success':
+      return 'bg-success'
+    case 'warning':
+      return 'bg-warning'
+    case 'error':
+      return 'bg-error'
+  }
+})
+</script>
+
+<template>
+  <Alert class="p-0 border-0" :class="cn(cardClassesBasedOnTypeProp, props.class)">
+    <div class="w-full h-full p-4" :class="cardClassesBasedOnVariantProp">
+      <slot />
+    </div>
+  </Alert>
+</template>
+
+<style scoped>
+/* your styles here */
+</style>

package/edge/components/v/alertTitle.vue

@@ -0,0 +1,18 @@
+<script setup>
+const props = defineProps({
+  class: {
+    type: String,
+    required: false,
+  },
+})
+</script>
+
+<template>
+  <AlertTitle :class="props.class">
+    <slot />
+  </AlertTitle>
+</template>
+
+<style scoped>
+/* your styles here */
+</style>

package/edge/components/v/card.vue

@@ -0,0 +1,53 @@
+<script setup>
+import { cn } from '@/lib/utils'
+const props = defineProps({
+  variant: {
+    type: String,
+    default: 'plain',
+  },
+  class: {
+    type: String,
+    required: false,
+  },
+  maxWidth: {
+    type: String,
+    default: '',
+  },
+})
+
+const cardClassesBasedOnVariantProp = computed(() => {
+  switch (props.variant) {
+    case 'text':
+      return 'bg-muted/100 border-0'
+    case 'flat':
+      return 'bg-muted/100 border-0'
+    case 'elevated':
+      return 'bg-muted/100 elevation-2'
+    case 'tonal':
+      return 'bg-muted/60 shadow-md'
+    case 'outlined':
+      return 'bg-muted/100'
+    case 'plain':
+      return 'bg-muted/100 border-0'
+  }
+})
+
+const maxWidthClass = computed (() => {
+  if (!props.maxWidth) {
+    return 'w-full'
+  }
+  else {
+    return 'w-full max-w-7xl'
+  }
+})
+</script>
+
+<template>
+  <Card :class="cn(maxWidthClass, cardClassesBasedOnVariantProp, props.class)">
+    <slot />
+  </Card>
+</template>
+
+<style scoped>
+/* your styles here */
+</style>

package/edge/components/v/cardActions.vue

@@ -0,0 +1,18 @@
+<script setup>
+const props = defineProps({
+  class: {
+    type: String,
+    required: false,
+  },
+})
+</script>
+
+<template>
+  <CardFooter class="flex justify-end gap-1">
+    <slot />
+  </CardFooter>
+</template>
+
+<style scoped>
+/* your styles here */
+</style>

package/edge/components/v/cardText.vue

@@ -0,0 +1,18 @@
+<script setup>
+const props = defineProps({
+  class: {
+    type: String,
+    required: false,
+  },
+})
+</script>
+
+<template>
+  <div class="px-5 py-2" :class="props.class">
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+/* your styles here */
+</style>

package/edge/components/v/cardTitle.vue

@@ -0,0 +1,20 @@
+<script setup>
+const props = defineProps({
+  class: {
+    type: String,
+    required: false,
+  },
+})
+</script>
+
+<template>
+  <CardHeader>
+    <CardTitle :class="props.class">
+      <slot />
+    </CardTitle>
+  </CardHeader>
+</template>
+
+<style scoped>
+/* your styles here */
+</style>

package/edge/components/v/col.vue

@@ -0,0 +1,56 @@
+<script setup>
+import { cn } from '@/lib/utils'
+const props = defineProps({
+  class: {
+    type: String,
+    required: false,
+  },
+  cols: {
+    type: String,
+    default: 'auto',
+  },
+})
+
+const colsClasses = computed(() => {
+  switch (props.cols) {
+    case 'auto':
+      return 'grow'
+    case '1':
+      return 'w-1/12'
+    case '2':
+      return 'w-2/12'
+    case '3':
+      return 'w-3/12'
+    case '4':
+      return 'w-4/12'
+    case '5':
+      return 'w-5/12'
+    case '6':
+      return 'w-6/12'
+    case '7':
+      return 'w-7/12'
+    case '8':
+      return 'w-8/12'
+    case '9':
+      return 'w-9/12'
+    case '10':
+      return 'w-10/12'
+    case '11':
+      return 'w-11/12'
+    case '12':
+      return 'w-full'
+    default:
+      return 'grow'
+  }
+})
+</script>
+
+<template>
+  <div class="px-2" :class="cn(colsClasses, props.class)">
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+/* your styles here */
+</style>

package/edge/components/v/list.vue

@@ -0,0 +1,46 @@
+<script setup>
+import { cn } from '@/lib/utils'
+const props = defineProps({
+  class: {
+    type: String,
+    required: false,
+  },
+  justify: {
+    type: String,
+    default: 'center',
+  },
+  lines: {
+    type: String,
+    default: '',
+  },
+})
+
+const justifyClasses = computed(() => {
+  switch (props.justify) {
+    case 'start':
+      return 'justify-start'
+    case 'center':
+      return 'justify-center'
+    case 'end':
+      return 'justify-end'
+    case 'between':
+      return 'justify-between'
+    case 'around':
+      return 'justify-around'
+    case 'evenly':
+      return 'justify-evenly'
+    case 'stretch':
+      return 'grid-flow-col justify-stretch'
+  }
+})
+</script>
+
+<template>
+  <div class="flex flex-wrap items-center py-0" :class="cn(justifyClasses, props.class)">
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+/* your styles here */
+</style>

package/edge/components/v/listItem.vue

@@ -0,0 +1,26 @@
+<script setup>
+const props = defineProps({
+  class: {
+    type: String,
+    required: false,
+  },
+})
+</script>
+
+<template>
+  <div class="w-full flex justify-between items-center py-1 gap-3" :class="props.class">
+    <div>
+      <slot name="prepend" />
+    </div>
+    <div class="grow">
+      <slot />
+    </div>
+    <div>
+      <slot name="append" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+/* your styles here */
+</style>

package/edge/components/v/listItemTitle.vue

@@ -0,0 +1,18 @@
+<script setup>
+const props = defineProps({
+  class: {
+    type: String,
+    required: false,
+  },
+})
+</script>
+
+<template>
+  <div class="text-lg" :class="props.class">
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+/* your styles here */
+</style>

package/edge/components/v/row.vue

@@ -0,0 +1,42 @@
+<script setup>
+import { cn } from '@/lib/utils'
+const props = defineProps({
+  class: {
+    type: String,
+    required: false,
+  },
+  justify: {
+    type: String,
+    default: 'center',
+  },
+})
+
+const justifyClasses = computed(() => {
+  switch (props.justify) {
+    case 'start':
+      return 'justify-start'
+    case 'center':
+      return 'justify-center'
+    case 'end':
+      return 'justify-end'
+    case 'between':
+      return 'justify-between'
+    case 'around':
+      return 'justify-around'
+    case 'evenly':
+      return 'justify-evenly'
+    case 'stretch':
+      return 'grid-flow-col justify-stretch'
+  }
+})
+</script>
+
+<template>
+  <div :class="cn('flex flex-wrap py-2 items-center', justifyClasses, props.class)">
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+/* your styles here */
+</style>

package/edge/components/v/toolbar.vue

@@ -0,0 +1,24 @@
+<script setup>
+const props = defineProps({
+  class: {
+    type: String,
+    required: false,
+  },
+  flat: {
+    type: Boolean,
+  },
+})
+</script>
+
+<template>
+  <edge-menu>
+    <template #start />
+    <template #end>
+      <slot />
+    </template>
+  </edge-menu>
+</template>
+
+<style scoped>
+/* your styles here */
+</style>