@edgedev/create-edge-app 1.0.41 → 1.0.43

package/components/ui/v-calendar/Calendar.vue

@@ -0,0 +1,331 @@
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core'
+import { ChevronLeft, ChevronRight } from 'lucide-vue-next'
+import type { Calendar } from 'v-calendar'
+import { DatePicker } from 'v-calendar'
+import { computed, nextTick, onMounted, ref, useSlots } from 'vue'
+import { isVCalendarSlot } from '.'
+import { cn } from '@/lib/utils'
+import { buttonVariants } from '@/components/ui/button'
+
+/* Extracted from v-calendar */
+type DatePickerModel = DatePickerDate | DatePickerRangeObject
+type DateSource = Date | string | number
+type DatePickerDate = DateSource | Partial<SimpleDateParts> | null
+interface DatePickerRangeObject {
+  start: Exclude<DatePickerDate, null>
+  end: Exclude<DatePickerDate, null>
+}
+interface SimpleDateParts {
+  year: number
+  month: number
+  day: number
+  hours: number
+  minutes: number
+  seconds: number
+  milliseconds: number
+}
+
+defineOptions({
+  inheritAttrs: false,
+})
+const props = withDefaults(defineProps< {
+  modelValue?: string | number | Date | DatePickerModel
+  modelModifiers?: object
+  columns?: number
+  type?: 'single' | 'range'
+}>(), {
+  type: 'single',
+  columns: 1,
+})
+const emits = defineEmits<{
+  (e: 'update:modelValue', payload: typeof props.modelValue): void
+}>()
+
+const modelValue = useVModel(props, 'modelValue', emits, {
+  passive: true,
+})
+
+const datePicker = ref<InstanceType<typeof DatePicker>>()
+// @ts-expect-error in this current version of v-calendar has the calendaRef instance, which is required to handle arrow nav.
+const calendarRef = computed<InstanceType<typeof Calendar>>(() => datePicker.value.calendarRef)
+
+function handleNav(direction: 'prev' | 'next') {
+  if (!calendarRef.value)
+    return
+
+  if (direction === 'prev')
+    calendarRef.value.movePrev()
+  else calendarRef.value.moveNext()
+}
+
+onMounted(async () => {
+  await nextTick()
+  if (modelValue.value instanceof Date && calendarRef.value)
+    calendarRef.value.focusDate(modelValue.value)
+})
+
+const $slots = useSlots()
+const vCalendarSlots = computed(() => {
+  return Object.keys($slots)
+    .filter(name => isVCalendarSlot(name))
+    .reduce((obj: Record<string, any>, key: string) => {
+      obj[key] = $slots[key]
+      return obj
+    }, {})
+})
+</script>
+
+<template>
+  <div class="relative">
+    <div v-if="$attrs.mode !== 'time'" class="absolute flex justify-between w-full px-4 top-3 z-[1]">
+      <button :class="cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')" @click="handleNav('prev')">
+        <ChevronLeft class="w-4 h-4" />
+      </button>
+      <button :class="cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')" @click="handleNav('next')">
+        <ChevronRight class="w-4 h-4" />
+      </button>
+    </div>
+
+    <DatePicker
+      ref="datePicker"
+      v-bind="$attrs"
+      v-model="modelValue"
+      :model-modifiers="modelModifiers"
+      class="calendar"
+      trim-weeks
+      :transition="'none'"
+      :columns="columns"
+    >
+      <template v-for="(_, slot) of vCalendarSlots" #[slot]="scope">
+        <slot :name="slot" v-bind="scope" />
+      </template>
+
+      <template #nav-prev-button>
+        <ChevronLeft />
+      </template>
+
+      <template #nav-next-button>
+        <ChevronRight />
+      </template>
+    </DatePicker>
+  </div>
+</template>
+
+<style lang="css">
+.calendar {
+  @apply p-3 text-center;
+}
+.calendar .vc-pane-layout {
+  @apply grid gap-4 max-sm:!grid-cols-1;
+}
+.calendar .vc-title {
+  @apply text-sm font-medium relative z-20;
+}
+.vc-popover-content-wrapper .vc-popover-content {
+  @apply mt-3 rounded-md max-w-xs border bg-background;
+}
+.vc-popover-content-wrapper .vc-nav-header {
+  @apply flex justify-between items-center p-2;
+}
+.vc-popover-content-wrapper .vc-nav-items {
+  @apply grid grid-cols-4 gap-2 p-2;
+}
+.vc-popover-content-wrapper .vc-nav-items .vc-nav-item {
+  @apply rounded-md px-2 py-1;
+}
+.vc-popover-content-wrapper .vc-nav-items .vc-nav-item:hover {
+  @apply text-muted-foreground bg-muted;
+}
+.vc-popover-content-wrapper .vc-nav-items .vc-nav-item.is-active {
+  @apply bg-primary text-primary-foreground;
+}
+.calendar .vc-pane-header-wrapper {
+  @apply hidden;
+}
+.calendar .vc-weeks {
+  @apply mt-4;
+}
+.calendar .vc-weekdays {
+  @apply justify-items-center;
+}
+.calendar .vc-weekday {
+  @apply text-muted-foreground rounded-md font-normal text-[0.8rem];
+}
+.calendar .vc-weeks {
+  @apply w-full space-y-2 flex flex-col [&>_div]:grid [&>_div]:grid-cols-7;
+}
+.calendar .vc-day:has(.vc-highlights) {
+  @apply first:rounded-l-md last:rounded-r-md;
+}
+.calendar .vc-day.is-today:not(:has(.vc-day-layer)) .vc-day-content {
+  @apply bg-secondary text-primary rounded-md;
+}
+.calendar .vc-day:has(.vc-highlight-base-start) {
+  @apply rounded-l-md;
+}
+.calendar .vc-day:has(.vc-highlight-base-end) {
+  @apply rounded-r-md;
+}
+.calendar .vc-day:has(.vc-highlight-bg-outline):not(:has(.vc-highlight-base-start)):not(:has(.vc-highlight-base-end)) {
+  @apply rounded-md;
+}
+.calendar .vc-day-content  {
+  @apply text-center text-sm p-0 relative focus-within:relative focus-within:z-20 inline-flex items-center justify-center ring-offset-background hover:transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hover:bg-accent hover:text-accent-foreground h-9 w-9 font-normal aria-selected:opacity-100 select-none;
+}
+.calendar .vc-day-content:not(.vc-highlight-content-light) {
+  @apply rounded-md;
+}
+.calendar .is-not-in-month:not(:has(.vc-highlight-content-solid)):not(:has(.vc-highlight-content-light)):not(:has(.vc-highlight-content-outline)),
+.calendar .vc-disabled {
+  @apply text-muted-foreground opacity-50;
+}
+.calendar .vc-highlight-content-solid, .calendar .vc-highlight-content-outline {
+  @apply bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground;
+}
+.calendar .vc-highlight-content-light {
+  @apply bg-accent text-accent-foreground;
+}
+.calendar .vc-pane-container.in-transition {
+  @apply overflow-hidden;
+}
+.calendar .vc-pane-container {
+  @apply w-full relative;
+}
+:root {
+	--vc-slide-translate: 22px;
+	--vc-slide-duration: 0.15s;
+	--vc-slide-timing: ease;
+}
+
+.calendar .vc-fade-enter-active,
+.calendar .vc-fade-leave-active,
+.calendar .vc-slide-left-enter-active,
+.calendar .vc-slide-left-leave-active,
+.calendar .vc-slide-right-enter-active,
+.calendar .vc-slide-right-leave-active,
+.calendar .vc-slide-up-enter-active,
+.calendar .vc-slide-up-leave-active,
+.calendar .vc-slide-down-enter-active,
+.calendar .vc-slide-down-leave-active,
+.calendar .vc-slide-fade-enter-active,
+.calendar .vc-slide-fade-leave-active {
+	transition:
+		opacity var(--vc-slide-duration) var(--vc-slide-timing),
+		-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);
+	transition:
+		transform var(--vc-slide-duration) var(--vc-slide-timing),
+		opacity var(--vc-slide-duration) var(--vc-slide-timing);
+	transition:
+		transform var(--vc-slide-duration) var(--vc-slide-timing),
+		opacity var(--vc-slide-duration) var(--vc-slide-timing),
+		-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);
+	-webkit-backface-visibility: hidden;
+	backface-visibility: hidden;
+	pointer-events: none;
+}
+
+.calendar .vc-none-leave-active,
+.calendar .vc-fade-leave-active,
+.calendar .vc-slide-left-leave-active,
+.calendar .vc-slide-right-leave-active,
+.calendar .vc-slide-up-leave-active,
+.calendar .vc-slide-down-leave-active {
+	position: absolute !important;
+	width: 100%;
+}
+
+.calendar .vc-none-enter-from,
+.calendar .vc-none-leave-to,
+.calendar .vc-fade-enter-from,
+.calendar .vc-fade-leave-to,
+.calendar .vc-slide-left-enter-from,
+.calendar .vc-slide-left-leave-to,
+.calendar .vc-slide-right-enter-from,
+.calendar .vc-slide-right-leave-to,
+.calendar .vc-slide-up-enter-from,
+.calendar .vc-slide-up-leave-to,
+.calendar .vc-slide-down-enter-from,
+.calendar .vc-slide-down-leave-to,
+.calendar .vc-slide-fade-enter-from,
+.calendar .vc-slide-fade-leave-to {
+	opacity: 0;
+}
+
+.calendar .vc-slide-left-enter-from,
+.calendar .vc-slide-right-leave-to,
+.calendar .vc-slide-fade-enter-from.direction-left,
+.calendar .vc-slide-fade-leave-to.direction-left {
+	-webkit-transform: translateX(var(--vc-slide-translate));
+	transform: translateX(var(--vc-slide-translate));
+}
+
+.calendar .vc-slide-right-enter-from,
+.calendar .vc-slide-left-leave-to,
+.calendar .vc-slide-fade-enter-from.direction-right,
+.calendar .vc-slide-fade-leave-to.direction-right {
+	-webkit-transform: translateX(calc(-1 * var(--vc-slide-translate)));
+	transform: translateX(calc(-1 * var(--vc-slide-translate)));
+}
+
+.calendar .vc-slide-up-enter-from,
+.calendar .vc-slide-down-leave-to,
+.calendar .vc-slide-fade-enter-from.direction-top,
+.calendar .vc-slide-fade-leave-to.direction-top {
+	-webkit-transform: translateY(var(--vc-slide-translate));
+	transform: translateY(var(--vc-slide-translate));
+}
+
+.calendar .vc-slide-down-enter-from,
+.calendar .vc-slide-up-leave-to,
+.calendar .vc-slide-fade-enter-from.direction-bottom,
+.calendar .vc-slide-fade-leave-to.direction-bottom {
+	-webkit-transform: translateY(calc(-1 * var(--vc-slide-translate)));
+	transform: translateY(calc(-1 * var(--vc-slide-translate)));
+}
+/**
+ * Timepicker styles
+ */
+.vc-time-picker {
+  @apply flex flex-col items-center p-2;
+}
+.vc-time-picker.vc-invalid {
+  @apply pointer-events-none opacity-50;
+}
+.vc-time-picker.vc-attached {
+  @apply border-t border-solid border-secondary mt-2;
+}
+.vc-time-picker > * + * {
+  @apply mt-1;
+}
+.vc-time-header {
+  @apply flex items-center text-sm font-semibold uppercase mt-1 px-1 leading-6;
+}
+.vc-time-select-group {
+  @apply inline-flex items-center px-1 rounded-md bg-primary-foreground border border-solid border-secondary;
+}
+.vc-time-select-group .vc-base-icon {
+  @apply mr-1 text-primary stroke-primary;
+}
+.vc-time-select-group select {
+  @apply bg-primary-foreground p-1 appearance-none outline-none text-center;
+}
+.vc-time-weekday {
+  @apply text-muted-foreground tracking-wide;
+}
+.vc-time-month {
+  @apply text-primary ml-2;
+}
+.vc-time-day {
+  @apply text-primary ml-1;
+}
+.vc-time-year {
+  @apply text-muted-foreground ml-2;
+}
+.vc-time-colon {
+  @apply mb-0.5;
+}
+.vc-time-decimal {
+  @apply ml-0.5;
+}
+</style>

