wip: primevue integration

Signed-off-by: Pranav C <pranavxc@gmail.com>

packages/nc-gui-v2/app.vue

@@ -1,5 +1,6 @@
 <template>
-  <div><!-- Markup shared across all pages, ex: NavBar -->
+<!--  <NuxtLayout>-->
-    <NuxtPage />
+<!--    <NuxtPage />-->
-  </div>
+<!--  </NuxtLayout>-->
+  <NuxtPage/>
 </template>

packages/nc-gui-v2/composables/user.ts

@@ -0,0 +1,9 @@
+import {store} from 'nuxt3-store'
+
+export const user =  store({
+  name: 'user',
+  type: 'localstorage',
+  value: {token: null},
+  reactiveType: 'reactive',
+  version: '1.0.0'
+})

packages/nc-gui-v2/layouts/default.vue

@@ -0,0 +1,19 @@
+<template>
+  <v-layout>
+    <v-app-bar color="grey-lighten-2"></v-app-bar>
+<!--    <v-navigation-drawer color="grey-darken-2" permanent></v-navigation-drawer>-->
+    <v-main>
+      <slot></slot>
+    </v-main>
+  </v-layout>
+</template>
+
+<script>
+export default {
+  name: "default"
+}
+</script>
+
+<style scoped>
+
+</style>

packages/nc-gui-v2/nuxt.config.ts

@@ -2,8 +2,33 @@ import {defineNuxtConfig} from 'nuxt'
 
 // https://v3.nuxtjs.org/api/configuration/nuxt.config
 export default defineNuxtConfig({
-  modules: ['@nuxtjs/tailwindcss'],
+  // modules: ['@nuxtjs/tailwindcss'],
-  buildModules: [
+  // buildModules: [
-    'nuxt-vite'
+  //   'nuxt-vite'
-  ]
+  // ],
+  modules: ['nuxt3-store'],
+  ssr:false,
+  plugins: [
+    // '~/plugins/vuetify.ts',
+    // '~/plugins/api.ts',
+  ],
+  // css: ['vuetify/lib/styles/main.sass'],
+  // build: {
+  //   transpile: ['vuetify']
+  // },
+
+  css: [
+    'primevue/resources/themes/saga-blue/theme.css',
+    'primevue/resources/primevue.css',
+    'primeicons/primeicons.css'
+  ],
+  build: {
+    transpile: ['primevue']
+  },
+
+  vite: {
+    define: {
+      'process.env.DEBUG': 'false',
+    }
+  }
 })

packages/nc-gui-v2/package.json

@@ -8,7 +8,17 @@
   },
   "devDependencies": {
     "@nuxtjs/tailwindcss": "^5.1.2",
+    "fibers": "^5.0.1",
     "nuxt": "3.0.0-rc.3",
-    "nuxt-vite": "^0.3.5"
+    "sass": "^1.53.0",
+    "sass-loader": "^10.3.0"
+  },
+  "dependencies": {
+    "nocodb-sdk": "file:../nocodb-sdk",
+    "nuxt3-store": "^1.0.0",
+    "vuetify": "^3.0.0-alpha.12",
+    "primevue": "3.10.0",
+    "primeflex": "3.2.0",
+    "primeicons": "5.0.0"
   }
 }

packages/nc-gui-v2/pages/dashboard.vue

@@ -0,0 +1,18 @@
+<template>
+  <div>
+  <Sidebar :visible="true" position="left" :dismissable="false">
+    Content
+
+  </Sidebar>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "dashboard"
+}
+</script>
+
+<style scoped>
+
+</style>

packages/nc-gui-v2/pages/form.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="container">
+
+    <Card style="width:500px">
+      <template #title>
+        Signup
+      </template>
+      <template #content>
+        <InputText type="text" v-model="value" label="Email"/>
+       </template>
+      <template #footer>
+        <Button label="Small" icon="pi pi-check" class="p-button-sm"  />
+      </template>
+    </Card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useToast } from "primevue/usetoast";
+const text = ref();
+const toast = useToast();
+const greet = () => {
+  toast.add({severity: 'info', summary: 'Hello '  + text.value});
+}
+</script>
+
+<style lang="scss">
+.container {
+  margin: 0 auto;
+  min-height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  div {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 1rem;
+  }
+}
+</style>

packages/nc-gui-v2/pages/index.vue

@@ -1,13 +1,41 @@
 <template>
-<span>test</span>
+  <div class="container">
+    <div>
+      <img alt="Vue logo" src="../assets/icon.png" width="50">
+      <Toast />
+
+      <div >
+        <form @submit.prevent="greet">
+          <InputText type="text" v-model="text"/>
+          <Button type="submit" label="Submit"/>
+        </form>
+      </div>
+    </div>
+  </div>
 </template>
 
