@simsustech/quasar-components 0.1.3 → 0.2.0

package/dist/types/ui/general/ResourcePage.vue.d.ts

@@ -0,0 +1,159 @@
+export interface Props {
+    type?: 'create' | 'update';
+    disabled?: boolean;
+}
+declare const _default: {
+    new (...args: any[]): {
+        $: import("vue").ComponentInternalInstance;
+        $data: {};
+        $props: Partial<{
+            type: "create" | "update";
+            disabled: boolean;
+        }> & Omit<Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+            type: string;
+            disabled: boolean;
+        }>>> & {
+            onCreate?: ((args_0: {
+                data?: any;
+                done: (success?: boolean) => void;
+            }) => any) | undefined;
+            onUpdate?: ((args_0: {
+                data?: any;
+                done: (success?: boolean) => void;
+            }) => any) | undefined;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "type" | "disabled">;
+        $attrs: {
+            [x: string]: unknown;
+        };
+        $refs: {
+            [x: string]: unknown;
+        };
+        $slots: Readonly<{
+            [name: string]: import("vue").Slot | undefined;
+        }>;
+        $root: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null;
+        $parent: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null;
+        $emit: ((event: "create", args_0: {
+            data?: any;
+            done: (success?: boolean) => void;
+        }) => void) & ((event: "update", args_0: {
+            data?: any;
+            done: (success?: boolean) => void;
+        }) => void);
+        $el: any;
+        $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+            type: string;
+            disabled: boolean;
+        }>>> & {
+            onCreate?: ((args_0: {
+                data?: any;
+                done: (success?: boolean) => void;
+            }) => any) | undefined;
+            onUpdate?: ((args_0: {
+                data?: any;
+                done: (success?: boolean) => void;
+            }) => any) | undefined;
+        }, {
+            variables: import("vue").Ref<{}>;
+            functions: import("vue").Ref<{}>;
+        }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+            create: (payload_0: {
+                data?: any;
+                done: (success?: boolean) => void;
+            }) => void;
+        } & {
+            update: (payload_0: {
+                data?: any;
+                done: (success?: boolean) => void;
+            }) => void;
+        }, string, {
+            type: "create" | "update";
+            disabled: boolean;
+        }, {}, string> & {
+            beforeCreate?: ((() => void) | (() => void)[]) | undefined;
+            created?: ((() => void) | (() => void)[]) | undefined;
+            beforeMount?: ((() => void) | (() => void)[]) | undefined;
+            mounted?: ((() => void) | (() => void)[]) | undefined;
+            beforeUpdate?: ((() => void) | (() => void)[]) | undefined;
+            updated?: ((() => void) | (() => void)[]) | undefined;
+            activated?: ((() => void) | (() => void)[]) | undefined;
+            deactivated?: ((() => void) | (() => void)[]) | undefined;
+            beforeDestroy?: ((() => void) | (() => void)[]) | undefined;
+            beforeUnmount?: ((() => void) | (() => void)[]) | undefined;
+            destroyed?: ((() => void) | (() => void)[]) | undefined;
+            unmounted?: ((() => void) | (() => void)[]) | undefined;
+            renderTracked?: (((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[]) | undefined;
+            renderTriggered?: (((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[]) | undefined;
+            errorCaptured?: (((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null, info: string) => boolean | void)[]) | undefined;
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof import("vue").nextTick;
+        $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (args_0: R, args_1: R) => any : (...args: any) => any, options?: import("vue").WatchOptions<boolean> | undefined): import("vue").WatchStopHandle;
+    } & Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+        type: string;
+        disabled: boolean;
+    }>>> & {
+        onCreate?: ((args_0: {
+            data?: any;
+            done: (success?: boolean) => void;
+        }) => any) | undefined;
+        onUpdate?: ((args_0: {
+            data?: any;
+            done: (success?: boolean) => void;
+        }) => any) | undefined;
+    } & import("vue").ShallowUnwrapRef<{
+        variables: import("vue").Ref<{}>;
+        functions: import("vue").Ref<{}>;
+    }> & {} & import("vue").ComponentCustomProperties & {};
+    __isFragment?: undefined;
+    __isTeleport?: undefined;
+    __isSuspense?: undefined;
+} & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+    type: string;
+    disabled: boolean;
+}>>> & {
+    onCreate?: ((args_0: {
+        data?: any;
+        done: (success?: boolean) => void;
+    }) => any) | undefined;
+    onUpdate?: ((args_0: {
+        data?: any;
+        done: (success?: boolean) => void;
+    }) => any) | undefined;
+}, {
+    variables: import("vue").Ref<{}>;
+    functions: import("vue").Ref<{}>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    create: (payload_0: {
+        data?: any;
+        done: (success?: boolean) => void;
+    }) => void;
+} & {
+    update: (payload_0: {
+        data?: any;
+        done: (success?: boolean) => void;
+    }) => void;
+}, string, {
+    type: "create" | "update";
+    disabled: boolean;
+}, {}, string> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+    $slots: {
+        default: (_: {}) => any;
+        header: (_: {}) => any;
+    };
+});
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? P[K] & {
+        default: D[K];
+    } : P[K];
+};

