Merge pull request #20 from AnimalFoodBank:feature/20231104-vue-forms

Update UI with Tailwind themes
AnimalFoodBank · Nov 6, 2023 · f45ee89 · f45ee89
2 parents eed62bf + 64f16d2
commit f45ee89
Show file tree

Hide file tree

Showing 16 changed files with 4,731 additions and 724 deletions.
diff --git a/.gitignore b/.gitignore
@@ -88,4 +88,7 @@ local_settings.py
 tmp/*
 node_modules/
 
+# Vite/Vue
+.vite/
+
 **/tmp
diff --git a/apps/ui/index.html b/apps/ui/index.html
@@ -5,6 +5,7 @@
     <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>AFB - Animal Food Bank</title>
+
   </head>
   <body>
     <div id="app"></div>

diff --git a/apps/ui/package.json b/apps/ui/package.json
@@ -1,6 +1,8 @@
 {
   "name": "afb-ui",
   "version": "0.1.0",
+  "private": true,
+  "license": "UNLICENSED",
   "scripts": {
     "build": "vue-tsc --noEmit && vite build",
     "dev": "vite",
@@ -13,6 +15,7 @@
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/forms": "^0.5.6",
     "@types/vue-router": "^2.0.0",
+    "@vueform/vueform": "^1.5.4",
     "vue": "^3.3.7",
     "vue-router": "^4.2.5",
     "vue-service": "^1.0.3"
@@ -29,7 +32,7 @@
     "tailwindcss": "^3.3.5",
     "typescript": "^4.4.4",
     "vitawind": "^2.0.0",
-    "vite": "^2.7.2",
-    "vue-tsc": "^0.29.8"
+    "vite": "^4.5.0",
+    "vue-tsc": "1.2.0"
   }
 }
diff --git a/apps/ui/src/App.vue b/apps/ui/src/App.vue
@@ -37,13 +37,15 @@
                 <a href="/"><img class="block h-8 w-8" src="@/assets/img/afb_icon_colour.png" alt="Animal Food Bank logo" /></a>
               </div>
               <div class="hidden lg:ml-10 lg:block">
-                <div class="flex space-x-4 ">
+                <nav class="pl-0 ml-0">
+                  <div class="flex space-x-4 ">
 
-                  <router-link v-for="item in navigation"
-                    :key="item.name" :to="item.href" >{{ item.name }}
-                  </router-link>
+                    <router-link v-for="item in navigation"
+                      :key="item.name" :to="item.href" class="nav-link rounded-md py-2 px-3 text-sm font-medium text-white hover:bg-indigo-500 hover:bg-opacity-75">{{ item.name }}
+                    </router-link>
 
-                </div>
+                  </div>
+                </nav>
               </div>
             </div>
             <div class="flex flex-1 justify-center px-2 lg:ml-6 lg:justify-end">
