Refactor: move common component imports to main.ts

Chore: correct typescript and vite install commands
Chore: tidy styles (removing those commented-out)

README.md

@@ -14,7 +14,7 @@ Alternatively, Opinionate can be used with other GraphQL server-side technologie
 
 - install [Node.js](https://nodejs.org/en)
 - optionally install [Yarn](https://yarnpkg.com/) (rather than using NPM)
-- install [TypeScript](https://www.typescriptlang.org/) (you may need elevated privileges, e.g. prefix with sudo) `yarn global install typescript`
+- install [TypeScript](https://www.typescriptlang.org/) (you may need elevated privileges, e.g. prefix with sudo) `yarn global add typescript`
 - install [PostgreSQL](https://www.postgresql.org)
 - install PostGraphile globally `sudo yarn global add postgraphile` (or `npm -g i postgraphile`)
 - optionally install a good IDE with TypeScript support, e.g. [VS Code](https://code.visualstudio.com)
@@ -52,6 +52,7 @@ GRANT ALL PRIVILEGES ON ALL SEQUENCES IN SCHEMA public TO test;
 ## Example [Vue](https://vuejs.org)/[PrimeVue](https://github.com/primefaces/primevue) front-end, using [Vite](https://github.com/vitejs/vite) and [Villus](https://github.com/logaretm/villus)
 
 - install Vue CLI: `yarn global add @vue/cli`
+- install Vite: `yarn global add vite`
 - initialize: `yarn create @vitejs/app --template vue-ts vue-toh`
 - change to your project directory: `cd vue-toh`
 - you are advised to initialize version control to help track source code changes (e.g. `git init`)

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "opinionate",
-	"version": "0.4.2",
+	"version": "0.4.3",
 	"description": "Automated full stack application code generator",
 	"license": "MIT",
 	"repository": {

templates/primevue/src/App.vue

@@ -44,13 +44,11 @@ ${types.filter(t => t.meta.menu && t.meta.menu=="Admin").map(types => `\
   .confirmation-content i { padding-right: 1rem; }
   .confirmation-content span { line-height: 2; vertical-align: top; }
   .p-float-label .p-checkbox + label { left: 1.5rem; }
-  /* .p-datatable { min-width: 550px; } */
   .p-datatable-resizable .p-datatable-thead > tr > th { white-space: inherit; }
-  .p-datatable-resizable .p-datatable-tbody > tr > td { max-width: 20rem; white-space: inherit; }
+  .p-datatable-resizable .p-datatable-tbody > tr > td { max-width: 20rem; white-space: nowrap; }
   .p-accordion .p-accordion-content { padding: 0; }
   .p-menubar li.p-menuitem:hover .p-submenu-list { display: block; } /* fix for submenus in PrimeVue v3.3.5 */
   div.p-field.p-invalid > span.p-float-label > span.p-inputwrapper > input { background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020); }
-  /* div.p-field > span.p-float-label > small { color: #B00020; } */
   div.p-field.p-invalid > span.p-float-label > label { color: #B00020; top: 34%; }
 
   @media screen and (min-width: 500px) { /* reduce menubar breakpoint */
@@ -80,25 +78,10 @@ ${types.filter(t => t.meta.menu && t.meta.menu=="Admin").map(types => `\
   .op-compact .p-paginator-last,
   .op-compact .p-paginator-current { height: 2rem; min-width: 2rem; }
   .op-compact .p-datatable-thead > tr > th { white-space: normal!important; font-size: 85%; }
-  /* .op-compact .p-dialog-content .p-field { padding-top: 0.3rem; } */
-  /* .op-compact .p-dialog-content .p-checkbox { padding-left: 0.3rem; } */
-  /* .op-compact .p-dialog-content .p-field textarea { width: 100%; height: 4rem; } */
-  /* .op-compact .p-float-label input:focus ~ label, .op-compact .p-float-label input.p-filled ~ label,
-  .op-compact .p-float-label textarea:focus ~ label, .op-compact .p-float-label textarea.p-filled ~ label,
-  .op-compact .p-float-label .p-inputwrapper-focus ~ label,
-  .op-compact .p-float-label .p-inputwrapper-filled ~ label { top: -.5rem; } */
   .op-compact .p-button { padding: 0.2rem; }
   .op-compact .p-button.p-button-icon-only { height: 1.7rem!important; width: 1.7rem; }
   .op-compact .p-input-icon-left > i:first-of-type { position: relative; left: 1.5rem; }
   .op-compact .p-hidden-accessible { width: 1px; overflow: hidden; }
-  /* .op-compact .button-nogap,
-  .op-compact .p-fileupload { margin-right: 0!important; } */
-  /* .op-compact .p-input-icon-left,
-  .op-compact .p-input-icon-right,
-  .op-compact .p-button,
-  .op-compact .p-buttonset { margin-right: 4px!important; } */
-  /* .op-compact .header-button-group { text-align: right; } */
-  /* #app .header-button-group .p-input-icon-left { flex-shrink: 3; } */
   .op-compact.p-menubar { padding: 0.3rem; }
   .op-compact.p-menubar .p-menuitem-link { padding: 0.3rem; }
 </style>

templates/primevue/src/components/types.vue

@@ -66,7 +66,7 @@ ${!types.meta.templates.includes("list") ? "" : `\
     <template #footer>
       <Button label="`+(types.meta.readonly && types.meta.readonly!="false" ? 'Close' : 'Cancel')+`" icon="pi pi-times" class="p-button-text" @click="hideDialog" />
 `+(types.meta.readonly && types.meta.readonly!="false" ? '' : `\
-      <Button label="Save" icon="pi pi-check" class="p-button-text" @click="saveRecord" :disabled="meta.valid == 0 || meta.dirty == 0" />
+      <Button label="Save" icon="pi pi-check" class="p-button-text" @click="saveRecord" :disabled="!meta.valid || !meta.dirty" />
 `)+`    </template>
   </Dialog>
 
@@ -96,22 +96,14 @@ ${!types.meta.templates.includes("list") ? "" : `\
 
 <script lang="ts">
   import { defineComponent, ref } from "vue";
-  import DataTable from "primevue/datatable";
-  import Column from "primevue/column";
-  import InputText from "primevue/inputtext";
-  import InputNumber from "primevue/inputnumber";
-  import Calendar from "primevue/calendar";
-  import Checkbox from "primevue/checkbox";
-  import Textarea from "primevue/textarea";
-  import Button from "primevue/button";
-  import Dialog from "primevue/dialog";
   import { useToast } from "primevue/usetoast";
+  import { FilterMatchMode, FilterOperator } from "primevue/api";
   import { useQuery, useMutation } from "villus";
   import gql from 'graphql-tag';
   import { useField, useForm } from 'vee-validate';
-  // import * as yup from 'yup';
-  // import { toFormValidator } from '@vee-validate/yup';
-  // import * as yup from 'yup';
+  // import * as yup from "yup";
+  // import { toFormValidator } from "@vee-validate/yup";
+  // import * as zod from "zod";
   import { `+types.name+(types.meta.readonly && types.meta.readonly!="false" ? '' : ', '+types.name+'Patch')+` } from '../../models/types';
 
   const `+types.name+`Fields = gql\`fragment `+types.name+`Fields on `+types.name+` {`
@@ -140,17 +132,6 @@ ${!types.meta.templates.includes("list") ? "" : `\
 
   export default defineComponent({
     name: "`+types.name+`",
-    components: {
-      DataTable,
-      Column,
-      InputText,
-      InputNumber,
-      Calendar,
-      Checkbox,
-      Textarea,
-      Button,
-      Dialog,
-    },
     async setup() {
       function formatCurrency(value: string): string | undefined {
         if (value) { const v = +value; return v.toLocaleString("en-GB", {style: "currency", currency: "GBP"}); } };

templates/primevue/src/main.ts

@@ -5,6 +5,15 @@ import { config } from '../package.json';
 import { defineRule } from 'vee-validate';
 import PrimeVue from 'primevue/config';
 import ToastService from 'primevue/toastservice';
+import DataTable from "primevue/datatable";
+import Column from "primevue/column";
+import InputText from "primevue/inputtext";
+import InputNumber from "primevue/inputnumber";
+import Calendar from "primevue/calendar";
+import Checkbox from "primevue/checkbox";
+import Textarea from "primevue/textarea";
+import Button from "primevue/button";
+import Dialog from "primevue/dialog";
 import 'primevue/resources/primevue.min.css';
 import 'primeicons/primeicons.css';
 import 'primeflex/primeflex.css';
@@ -24,9 +33,9 @@ const client = createClient({ url });
 
 const routes = [
   // { path: "/", },
-  { path: '/switchboard', component: Switchboard },
+  { path: '/switchboard', component: Switchboard, props: true },
 ${types.map(types => `\
-  { path: '/${types.name.toLowerCase()}', component: ${types.name} },`).join("\n")}
+  { path: '/${types.name.toLowerCase()}', component: ${types.name}, props: true },`).join("\n")}
 ]
 
 const router = createRouter({
@@ -38,5 +47,14 @@ createApp(App)
 .use(router)
 .use(PrimeVue, {ripple: true})
 .use(ToastService)
+.component('DataTable', DataTable)
+.component('Column', Column)
+.component('InputText', InputText)
+.component('InputNumber', InputNumber)
+.component('Calendar', Calendar)
+.component('Checkbox', Checkbox)
+.component('Textarea', Textarea)
+.component('Button', Button)
+.component('Dialog', Dialog)
 .use(client)
 .mount('#app');