package/components/ui/v-calendar/index.ts

@@ -0,0 +1,22 @@
+export { default as Calendar } from './Calendar.vue'
+import type { CalendarSlotName } from 'v-calendar/dist/types/src/components/Calendar/CalendarSlot.vue.d.ts'
+
+export function isVCalendarSlot(slotName: string): slotName is CalendarSlotName {
+  const validSlots: CalendarSlotName[] = [
+    'day-content',
+    'day-popover',
+    'dp-footer',
+    'footer',
+    'header-title-wrapper',
+    'header-title',
+    'header-prev-button',
+    'header-next-button',
+    'nav',
+    'nav-prev-button',
+    'nav-next-button',
+    'page',
+    'time-header',
+  ]
+
+  return validSlots.includes(slotName as CalendarSlotName)
+}

package/components.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://shadcn-vue.com/schema.json",
+  "style": "default",
+  "typescript": true,
+  "tsConfigPath": ".nuxt/tsconfig.json",
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "assets/css/tailwind.css",
+    "baseColor": "slate",
+    "cssVariables": true
+  },
+  "framework": "nuxt",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}

package/edge-components-install.sh

@@ -0,0 +1 @@
+git clone https://github.com/Edge-Marketing-and-Design/edge-vue-components.git edge

package/jsconfig.json

