Browse Source

wip: primevue integration

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/2524/head
Pranav C 2 years ago
parent
commit
beecfc4852
  1. 7
      packages/nc-gui-v2/app.vue
  2. BIN
      packages/nc-gui-v2/assets/icon.png
  3. 9
      packages/nc-gui-v2/composables/user.ts
  4. 19
      packages/nc-gui-v2/layouts/default.vue
  5. 33
      packages/nc-gui-v2/nuxt.config.ts
  6. 18841
      packages/nc-gui-v2/package-lock.json
  7. 12
      packages/nc-gui-v2/package.json
  8. 18
      packages/nc-gui-v2/pages/dashboard.vue
  9. 42
      packages/nc-gui-v2/pages/form.vue
  10. 40
      packages/nc-gui-v2/pages/index.vue
  11. 72
      packages/nc-gui-v2/pages/signin.vue
  12. 13
      packages/nc-gui-v2/pages/signup.vue
  13. 41
      packages/nc-gui-v2/plugins/api.ts
  14. 19
      packages/nc-gui-v2/plugins/primevue.ts
  15. 21
      packages/nc-gui-v2/plugins/vuetify.ts

7
packages/nc-gui-v2/app.vue

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

BIN
packages/nc-gui-v2/assets/icon.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 67 KiB

9
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'
})

19
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>

33
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'],
buildModules: [
'nuxt-vite'
]
// modules: ['@nuxtjs/tailwindcss'],
// buildModules: [
// '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',
}
}
})

18841
packages/nc-gui-v2/package-lock.json generated

File diff suppressed because it is too large Load Diff

12
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"
}
}

18
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>

42
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>

40
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>
export default {
name: "index"
<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 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>

72
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>

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

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

41
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)
// }

19
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
});

21
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)
})
Loading…
Cancel
Save