package/dist/types/ui/general/ResponsiveDialog.vue.d.ts

@@ -0,0 +1,108 @@
+export interface Props {
+    display?: boolean;
+}
+declare const _default: {
+    new (...args: any[]): {
+        $: import("vue").ComponentInternalInstance;
+        $data: {};
+        $props: Partial<{}> & Omit<Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>> & {
+            onSubmit?: ((args_0: {
+                done: (success?: boolean) => void;
+            }) => any) | undefined;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>;
+        $attrs: {
+            [x: string]: unknown;
+        };
+        $refs: {
+            [x: string]: unknown;
+        };
+        $slots: Readonly<{
+            [name: string]: import("vue").Slot | undefined;
+        }>;
+        $root: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null;
+        $parent: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null;
+        $emit: (event: "submit", args_0: {
+            done: (success?: boolean) => void;
+        }) => void;
+        $el: any;
+        $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>> & {
+            onSubmit?: ((args_0: {
+                done: (success?: boolean) => void;
+            }) => any) | undefined;
+        }, {
+            variables: import("vue").Ref<{}>;
+            functions: import("vue").Ref<{
+                open: () => boolean;
+                close: () => boolean;
+                toggle: () => boolean;
+            }>;
+        }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+            submit: (payload_0: {
+                done: (success?: boolean) => void;
+            }) => void;
+        }, string, {}, {}, string> & {
+            beforeCreate?: ((() => void) | (() => void)[]) | undefined;
+            created?: ((() => void) | (() => void)[]) | undefined;
+            beforeMount?: ((() => void) | (() => void)[]) | undefined;
+            mounted?: ((() => void) | (() => void)[]) | undefined;
+            beforeUpdate?: ((() => void) | (() => void)[]) | undefined;
+            updated?: ((() => void) | (() => void)[]) | undefined;
+            activated?: ((() => void) | (() => void)[]) | undefined;
+            deactivated?: ((() => void) | (() => void)[]) | undefined;
+            beforeDestroy?: ((() => void) | (() => void)[]) | undefined;
+            beforeUnmount?: ((() => void) | (() => void)[]) | undefined;
+            destroyed?: ((() => void) | (() => void)[]) | undefined;
+            unmounted?: ((() => void) | (() => void)[]) | undefined;
+            renderTracked?: (((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[]) | undefined;
+            renderTriggered?: (((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[]) | undefined;
+            errorCaptured?: (((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null, info: string) => boolean | void)[]) | undefined;
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof import("vue").nextTick;
+        $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (args_0: R, args_1: R) => any : (...args: any) => any, options?: import("vue").WatchOptions<boolean> | undefined): import("vue").WatchStopHandle;
+    } & Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>> & {
+        onSubmit?: ((args_0: {
+            done: (success?: boolean) => void;
+        }) => any) | undefined;
+    } & import("vue").ShallowUnwrapRef<{
+        variables: import("vue").Ref<{}>;
+        functions: import("vue").Ref<{
+            open: () => boolean;
+            close: () => boolean;
+            toggle: () => boolean;
+        }>;
+    }> & {} & import("vue").ComponentCustomProperties & {};
+    __isFragment?: undefined;
+    __isTeleport?: undefined;
+    __isSuspense?: undefined;
+} & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>> & {
+    onSubmit?: ((args_0: {
+        done: (success?: boolean) => void;
+    }) => any) | undefined;
+}, {
+    variables: import("vue").Ref<{}>;
+    functions: import("vue").Ref<{
+        open: () => boolean;
+        close: () => boolean;
+        toggle: () => boolean;
+    }>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    submit: (payload_0: {
+        done: (success?: boolean) => void;
+    }) => void;
+}, string, {}, {}, string> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+    $slots: {
+        title: (_: {}) => any;
+        default: (_: {}) => any;
+    };
+});
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

package/dist/types/ui/general/index.d.ts

@@ -1,2 +1,5 @@
 export { default as QSubmitButton } from './QSubmitButton.vue';
 export { default as QStyledCard } from './QStyledCard.vue';
+export { default as ResponsiveDialog } from './ResponsiveDialog.vue';
+export { default as ResourcePage } from './ResourcePage.vue';
+export { default as QLanguageSelect } from './QLanguageSelect.vue';

package/dist/types/virtualModules.d.ts

@@ -1,2 +1,3 @@
 export declare const FlagIcon: (locale: string) => string;
 export declare const Icon: (icon: string) => string;
+export declare const FormItem: (field: string) => string;

package/dist/virtualModules.d.ts

@@ -1,2 +1,3 @@
 export declare const FlagIcon: (locale: string) => string;
 export declare const Icon: (icon: string) => string;
+export declare const FormItem: (field: string) => string;

package/dist/virtualModules.js

@@ -1,2 +1,3 @@
-export var FlagIcon = function (locale) { return "\n  import { computed, ref, watch, h } from 'vue'\n  import { QuasarLanguageCodes, useQuasar, QIcon } from 'quasar'\n  import { useLang, loadLang } from '".concat(new URL("../src/ui/flags/lang", import.meta.url).pathname, "'\n  import icon from '").concat(new URL("../src/ui/flags/assets/".concat(locale, ".svg"), import.meta.url).pathname, "'\n  export default {\n  setup(props, context) {\n    const $q = useQuasar()\n    const lang = useLang()\n    if (lang.value.isoName !== $q.lang.isoName) loadLang($q.lang.isoName)\n    watch($q.lang, (val) => {\n      loadLang($q.lang.isoName)\n    })\n    \n    const country = computed(\n      () => lang.value.countries['").concat(locale, "']\n    )\n    // @ts-ignore\n    const language = computed(() => lang.value.languages['").concat(locale, "'])\n    const variables = ref({\n      country,\n      language\n      // header: lang.value.some.nested.prop\n    })\n    const functions = ref({\n      // submit\n    })\n\n    context.expose({\n      variables,\n      functions\n    })\n\n    // return the render function\n    return () => h(QIcon, { name: `img:${icon}` })\n  }}\n"); };
-export var Icon = function (icon) { return "\n  import { computed, ref, watch, h } from 'vue'\n  import { QuasarLanguageCodes, useQuasar, QIcon } from 'quasar'\n  import icon from '".concat(new URL("../src/ui/icons/assets/".concat(icon, ".svg"), import.meta.url).pathname, "'\n  import icons from '").concat(new URL("../src/ui/icons/icons.ts", import.meta.url).pathname, "'\n  export default {\n  setup(props, context) {\n    const $q = useQuasar()\n\n    const variables = ref(icons['").concat(icon, "'])\n\n    const functions = ref({\n      // submit\n    })\n\n    context.expose({\n      variables,\n      functions\n    })\n\n    // return the render function\n    return () => h(QIcon, { name: `img:${icon}` })\n  }}\n"); };
+export var FlagIcon = function (locale) { return "\n  import { computed, ref, watch, h } from 'vue'\n  import { useQuasar, QIcon } from 'quasar'\n  import { useLang, loadLang } from '".concat(new URL("../src/ui/flags/lang", import.meta.url).pathname, "'\n  import icon from '").concat(new URL("../src/ui/flags/assets/".concat(locale, ".svg"), import.meta.url).pathname, "'\n  export default {\n  setup(props, context) {\n    const $q = useQuasar()\n    const lang = useLang()\n    if (lang.value.isoName !== $q.lang.isoName) loadLang($q.lang.isoName)\n    watch($q.lang, (val) => {\n      loadLang($q.lang.isoName)\n    })\n    \n    const country = computed(\n      () => lang.value.countries['").concat(locale, "']\n    )\n    // @ts-ignore\n    // const language = computed(() => lang.value.languages['").concat(locale, "'])\n    const language = computed(() => lang.value.languages['").concat(locale, "'])\n    const variables = ref({\n      country,\n      language\n      // header: lang.value.some.nested.prop\n    })\n    const functions = ref({\n      // submit\n    })\n\n    context.expose({\n      variables,\n      functions\n    })\n\n    // return the render function\n    return () => h(QIcon, { name: `img:${icon}` })\n  }}\n"); };
+export var Icon = function (icon) { return "\n  import { computed, ref, watch, h } from 'vue'\n  import { useQuasar, QIcon } from 'quasar'\n  import icon from '".concat(new URL("../src/ui/icons/assets/".concat(icon, ".svg"), import.meta.url).pathname, "'\n  import labels from '").concat(new URL("../src/ui/icons/labels.ts", import.meta.url).pathname, "'\n  export default {\n  setup(props, context) {\n    const $q = useQuasar()\n\n    const variables = ref(labels['").concat(icon, "'])\n\n    const functions = ref({\n      // submit\n    })\n\n    context.expose({\n      variables,\n      functions\n    })\n\n    // return the render function\n    return () => h(QIcon, { name: `img:${icon}` })\n  }}\n"); };
+export var FormItem = function (field) { return "\nimport { ref, watch, useAttrs, h } from 'vue'\nimport { QItem, QItemLabel, QItemSection, useQuasar } from 'quasar'\nimport { useLang, loadLang } from '".concat(new URL("../src/ui/form/lang/index.ts", import.meta.url).pathname, "'\n\nexport default {\n  setup(props, context) {\n    const $q = useQuasar()\n    const attrs = useAttrs()\n\n    const lang = useLang()\n\n    if (lang.value.isoName !== $q.lang.isoName) loadLang($q.lang.isoName)\n    watch($q.lang, (val) => {\n      loadLang($q.lang.isoName)\n    })\n\n    const variables = ref({})\n\n    const functions = ref({\n      // submit\n    })\n\n    context.expose({\n      variables,\n      functions\n    })\n\n    // return the render function\n    return () =>\n      h(QItem, { attrs }, [\n        h(QItemSection, {}, [\n          h(QItemLabel, { overline: true }, 'field'),\n          h(QItemLabel, {}, 'field')\n        ])\n      ])\n  }\n}\n"); };

package/dist/vite-plugin.js

@@ -35,6 +35,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     }
 };
 import { promises } from 'fs';