@@ -0,0 +1,9 @@
+{
+    "compilerOptions": {
+        "paths": {
+            "@/*": [
+                "./*"
+            ]
+        }
+    }
+}

package/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/nuxt.config.ts

@@ -1,24 +1,35 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
-  css: [
-    'vuetify/lib/styles/main.sass',
-    '@mdi/font/css/materialdesignicons.min.css',
-  ],
   ssr: false,
-  build: {
-    transpile: ['vuetify'],
-  },
   runtimeConfig: {
     public: {
       registrationCode: process.env.REGISTRATION_CODE,
     },
   },
-  modules: [
-    '@vant/nuxt',
-  ],
+  modules: ['@vant/nuxt', '@nuxtjs/tailwindcss', '@nuxtjs/color-mode', 'shadcn-nuxt'],
+  shadcn: {
+    /**
+     * Prefix for all the imported component
+     */
+    prefix: '',
+    /**
+     * Directory that the component lives in.
+     * @default "./components/ui"
+     */
+    componentDir: './components/ui',
+  },
+  colorMode: {
+    classSuffix: '',
+  },
+  imports: {
+    dirs: [
+      'edge/composables/**',
+    ],
+  },
   components: {
     dirs: [
-      { path: '~/components/formSubtypes', global: true, prefix: 'form-subtypes' },
+      { path: '~/components/formSubtypes', global: true, prefix: 'edge-form-subtypes' },
+      { path: '~/edge/components', global: true, prefix: 'edge' },
       '~/components',
     ],
   },