@@ -172,7 +174,7 @@ const user = {
 const navigation = [
   { name: 'Dashboard', href: '/dashboard', current: true },
   { name: 'About', href: '/about', current: false },
-  { name: 'Requests', href: '/request', current: false },
+  { name: 'Requests', href: '/requests', current: false },
 ]
 
 const userNavigation = [

diff --git a/apps/ui/src/components/NewRequestForm.vue b/apps/ui/src/components/NewRequestForm.vue
@@ -0,0 +1,12 @@
+<template>
+
+</template>
+
+<script lang="ts">
+
+
+
+export default {
+
+}
+</script>
diff --git a/apps/ui/src/env.d.ts b/apps/ui/src/env.d.ts
@@ -6,3 +6,6 @@ declare module '*.vue' {
   const component: DefineComponent<{}, {}, any>
   export default component
 }
+interface Window {
+  google: any;
+}
diff --git a/apps/ui/src/main.ts b/apps/ui/src/main.ts
@@ -6,4 +6,15 @@ import App from './App.vue'
 import './index.css'
 import router from './router'
 
-createApp(App).use(router).mount('#app')
+// import Vueform from '@vueform/vueform'
+// import vueformConfig from './../vueform.config'
+import { Plugin } from 'vue'
+
+
+const app = createApp(App)
+app.use(router)
+
+// Attach Vueform and its config
+// app.use(Vueform as any, vueformConfig)
+
+app.mount('#app')
diff --git a/apps/ui/src/router/index.ts b/apps/ui/src/router/index.ts
@@ -15,15 +15,19 @@ type Route = {
   path: string;
   name: string;
   component: any;
+  alias?: string;
 }
 
 
+const defaultRoute: Route = {
+  path: '/',
+  component: DashboardView,
+  name: 'DashboardView',
+  alias: '/dashboard',
+};
+
 const routes: Route[] = [
-    {
-      path: '/dashboard',
-      component: DashboardView,
-      name: 'DashboardView',
-  },
+  defaultRoute,
   {
       path: '/requests',
       component: MakeRequestView,

diff --git a/apps/ui/src/types.d.ts b/apps/ui/src/types.d.ts
@@ -0,0 +1,3 @@
+
+declare module '@vueform/vueform/themes/tailwind';
+declare module '@vueform/vueform/locales/en';
diff --git a/apps/ui/src/views/MakeRequestView.vue b/apps/ui/src/views/MakeRequestView.vue
diff --git a/apps/ui/tailwind.config.js → apps/ui/tailwind.config.ts b/apps/ui/tailwind.config.js → apps/ui/tailwind.config.ts
@@ -6,13 +6,17 @@ module.exports = {
     "./src/views/*.{vue,html,js,ts,jsx,tsx}",
     "./src/components/*.{vue,html,js,ts,jsx,tsx}",
     "../afbcore/templates/**/*.html",
-    "../afbcore/templates/*.html"
+    "../afbcore/templates/*.html",
+    // './vueform.config.ts', // or where `vueform.config.js` is located
+    // './node_modules/@vueform/vueform/themes/tailwind/**/*.vue',
+    // './node_modules/@vueform/vueform/themes/tailwind/**/*.{ts,js,tsx,jsx}',
   ],
   theme: {
     extend: {},
   },
   plugins: [
     require('@tailwindcss/forms'),
-    require('@tailwindcss/aspect-ratio')
+    require('@tailwindcss/aspect-ratio'),
+    // require('@vueform/vueform/tailwind')
   ],
 }
diff --git a/apps/ui/tsconfig.json b/apps/ui/tsconfig.json
@@ -9,7 +9,9 @@
     "sourceMap": true,
     "resolveJsonModule": true,
     "esModuleInterop": true,
+    "experimentalDecorators": true,
     "lib": ["esnext", "dom"]
   },
-  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
+  "exclude": ["node_modules"]
 }
diff --git a/apps/ui/vite.config.ts b/apps/ui/vite.config.ts
@@ -1,9 +1,11 @@
-import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
+import vueform from '@vueform/vueform/vite'
+import { defineConfig } from "vite";
 
 // https://vitejs.dev/config/
 export default defineConfig({
   base: "/",
+  // root: "src/",
   resolve: {
     alias: {
       "@": "src",
@@ -18,7 +20,9 @@ export default defineConfig({
       disableGlobbing: false,
     },
   },
-  plugins: [vue()],
+  plugins: [
+    vue(),
+  ],
   // https://github.com/MrBin99/django-vite#vitejs
   // https://vitejs.dev/guide/backend-integration.html
   build: {
@@ -31,16 +35,17 @@ export default defineConfig({
     cssCodeSplit: true,
 
     manifest: true,
-    // As this is in SSR and not in SPA, you don't have an index.html that
-    // ViteJS can use to determine which files to compile. You need to
-    // tell it directly.
-    rollupOptions: {
-      input: "src/main.ts",
-      // See: https://ilikerobots.medium.com/django-vue-vite-rest-not-required-ca63cfa558fd
-      // output: {
-      //   dir: '../<your_django_app_dir>/static/vue/',
-      //   entryFileNames: '[name].js',
-      // }
-    },
+
+    // // As this is in SSR and not in SPA, you don't have an index.html that
+    // // ViteJS can use to determine which files to compile. You need to
+    // // tell it directly.
+    // rollupOptions: {
+    //   input: "src/main.ts",
+    //   // See: https://ilikerobots.medium.com/django-vue-vite-rest-not-required-ca63cfa558fd
+    //   // output: {
+    //   //   dir: '../<your_django_app_dir>/static/vue/',
+    //   //   entryFileNames: '[name].js',
+    //   // }
+    // },
   },
 });
diff --git a/apps/ui/volar.config.ts b/apps/ui/volar.config.ts
@@ -0,0 +1,4 @@
+
+// re: Volar Takeover Mode and other oddities
+//
+// https://vuejs.org/guide/typescript/overview.html#volar-takeover-mode
diff --git a/apps/ui/vueform.config.ts b/apps/ui/vueform.config.ts
@@ -0,0 +1,10 @@
+// vueform.config.js
+
+import en from '@vueform/vueform/locales/en';
+import tailwind from '@vueform/vueform/themes/tailwind';
+
+export default {
+  theme: tailwind,
+  locales: { en },
+  locale: 'en',
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -88,4 +88,7 @@ local_settings.py @@
     tmp/*
     node_modules/
+    # Vite/Vue
+    .vite/
     **/tmp
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@

		declare module '@vueform/vueform/themes/tailwind';
		declare module '@vueform/vueform/locales/en';