+import { Icon, FlagIcon } from './virtualModules.js';
 var readFile = promises.readFile;
 export default function (_a) {
     var _b = _a === void 0 ? {} : _a, buildFromSrc = _b.buildFromSrc;
@@ -51,20 +52,40 @@ export default function (_a) {
                     name = pkgJson.name;
                     return [2 /*return*/, {
                             name: "".concat(name, "-plugin"),
+                            enforce: 'pre',
+                            resolveId: function (id) {
+                                if (id.includes('.flag'))
+                                    return id;
+                                else if (id.includes('.icon'))
+                                    return id;
+                            },
+                            load: function (id) {
+                                if (id.includes('.flag')) {
+                                    var locale = id.slice(0, -5);
+                                    var flag = FlagIcon(locale);
+                                    return flag;
+                                }
+                                else if (id.includes('.icon')) {
+                                    var iconId = id.slice(0, -5);
+                                    var icon = Icon(iconId);
+                                    return icon;
+                                }
+                            },
                             config: function (config, _a) {
                                 var mode = _a.mode;
                                 if (mode === 'development' || buildFromSrc) {
                                     var alias = Object.entries(exports)
+                                        .filter(function (_a) {
+                                        var key = _a[0], val = _a[1];
+                                        return val.src;
+                                    })
                                         .map(function (_a) {
                                         var key = _a[0], val = _a[1];
                                         return {
-                                            find: name + key.slice(1),
+                                            find: new RegExp("^".concat(name.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') + key.slice(1), "$")),
+                                            // name: name + key.slice(1),
                                             replacement: new URL('.' + val.src, import.meta.url).pathname
                                         };
-                                    })
-                                        .sort(function (a, b) {
-                                        return (b.find.match(/\//g) || []).length -
-                                            (a.find.match(/\//g) || []).length;
                                     });
                                     return {
                                         resolve: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simsustech/quasar-components",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "author": "Stefan van Herwijnen",
   "description": "High level components for Quasar Framework",
   "license": "MIT",
@@ -27,6 +27,11 @@
       "import": "./dist/icons.js",
       "src": "./src/ui/icons/index.ts"
     },
+    "./form": {
+      "types": "./dist/types/ui/form/index.d.ts",
+      "import": "./dist/form.js",
+      "src": "./src/ui/form/index.ts"
+    },
     "./css": {
       "import": "./dist/style.css"
     },

package/src/ui/authentication/lang/en-US.ts

@@ -86,8 +86,7 @@ const lang: Language = {
     alreadyRegistered: 'Email address is already registered.'
   },
   verification: {
-    slider:
-      'Sleep a.u.b. de onderstaande balk helemaal naar rechts tot deze groen wordt.'
+    slider: 'Please drag the slider below all the way to the right.'
   }
 }
 

package/src/ui/authentication/lang/nl.ts

@@ -86,8 +86,7 @@ const lang: Language = {
     alreadyRegistered: 'Email adres is al geregistreerd.'
   },
   verification: {
-    slider:
-      'Please drag the slider all the way to the right until it turns green.'
+    slider: 'Sleep a.u.b. het onderstaande bolletje helemaal naar rechts.'
   }
 }
 

package/src/ui/flags/README.md

@@ -16,7 +16,7 @@ Tree-shakeable flag icons for Quasar Framework built with Vite.
 </template>
 
 <script setup>
-  import {enUsIcon} from '@simsustech/quasar-components/flags'
+  import {enUS} from '@simsustech/quasar-components/flags'
   ...
 </script>
 ```

package/src/ui/form/BooleanItem.vue

@@ -0,0 +1,34 @@
+<template>
+  <q-item v-bind="attrs">
+    <q-item-section>
+      <q-item-label overline>
+        {{ label }}
+      </q-item-label>
+      <q-item-label>
+        {{ modelValue ? lang.yes : lang.no }}
+      </q-item-label>
+    </q-item-section>
+  </q-item>
+</template>
+
+<script setup lang="ts">
+import { watch, useAttrs } from 'vue'
+import { QItem, QItemLabel, QItemSection, useQuasar } from 'quasar'
+import { useLang, loadLang } from './lang'
+
+export interface Props {
+  modelValue: boolean
+  label: string
+}
+defineProps<Props>()
+
+const attrs = useAttrs()
+
+const lang = useLang()
+
+const $q = useQuasar()
+if (lang.value.isoName !== $q.lang.isoName) loadLang($q.lang.isoName)
+watch($q.lang, (val) => {
+  loadLang($q.lang.isoName)
+})
+</script>

package/src/ui/form/BooleanSelect.vue

@@ -0,0 +1,55 @@
+<template>
+  <q-select
+    v-bind="attrs"
+    :rules="validations"
+    :model-value="modelValue"
+    :options="booleanOptions"
+    :label="`${label}${required ? '*' : ''}`"
+    emit-value
+    map-options
+    @update:model-value="$emit('update:modelValue', $event)"
+  ></q-select>
+</template>
+
+<script setup lang="ts">
+import { watch, useAttrs, ref } from 'vue'
+import { QSelect, useQuasar, ValidationRule } from 'quasar'
+import { useLang, loadLang } from './lang'
+
+export interface Props {
+  modelValue: boolean
+  label?: string
+  required?: boolean
+}
+const props = defineProps<Props>()
+
+const attrs = useAttrs()
+
+const lang = useLang()
+
+const $q = useQuasar()
+if (lang.value.isoName !== $q.lang.isoName) loadLang($q.lang.isoName)
+watch($q.lang, (val) => {
+  loadLang($q.lang.isoName)
+})
+
+const booleanOptions = [
+  {
+    label: lang.value.yes,
+    value: true
+  },
+  {
+    label: lang.value.no,
+    value: false
+  }
+]
+
+const validations = ref<ValidationRule[]>([])
+
+if (props.required)
+  validations.value.push(
+    (val: { label: string; value: string }) =>
+      !!val || lang.value.validations.fieldRequired
+  )
+defineEmits(['update:modelValue'])
+</script>

package/src/ui/form/DateInput.vue

@@ -0,0 +1,70 @@
+<template>
+  <q-input
+    v-bind="attrs"
+    :rules="validations"
+    :model-value="modelValue"
+    :label="`${label}${required ? '*' : ''}`"
+    mask="date"
+    class="q-pr-md"
+    @update:model-value="$emit('update:modelValue', $event)"
+  >
+    <template v-slot:append>
+      <q-icon
+        v-if="clearable"
+        name="clear"
+        class="cursor-pointer"
+        @click="$emit('update:modelValue', '')"
+      />
+      <q-icon name="event" class="cursor-pointer">
+        <q-popup-proxy cover transition-show="scale" transition-hide="scale">
+          <q-date
+            v-bind="date"
+            :model-value="modelValue"
+            @update:model-value="$emit('update:modelValue', $event)"
+          >
+            <div class="row items-center justify-end">
+              <q-btn
+                v-close-popup
+                :label="lang.buttons.close"
+                color="primary"
+                flat
+              />
+            </div>
+          </q-date>
+        </q-popup-proxy>
+      </q-icon>
+    </template>
+  </q-input>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, useAttrs } from 'vue'
+import { QDateProps, QInput, useQuasar } from 'quasar'
+import { useLang, loadLang } from './lang'
+
+export interface Props {
+  modelValue?: string | null
+  label?: string
+  required?: boolean
+  clearable?: boolean
+  date?: Partial<QDateProps>
+}
+const props = defineProps<Props>()
+
+const attrs = useAttrs()
+
+const lang = useLang()
+
+const $q = useQuasar()
+if (lang.value.isoName !== $q.lang.isoName) loadLang($q.lang.isoName)
+watch($q.lang, (val) => {
+  loadLang($q.lang.isoName)
+})
+
+const validations = ref<((val: string) => boolean | string)[]>([])
+
+if (props.required)
+  validations.value.push(
+    (val: string) => !!val || lang.value.validations.fieldRequired
+  )
+</script>

package/src/ui/form/FormInput.vue

@@ -0,0 +1,44 @@
+<template>
+  <q-input
+    v-bind="attrs"
+    :rules="validations"
+    :model-value="modelValue"
+    :label="`${field ? lang.fields[field] : label ? label : ''}${
+      required ? '*' : ''
+    }`"
+    @update:model-value="$emit('update:modelValue', $event)"
+  ></q-input>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, useAttrs } from 'vue'
+import { QInput, useQuasar, ValidationRule } from 'quasar'
+import { useLang, loadLang } from './lang'
+
+export type FormItems = 'name' | 'firstName' | 'surname' | 'address' | 'city'
+
+export interface Props {
+  modelValue?: string | null
+  field?: FormItems
+  label?: string
+  required?: boolean
+}
+const props = defineProps<Props>()
+
+const attrs = useAttrs()
+
+const lang = useLang()
+
+const $q = useQuasar()
+if (lang.value.isoName !== $q.lang.isoName) loadLang($q.lang.isoName)
+watch($q.lang, (val) => {
+  loadLang($q.lang.isoName)
+})
+
+const validations = ref<ValidationRule[]>([])
+
+if (props.required)
+  validations.value.push(
+    (val: string) => !!val || lang.value.validations.fieldRequired
+  )
+</script>

package/src/ui/form/FormItem.vue

@@ -0,0 +1,50 @@
+<template>
+  <q-item v-bind="attrs">
+    <q-item-section v-if="slots.avatar" avatar>
+      <slot name="avatar" />
+    </q-item-section>
+    <q-item-section>
+      <q-item-label overline>
+        {{ label ? label : field ? lang.fields[field] : '' }}
+      </q-item-label>
+      <q-item-label>
+        {{ modelValue || '-' }}
+      </q-item-label>
+    </q-item-section>
+    <q-item-section v-if="slots.side" side>
+      <slot name="side" />
+    </q-item-section>
+  </q-item>
+</template>
+
+<script setup lang="ts">
+import { watch, useAttrs, useSlots } from 'vue'
+import { QItem, QItemLabel, QItemSection, useQuasar } from 'quasar'
+import { useLang, loadLang } from './lang'
+
+export type FormItems =
+  | 'name'
+  | 'firstName'
+  | 'surname'
+  | 'address'
+  | 'city'
+  | 'postalCode'
+
+export interface Props {
+  modelValue?: string
+  label?: string
+  field?: FormItems
+}
+defineProps<Props>()
+
+const attrs = useAttrs()
+const slots = useSlots()
+
+const lang = useLang()
+
+const $q = useQuasar()
+if (lang.value.isoName !== $q.lang.isoName) loadLang($q.lang.isoName)
+watch($q.lang, (val) => {
+  loadLang($q.lang.isoName)
+})
+</script>