-<script>
+<script setup lang="ts">
-export default {
+import { ref } from 'vue';
-  name: "index"
+import { useToast } from "primevue/usetoast";
+const text = ref();
+const toast = useToast();
+const greet = () => {
+  toast.add({severity: 'info', summary: 'Hello '  + text.value});
 }
 </script>
 
-<style scoped>
+<style lang="scss">
-
+.container {
+  margin: 0 auto;
+  min-height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  div {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 1rem;
+  }
+}
 </style>

packages/nc-gui-v2/pages/signin.vue

@@ -0,0 +1,72 @@
+<template>
+  <v-cotainer>
+    <v-card max-width="500" class="pa-4 mx-auto mt-10">
+      {{userStore}}
+      <v-form
+          ref="formType"
+          v-model="valid"
+          lazy-validation
+      >
+        <!-- Enter your work email -->
+        <v-text-field
+            v-model="form.email"
+            label="Email"
+            required
+        />
+
+        <!-- Enter your password -->
+        <v-text-field
+            label="Password"
+            v-model="form.password"
+            name="input-10-2"
+            min="8"
+        />
+
+        <v-btn
+            class="mx-auto"
+            large
+            elevation-10
+            :disabled="false"
+            @click="signIn"
+        >
+          <b>Sign In</b>
+        </v-btn>
+
+      </v-form>
+    </v-card>
+  </v-cotainer>
+
+</template>
+
+<script setup lang="ts">
+import {ref, reactive} from 'vue'
+
+const valid = ref()
+const form = reactive({
+  email: '',
+  password: ''
+})
+const userStore = user
+
+</script>
+<script lang="ts">
+import {useNuxtApp} from "nuxt/app";
+import {Api} from "nocodb-sdk";
+
+
+// const {$api}: { $api: Api<any> } = useNuxtApp() as any
+export default {
+  methods: {
+    signIn() {
+      this.$api.auth.signin(this.form).then((res) => {
+        console.log(res)
+this.userStore.token = res
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

packages/nc-gui-v2/pages/signup.vue

@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+export default {
+  name: "signup"
+}
+</script>
+
+<style scoped>
+
+</style>

packages/nc-gui-v2/plugins/api.ts

@@ -0,0 +1,41 @@
+import { Api } from 'nocodb-sdk';
+import {defineNuxtPlugin} from "nuxt3/app";
+
+
+export default defineNuxtPlugin((nuxtApp) => {
+
+  // Doing something with nuxtApp
+
+  const api = getApi(null, null)
+
+  nuxtApp.provide('api', api)
+
+
+  return {
+    provide: {
+      api123:api
+    }
+  }
+})
+
+
+export function getApi($store, $axios) {
+  const api = new Api({
+    baseURL: 'http://localhost:8080',
+    headers: {
+      'xc-auth': $store?.state?.users?.token
+    }
+  })
+
+  if($axios) {
+    // overwrite with nuxt axios instance
+    api.instance = $axios
+  }
+  return api
+}
+//
+// export default function({ store: $store, $axios, ...rest }, inject) {
+//   const api = getApi($store, $axios)
+//
+//   inject('api', api)
+// }

packages/nc-gui-v2/plugins/primevue.ts

@@ -0,0 +1,19 @@
+import {defineNuxtPlugin} from "#app";
+import PrimeVue from "primevue/config";
+import Button from "primevue/button";
+import InputText from "primevue/inputtext";
+import Toast from "primevue/toast";
+import Card from "primevue/card";
+import Sidebar from "primevue/sidebar";
+import ToastService from 'primevue/toastservice';
+
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.use(PrimeVue, {ripple: true});
+  nuxtApp.vueApp.use(ToastService);
+  nuxtApp.vueApp.component('Button', Button);
+  nuxtApp.vueApp.component('InputText', InputText);
+  nuxtApp.vueApp.component('Toast', Toast);
+  nuxtApp.vueApp.component('Card', Card);
+  nuxtApp.vueApp.component('Sidebar', Sidebar);
+  //other components that you need
+});

packages/nc-gui-v2/plugins/vuetify.ts

@@ -0,0 +1,21 @@
+import { createVuetify } from 'vuetify'
+import {
+  VApp,
+  VAppBar,
+  VBtn
+} from 'vuetify/components'
+import {defineNuxtPlugin} from "nuxt/app";
+
+// Import everything
+// import * as components from 'vuetify/components'
+
+export default defineNuxtPlugin((nuxtApp) => {
+  // const vuetify = createVuetify({
+  //   components/*: {
+  //     VApp,
+  //     VAppBar,
+  //     VBtn*/
+  //   // }
+  // })
+  // nuxtApp.vueApp.use(vuetify)
+})