@@ -26,6 +37,12 @@ export default defineNuxtConfig({
     define: {
       'process.env.DEBUG': false,
     },
+    server: {
+      hmr: {
+        port: 3000, // Make sure this port matches your Nuxt server port
+        clientPort: 3000, // Ensure this matches your Nuxt server port as well
+      },
+    },
   },
   devtools: { enabled: false },
 })

package/package.json

@@ -1,44 +1,63 @@
 {
     "name": "@edgedev/create-edge-app",
-    "version": "1.0.41",
+    "version": "1.0.43",
     "description": "Create Edge Starter App",
     "bin": {
         "create-edge-app": "./bin/cli.js"
     },
     "scripts": {
         "build": "nuxt build",
-        "dev": "nuxt dev --host",
-        "emulator": "nuxt dev --dotenv .env.dev --host",
+        "dev": "nuxt dev --host --port=3000",
+        "emulator": "nuxt dev --dotenv .env.dev --host --port=3000",
         "build-emulator": "nuxt generate --dotenv .env.dev",
         "generate": "nuxt generate",
         "preview": "nuxt preview",
         "postinstall": "nuxt prepare"
     },
+    "dependencies": {
+        "@capacitor/android": "5.4.1",
+        "@capacitor/app": "5.0.6",
+        "@capacitor/core": "5.4.1",
+        "@capacitor/ios": "5.4.1",
+        "@capacitor/push-notifications": "5.1.0",
+        "@chenfengyuan/vue-number-input": "2",
+        "@edgedev/firebase": "latest",
+        "@unovis/ts": "^1.4.1",
+        "@unovis/vue": "^1.4.1",
+        "@vee-validate/zod": "^4.13.1",
+        "@vueuse/core": "10.4.1",
+        "class-variance-authority": "^0.7.0",
+        "clsx": "^2.1.1",
+        "embla-carousel": "^8.1.5",
+        "embla-carousel-vue": "^8.1.5",
+        "lucide-vue-next": "^0.394.0",
+        "maska": "2.1.9",
+        "radix-vue": "^1.8.3",
+        "tailwind-merge": "^2.3.0",
+        "tailwindcss-animate": "^1.0.7",
+        "v-calendar": "^3.1.2",
+        "vaul-vue": "^0.1.2",
+        "vee-validate": "^4.13.1",
+        "vue-sonner": "^1.1.2",
+        "zod": "^3.23.8"
+    },
     "devDependencies": {
         "@antfu/eslint-config": "0.35.1",
         "@capacitor/assets": "3.0.0",
         "@capacitor/cli": "5.4.1",
         "@mdi/font": "7.1.96",
         "@nuxt/devtools": "0.7.2",
+        "@nuxtjs/color-mode": "^3.4.1",
+        "@nuxtjs/tailwindcss": "^6.12.0",
         "@types/node": "18.11.18",
         "@vant/nuxt": "1.0.3",
         "eslint": "8.33.0",
         "firebase": "9.17.1",
         "nuxt": "3.9.3",
         "sass": "1.58.0",
+        "shadcn-nuxt": "^0.10.4",
         "typescript": "4.9.5",
         "vuedraggable": "4.1.0",
         "vuetify": "^3.5.1"
-    },
-    "dependencies": {
-        "@capacitor/android": "5.4.1",
-        "@capacitor/app": "5.0.6",
-        "@capacitor/core": "5.4.1",
-        "@capacitor/ios": "5.4.1",
-        "@capacitor/push-notifications": "5.1.0",
-        "@chenfengyuan/vue-number-input": "2",
-        "@edgedev/firebase": "latest",
-        "@vueuse/core": "10.4.1",
-        "maska": "2.1.9"
     }
 }

package/pages/app/account/[page].vue

@@ -0,0 +1,72 @@
+<script setup>
+import { toTypedSchema } from '@vee-validate/zod'
+import * as z from 'zod'
+const route = useRoute()
+const router = useRouter()
+const edgeFirebase = inject('edgeFirebase')
+// const edgeGlobal = inject('edgeGlobal')
+const metaFields = [
+  {
+    field: 'name',
+    type: 'text',
+    label: 'Name',
+    hint: 'Your name, shown in the user interface.',
+    value: '',
+  },
+]
+const orgFields = [
+  {
+    field: 'name',
+    type: 'text',
+    label: 'Name',
+    hint: '',
+    value: '',
+  },
+]
+
+const orgSchema = toTypedSchema(z.object({
+  name: z.string({
+    required_error: 'Name is required',
+  }).min(1, { message: 'Name is required' }),
+}))
+
+const metaSchema = toTypedSchema(z.object({
+  name: z.string({
+    required_error: 'Name is required',
+  }).min(1, { message: 'Name is required' }),
+}))
+
+const config = useRuntimeConfig()
+
+definePageMeta({
+  middleware: 'auth',
+})
+
+onMounted(() => {
+  if (!route.params.page) {
+    // router.push('/app/account/my-account')
+  }
+})
+
+const page = computed(() => {
+  return route.params.page
+})
+</script>
+
+<template>
+  <div
+    v-if="edgeFirebase?.user?.loggedIn"
+    class="p-3 w-full h-[calc(100vh-118px)] overflow-y-auto"
+  >
+    <div class="gap-2 h-full w-full justify-items-center">
+      <Card class="w-full h-full bg-muted/50 max-w-7xl m-auto pt-3">
+        <edge-organization-settings v-if="page === 'organization-settings'" :form-schema="orgSchema" :org-fields="orgFields" />
+        <edge-my-account v-if="page === 'my-account'" />
+        <edge-my-profile v-if="page === 'my-profile'" :form-schema="metaSchema" :meta-fields="metaFields" />
+        <edge-organization-members v-if="page === 'organization-members'" />
+        <edge-my-organizations v-if="page === 'my-organizations'" :registration-code="config.public.registrationCode" />
+        <edge-billing v-if="page === 'subscription'" />
+      </Card>
+    </div>
+  </div>
+</template>