@simsustech/quasar-components 0.1.2 → 0.1.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @simsustech/quasar-components
 
+## 0.1.3
+
+### Patch Changes
+
+- 0926b41: Bind submit button to forms
+
 ## 0.1.2
 
 ### Patch Changes

package/dist/{QSubmitButton.vue_vue_type_script_setup_true_lang.fe90878f.js → QSubmitButton.vue_vue_type_script_setup_true_lang.1d0c06eb.js}

@@ -80,9 +80,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         label: __props.isNextButton ? unref(lang2).next : unref(lang2).submit,
         color: "primary",
         loading: __props.loading || unref(loadingInternal),
-        type: __props.useForm ? "submit" : void 0,
+        type: "submit",
         onClick: submit
-      }), null, 16, ["label", "loading", "type"]);
+      }), null, 16, ["label", "loading"]);
     };
   }
 });

package/dist/authentication.js

@@ -1,6 +1,6 @@
 import { useQuasar, QForm, QInput, QStep, QStepperNavigation, QStepper, QIcon, QBtn, QSlider, QItemSection, QItem, QList, QMenu } from "quasar";
 import { ref, defineComponent, watch, computed, openBlock, createBlock, unref, mergeProps, withCtx, createVNode, renderSlot, toRef, createCommentVNode, createElementBlock, Fragment, renderList, createTextVNode, toDisplayString } from "vue";
-import { _ as _sfc_main$c } from "./QSubmitButton.vue_vue_type_script_setup_true_lang.fe90878f.js";
+import { _ as _sfc_main$c } from "./QSubmitButton.vue_vue_type_script_setup_true_lang.1d0c06eb.js";
 const lang$1 = {
   isoName: "en-US",
   myAccount: "Account",
@@ -422,7 +422,9 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
       return openBlock(), createBlock(unref(QForm), mergeProps({
         ref_key: "formRef",
         ref: formRef
-      }, __props.form), {
+      }, __props.form, {
+        onSubmit: _cache[1] || (_cache[1] = (e) => submit)
+      }), {
         default: withCtx(() => [
           createVNode(_component_q_input, mergeProps(__props.input, {
             id: "email",
@@ -534,7 +536,9 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
         ref_key: "formRef",
         ref: formRef,
         class: "q-gutter-md"
-      }, __props.form), {
+      }, __props.form, {
+        onSubmit: _cache[3] || (_cache[3] = (e) => submit)
+      }), {
         default: withCtx(() => [
           createVNode(_sfc_main$a, mergeProps(__props.input, {
             modelValue: otp.value,
@@ -655,10 +659,12 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
                 step.value === "requestOtp" ? (openBlock(), createBlock(_sfc_main$c, {
                   key: 0,
                   "is-next-button": "",
+                  form: "requestOtpForm",
                   onSubmit: (_a = requestOtpFormRef.value) == null ? void 0 : _a.functions.submit
                 }, null, 8, ["onSubmit"])) : createCommentVNode("", true),
                 step.value === "changeEmail" ? (openBlock(), createBlock(_sfc_main$c, {
                   key: 1,
+                  form: "emailChangeForm",
                   onSubmit: (_b = emailChangeFormRef.value) == null ? void 0 : _b.functions.submit
                 }, null, 8, ["onSubmit"])) : createCommentVNode("", true)
               ];
@@ -675,6 +681,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
               createVNode(_sfc_main$b, {
                 ref_key: "requestOtpFormRef",
                 ref: requestOtpFormRef,
+                form: { id: "requestOtpForm" },
                 input: __props.input,
                 onSubmit: requestOtp
               }, null, 8, ["input"])
@@ -689,6 +696,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
               createVNode(_sfc_main$9, {
                 ref_key: "emailChangeFormRef",
                 ref: emailChangeFormRef,
+                form: { id: "emailChangeForm" },
                 email: email.value,
                 input: __props.input,
                 onSubmit: changeEmail
@@ -779,7 +787,9 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
         ref_key: "formRef",
         ref: formRef,
         class: "q-gutter-md"
-      }, __props.form), {
+      }, __props.form, {
+        onSubmit: _cache[5] || (_cache[5] = (e) => submit)
+      }), {
         default: withCtx(() => [
           createVNode(_sfc_main$a, mergeProps(__props.input, {
             modelValue: otp.value,
@@ -920,10 +930,12 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
                 step.value === "requestOtp" ? (openBlock(), createBlock(_sfc_main$c, {
                   key: 0,
                   "is-next-button": "",
+                  form: "requestOtpForm",
                   onSubmit: (_a = requestOtpFormRef.value) == null ? void 0 : _a.functions.submit
                 }, null, 8, ["onSubmit"])) : createCommentVNode("", true),
                 step.value === "changePassword" ? (openBlock(), createBlock(_sfc_main$c, {
                   key: 1,
+                  form: "passwordChangeForm",
                   onSubmit: (_b = passwordChangeFormRef.value) == null ? void 0 : _b.functions.submit
                 }, null, 8, ["onSubmit"])) : createCommentVNode("", true)
               ];
@@ -940,6 +952,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
               createVNode(_sfc_main$b, {
                 ref_key: "requestOtpFormRef",
                 ref: requestOtpFormRef,
+                form: { id: "requestOtpForm" },
                 input: __props.input,
                 onSubmit: requestOtp
               }, null, 8, ["input"])
@@ -954,6 +967,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
               createVNode(_sfc_main$7, {
                 ref_key: "passwordChangeFormRef",
                 ref: passwordChangeFormRef,
+                form: { id: "passwordChangeForm" },
                 email: email.value,
                 input: __props.input,
                 onSubmit: changePassword
@@ -1039,7 +1053,9 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
         ref_key: "formRef",
         ref: formRef,
         class: "q-gutter-md"
-      }, __props.form), {
+      }, __props.form, {
+        onSubmit: _cache[4] || (_cache[4] = (e) => submit)
+      }), {
         default: withCtx(() => [
           !__props.useUsername ? (openBlock(), createBlock(_component_q_input, mergeProps({ key: 0 }, __props.input, {
             id: "email",
@@ -1261,7 +1277,9 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
         ref_key: "formRef",
         ref: formRef,
         class: "q-gutter-md"
-      }, __props.form), {
+      }, __props.form, {
+        onSubmit: _cache[6] || (_cache[6] = (e) => submit)
+      }), {
         default: withCtx(() => [
           !__props.useUsername ? (openBlock(), createBlock(_component_q_input, mergeProps({ key: 0 }, __props.input, {
             id: "email",

package/dist/general.js

@@ -1,5 +1,5 @@
-import { l as loadLang, u as useLang } from "./QSubmitButton.vue_vue_type_script_setup_true_lang.fe90878f.js";
-import { _ } from "./QSubmitButton.vue_vue_type_script_setup_true_lang.fe90878f.js";
+import { l as loadLang, u as useLang } from "./QSubmitButton.vue_vue_type_script_setup_true_lang.1d0c06eb.js";
+import { _ } from "./QSubmitButton.vue_vue_type_script_setup_true_lang.1d0c06eb.js";
 import { useQuasar, QCard, QCardSection, QCardActions } from "quasar";
 import { defineComponent, watch, ref, openBlock, createBlock, unref, withCtx, renderSlot, createVNode, createElementVNode, normalizeProps, guardReactiveProps } from "vue";
 const _hoisted_1 = { class: "text-h6" };

package/dist/types/ui/authentication/ConsentList.vue.d.ts

@@ -74,8 +74,8 @@ declare const _default: {
     functions: import("vue").Ref<{}>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {}, {}, string> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
 export default _default;
-declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-declare type __VLS_TypePropsToRuntimeProps<T> = {
+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]>>;
     } : {

package/dist/types/ui/authentication/EmailChangeForm.vue.d.ts

@@ -1,7 +1,7 @@
 import { QFormProps, QInputProps } from 'quasar';
 export interface Props {
     email: string;
-    form?: QFormProps & HTMLFormElement;
+    form?: QFormProps & Partial<HTMLFormElement> & Partial<HTMLDivElement>;
     input?: Omit<QInputProps, 'id' | 'name' | 'modelValue' | 'label' | 'rules' | 'type' | 'lazy-rules' | 'autofocus' | ('label' & {
         style?: Partial<CSSStyleDeclaration>;
     })>;
@@ -136,8 +136,8 @@ declare const _default: {
     };
 });
 export default _default;
-declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-declare type __VLS_TypePropsToRuntimeProps<T> = {
+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]>>;
     } : {

package/dist/types/ui/authentication/EmailChangeStepper.vue.d.ts

@@ -157,8 +157,8 @@ declare const _default: {
     }) => void;
 }, string, {}, {}, string> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
 export default _default;
-declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-declare type __VLS_TypePropsToRuntimeProps<T> = {
+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]>>;
     } : {

package/dist/types/ui/authentication/LoginButton.vue.d.ts

@@ -58,8 +58,8 @@ declare const _default: {
     };
 });
 export default _default;
-declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-declare type __VLS_TypePropsToRuntimeProps<T> = {
+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]>>;
     } : {

package/dist/types/ui/authentication/LoginForm.vue.d.ts

@@ -2,7 +2,7 @@ import { QFormProps, QInputProps } from 'quasar';
 export interface Props {
     useUsername?: boolean;
     passwordForgotUrl?: string;
-    form?: QFormProps & HTMLFormElement;
+    form?: QFormProps & Partial<HTMLFormElement> & Partial<HTMLDivElement>;
     input?: Omit<QInputProps, 'id' | 'name' | 'modelValue' | 'label' | 'rules' | 'type' | 'lazy-rules' | 'autofocus' | ('label' & {
         style?: Partial<CSSStyleDeclaration>;
     })>;
@@ -146,8 +146,8 @@ declare const _default: {
     };
 });
 export default _default;
-declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-declare type __VLS_TypePropsToRuntimeProps<T> = {
+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]>>;
     } : {

package/dist/types/ui/authentication/OtpInput.vue.d.ts

@@ -58,8 +58,8 @@ declare const _default: {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", {}, {}, string> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
 export default _default;
-declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-declare type __VLS_TypePropsToRuntimeProps<T> = {
+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]>>;
     } : {

package/dist/types/ui/authentication/PasswordChangeForm.vue.d.ts

@@ -2,7 +2,7 @@ import { QFormProps, QInputProps } from 'quasar';
 export interface Props {
     email: string;
     minimumPasswordLength?: number;
-    form?: QFormProps & HTMLFormElement;
+    form?: QFormProps & Partial<HTMLFormElement> & Partial<HTMLDivElement>;
     input?: Omit<QInputProps, 'id' | 'name' | 'modelValue' | 'label' | 'rules' | 'type' | 'lazy-rules' | 'autofocus' | ('label' & {
         style?: Partial<CSSStyleDeclaration>;
     })>;
@@ -13,8 +13,8 @@ declare const _default: {
         $data: {};
         $props: Partial<{
             minimumPasswordLength: number;
-            form: QFormProps & HTMLFormElement;
-            input: Omit<QInputProps, "label" | "name" | "type" | "modelValue" | "id" | "lazy-rules" | "rules" | "autofocus" | ("label" & {
+            form: QFormProps & Partial<HTMLFormElement> & Partial<HTMLDivElement>;
+            input: Omit<QInputProps, "name" | "type" | "label" | "modelValue" | "id" | "lazy-rules" | "rules" | "autofocus" | ("label" & {
                 style?: Partial<CSSStyleDeclaration> | undefined;
             })>;
         }> & Omit<Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
@@ -77,8 +77,8 @@ declare const _default: {
             }) => void;
         }, string, {
             minimumPasswordLength: number;
-            form: QFormProps & HTMLFormElement;
-            input: Omit<QInputProps, "label" | "name" | "type" | "modelValue" | "id" | "lazy-rules" | "rules" | "autofocus" | ("label" & {
+            form: QFormProps & Partial<HTMLFormElement> & Partial<HTMLDivElement>;
+            input: Omit<QInputProps, "name" | "type" | "label" | "modelValue" | "id" | "lazy-rules" | "rules" | "autofocus" | ("label" & {
                 style?: Partial<CSSStyleDeclaration> | undefined;
             })>;
         }, {}, string> & {
@@ -156,8 +156,8 @@ declare const _default: {
     }) => void;
 }, string, {
     minimumPasswordLength: number;
-    form: QFormProps & HTMLFormElement;
-    input: Omit<QInputProps, "label" | "name" | "type" | "modelValue" | "id" | "lazy-rules" | "rules" | "autofocus" | ("label" & {
+    form: QFormProps & Partial<HTMLFormElement> & Partial<HTMLDivElement>;
+    input: Omit<QInputProps, "name" | "type" | "label" | "modelValue" | "id" | "lazy-rules" | "rules" | "autofocus" | ("label" & {
         style?: Partial<CSSStyleDeclaration> | undefined;
     })>;
 }, {}, string> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
@@ -171,8 +171,8 @@ declare const _default: {
     };
 });
 export default _default;
-declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-declare type __VLS_TypePropsToRuntimeProps<T> = {
+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]>>;
     } : {
@@ -180,7 +180,7 @@ declare type __VLS_TypePropsToRuntimeProps<T> = {
         required: true;
     };
 };
-declare type __VLS_WithDefaults<P, D> = {
+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/authentication/PasswordChangeStepper.vue.d.ts

@@ -157,8 +157,8 @@ declare const _default: {
     }) => void;
 }, string, {}, {}, string> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
 export default _default;
-declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-declare type __VLS_TypePropsToRuntimeProps<T> = {
+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]>>;
     } : {

package/dist/types/ui/authentication/RegisterForm.vue.d.ts

@@ -7,7 +7,7 @@ export interface Props {
         rules?: ((val: string) => boolean)[];
     }[];
     minimumPasswordLength?: number;
-    form?: QFormProps & HTMLFormElement;
+    form?: QFormProps & Partial<HTMLFormElement> & Partial<HTMLDivElement>;
     input?: Omit<QInputProps, 'id' | 'name' | 'modelValue' | 'label' | 'rules' | 'type' | 'lazy-rules' | 'autofocus' | ('label' & {
         style?: Partial<CSSStyleDeclaration>;
     })>;
@@ -18,8 +18,8 @@ declare const _default: {
         $data: {};
         $props: Partial<{
             minimumPasswordLength: number;
-            form: QFormProps & HTMLFormElement;
-            input: Omit<QInputProps, "label" | "name" | "type" | "modelValue" | "id" | "lazy-rules" | "rules" | "autofocus" | ("label" & {
+            form: QFormProps & Partial<HTMLFormElement> & Partial<HTMLDivElement>;
+            input: Omit<QInputProps, "name" | "type" | "label" | "modelValue" | "id" | "lazy-rules" | "rules" | "autofocus" | ("label" & {
                 style?: Partial<CSSStyleDeclaration> | undefined;
             })>;
             extraFields: {
@@ -97,8 +97,8 @@ declare const _default: {
             }) => void;
         }, string, {
             minimumPasswordLength: number;
-            form: QFormProps & HTMLFormElement;
-            input: Omit<QInputProps, "label" | "name" | "type" | "modelValue" | "id" | "lazy-rules" | "rules" | "autofocus" | ("label" & {
+            form: QFormProps & Partial<HTMLFormElement> & Partial<HTMLDivElement>;
+            input: Omit<QInputProps, "name" | "type" | "label" | "modelValue" | "id" | "lazy-rules" | "rules" | "autofocus" | ("label" & {
                 style?: Partial<CSSStyleDeclaration> | undefined;
             })>;
             extraFields: {
@@ -194,8 +194,8 @@ declare const _default: {
     }) => void;
 }, string, {
     minimumPasswordLength: number;
-    form: QFormProps & HTMLFormElement;
-    input: Omit<QInputProps, "label" | "name" | "type" | "modelValue" | "id" | "lazy-rules" | "rules" | "autofocus" | ("label" & {
+    form: QFormProps & Partial<HTMLFormElement> & Partial<HTMLDivElement>;
+    input: Omit<QInputProps, "name" | "type" | "label" | "modelValue" | "id" | "lazy-rules" | "rules" | "autofocus" | ("label" & {
         style?: Partial<CSSStyleDeclaration> | undefined;
     })>;
     extraFields: {
@@ -214,8 +214,8 @@ declare const _default: {
     };
 });
 export default _default;
-declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-declare type __VLS_TypePropsToRuntimeProps<T> = {
+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]>>;
     } : {
@@ -223,7 +223,7 @@ declare type __VLS_TypePropsToRuntimeProps<T> = {
         required: true;
     };
 };
-declare type __VLS_WithDefaults<P, D> = {
+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/authentication/RequestOtpForm.vue.d.ts

@@ -1,6 +1,6 @@
 import { QFormProps, QInputProps } from 'quasar';
 export interface Props {
-    form?: QFormProps & HTMLFormElement;
+    form?: QFormProps & Partial<HTMLFormElement> & Partial<HTMLDivElement>;
     input?: Omit<QInputProps, 'id' | 'name' | 'modelValue' | 'label' | 'rules' | 'type' | 'lazy-rules' | 'autofocus' | ('label' & {
         style?: Partial<CSSStyleDeclaration>;
     })>;
@@ -121,8 +121,8 @@ declare const _default: {
     };
 });
 export default _default;
-declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-declare type __VLS_TypePropsToRuntimeProps<T> = {
+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]>>;
     } : {

package/dist/types/ui/authentication/UserMenuButton.vue.d.ts

@@ -71,8 +71,8 @@ declare const _default: {
     };
 });
 export default _default;
-declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-declare type __VLS_TypePropsToRuntimeProps<T> = {
+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]>>;
     } : {

package/dist/types/ui/authentication/VerificationSlider.vue.d.ts

@@ -66,8 +66,8 @@ declare const _default: {
     verified: () => void;
 }, string, {}, {}, string> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
 export default _default;
-declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-declare type __VLS_TypePropsToRuntimeProps<T> = {
+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]>>;
     } : {

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

@@ -63,8 +63,8 @@ declare const _default: {
     };
 });
 export default _default;
-declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-declare type __VLS_TypePropsToRuntimeProps<T> = {
+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]>>;
     } : {

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

@@ -58,8 +58,8 @@ declare const _default: {
     };
 });
 export default _default;
-declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-declare type __VLS_TypePropsToRuntimeProps<T> = {
+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]>>;
     } : {

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

@@ -1,2 +1 @@
-export * from './authentication/index';
 export * from './general/index';

package/dist/types/virtualModules.d.ts

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

package/dist/types/vite-plugin.d.ts

@@ -1,2 +1,4 @@
 import type { Plugin } from 'vite';
-export default function (): Promise<Plugin>;
+export default function ({ buildFromSrc }?: {
+    buildFromSrc?: boolean;
+}): Promise<Plugin>;

package/dist/virtualModules.d.ts

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

package/dist/virtualModules.js

@@ -0,0 +1,2 @@
+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"); };

package/dist/vite-plugin.d.ts

@@ -1,2 +1,4 @@
 import type { Plugin } from 'vite';
-export default function (): Promise<Plugin>;
+export default function ({ buildFromSrc }?: {
+    buildFromSrc?: boolean;
+}): Promise<Plugin>;

package/dist/vite-plugin.js

@@ -13,7 +13,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
             if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
             if (y = 0, t) op = [op[0] & 2, t.value];
             switch (op[0]) {
@@ -34,33 +34,48 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
         if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
     }
 };
-export default function () {
+import { promises } from 'fs';
+var readFile = promises.readFile;
+export default function (_a) {
+    var _b = _a === void 0 ? {} : _a, buildFromSrc = _b.buildFromSrc;
     return __awaiter(this, void 0, void 0, function () {
-        return __generator(this, function (_a) {
-            return [2 /*return*/, {
-                    name: '@simsustech/quasar-components-plugin',
-                    config: function (config, _a) {
-                        var mode = _a.mode;
-                        if (mode === 'development') {
-                            return {
-                                resolve: {
-                                    alias: [
-                                        {
-                                            find: '@simsustech/quasar-components/flags',
-                                            replacement: new URL('../src/ui/flags/index.ts', import.meta.url).pathname
-                                        },
-                                        {
-                                            find: '@simsustech/quasar-components',
-                                            replacement: new URL('../src/ui/index.ts', import.meta.url)
-                                                .pathname
+        var pkgJson, _c, _d, exports, name;
+        return __generator(this, function (_e) {
+            switch (_e.label) {
+                case 0:
+                    _d = (_c = JSON).parse;
+                    return [4 /*yield*/, readFile(new URL('../package.json', import.meta.url).pathname, 'utf-8')];
+                case 1:
+                    pkgJson = _d.apply(_c, [_e.sent()]);
+                    exports = pkgJson.exports;
+                    name = pkgJson.name;
+                    return [2 /*return*/, {
+                            name: "".concat(name, "-plugin"),
+                            config: function (config, _a) {
+                                var mode = _a.mode;
+                                if (mode === 'development' || buildFromSrc) {
+                                    var alias = Object.entries(exports)
+                                        .map(function (_a) {
+                                        var key = _a[0], val = _a[1];
+                                        return {
+                                            find: 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: {
+                                            alias: alias
                                         }
-                                    ]
+                                    };
                                 }
-                            };
-                        }
-                        return {};
-                    }
-                }];
+                                return {};
+                            }
+                        }];
+            }
         });
     });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simsustech/quasar-components",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "author": "Stefan van Herwijnen",
   "description": "High level components for Quasar Framework",
   "license": "MIT",
@@ -14,21 +14,24 @@
     },
     "./authentication": {
       "types": "./dist/types/ui/authentication/index.d.ts",
-      "import": "./dist/authentication.js"
+      "import": "./dist/authentication.js",
+      "src": "./src/ui/authentication/index.ts"
     },
     "./flags": {
       "types": "./dist/types/ui/flags/index.d.ts",
-      "import": "./dist/flags.js"
+      "import": "./dist/flags.js",
+      "src": "./src/ui/flags/index.ts"
     },
     "./icons": {
       "types": "./dist/types/ui/icons/index.d.ts",
-      "import": "./dist/icons.js"
+      "import": "./dist/icons.js",
+      "src": "./src/ui/icons/index.ts"
     },
     "./css": {
       "import": "./dist/style.css"
     },
     "./vite-plugin": {
-      "types": "./dist/vite-plugin.d.ts",
+      "types": "./dist/types/vite-plugin.d.ts",
       "import": "./dist/vite-plugin.js"
     }
   },

package/src/ui/authentication/EmailChangeForm.vue

@@ -1,5 +1,10 @@
 <template>
-  <q-form ref="formRef" class="q-gutter-md" v-bind="form">
+  <q-form
+    ref="formRef"
+    class="q-gutter-md"
+    v-bind="form"
+    @submit="(e) => submit"
+  >
     <otp-input v-bind="input" v-model="otp" />
     <q-input
       v-bind="input"
@@ -41,7 +46,7 @@ import OtpInput from './OtpInput.vue'
 
 export interface Props {
   email: string
-  form?: QFormProps & HTMLFormElement
+  form?: QFormProps & Partial<HTMLFormElement> & Partial<HTMLDivElement>
   input?: Omit<
     QInputProps,
     | 'id'

package/src/ui/authentication/EmailChangeStepper.vue

@@ -3,6 +3,7 @@
     <q-step name="requestOtp" :title="requestOtpHeader">
       <request-otp-form
         ref="requestOtpFormRef"
+        :form="{ id: 'requestOtpForm' }"
         :input="input"
         @submit="requestOtp"
       ></request-otp-form>
@@ -11,6 +12,7 @@
     <q-step name="changeEmail" :title="emailChangeHeader">
       <email-change-form
         ref="emailChangeFormRef"
+        :form="{ id: 'emailChangeForm' }"
         :email="email"
         :input="input"
         @submit="changeEmail"
@@ -22,10 +24,12 @@
         <q-submit-button
           v-if="step === 'requestOtp'"
           is-next-button
+          form="requestOtpForm"
           @submit="requestOtpFormRef?.functions.submit"
         ></q-submit-button>
         <q-submit-button
           v-if="step === 'changeEmail'"
+          form="emailChangeForm"
           @submit="emailChangeFormRef?.functions.submit"
         ></q-submit-button>
       </q-stepper-navigation>

package/src/ui/authentication/LoginForm.vue

@@ -1,5 +1,10 @@
 <template>
-  <q-form ref="formRef" class="q-gutter-md" v-bind="form">
+  <q-form
+    ref="formRef"
+    class="q-gutter-md"
+    v-bind="form"
+    @submit="(e) => submit"
+  >
     <q-input
       v-if="!useUsername"
       v-bind="input"
@@ -71,7 +76,7 @@ import QSubmitButton from '../general/QSubmitButton.vue'
 export interface Props {
   useUsername?: boolean
   passwordForgotUrl?: string
-  form?: QFormProps & HTMLFormElement
+  form?: QFormProps & Partial<HTMLFormElement> & Partial<HTMLDivElement>
   input?: Omit<
     QInputProps,
     | 'id'

package/src/ui/authentication/PasswordChangeForm.vue

@@ -1,5 +1,10 @@
 <template>
-  <q-form ref="formRef" class="q-gutter-md" v-bind="form">
+  <q-form
+    ref="formRef"
+    class="q-gutter-md"
+    v-bind="form"
+    @submit="(e) => submit"
+  >
     <otp-input v-bind="input" v-model="otp" />
     <q-input
       v-bind="input"
@@ -61,7 +66,7 @@ import OtpInput from './OtpInput.vue'
 export interface Props {
   email: string
   minimumPasswordLength?: number
-  form?: QFormProps & HTMLFormElement
+  form?: QFormProps & Partial<HTMLFormElement> & Partial<HTMLDivElement>
   input?: Omit<
     QInputProps,
     | 'id'

package/src/ui/authentication/PasswordChangeStepper.vue

@@ -3,6 +3,7 @@
     <q-step name="requestOtp" :title="requestOtpHeader">
       <request-otp-form
         ref="requestOtpFormRef"
+        :form="{ id: 'requestOtpForm' }"
         :input="input"
         @submit="requestOtp"
       ></request-otp-form>
@@ -11,6 +12,7 @@
     <q-step name="changePassword" :title="passwordChangeHeader">
       <password-change-form
         ref="passwordChangeFormRef"
+        :form="{ id: 'passwordChangeForm' }"
         :email="email"
         :input="input"
         @submit="changePassword"
@@ -22,10 +24,12 @@
         <q-submit-button
           v-if="step === 'requestOtp'"
           is-next-button
+          form="requestOtpForm"
           @submit="requestOtpFormRef?.functions.submit"
         ></q-submit-button>
         <q-submit-button
           v-if="step === 'changePassword'"
+          form="passwordChangeForm"
           @submit="passwordChangeFormRef?.functions.submit"
         ></q-submit-button>
       </q-stepper-navigation>

package/src/ui/authentication/RegisterForm.vue

@@ -1,5 +1,10 @@
 <template>
-  <q-form ref="formRef" class="q-gutter-md" v-bind="form">
+  <q-form
+    ref="formRef"
+    class="q-gutter-md"
+    v-bind="form"
+    @submit="(e) => submit"
+  >
     <q-input
       v-if="!useUsername"
       v-bind="input"
@@ -97,7 +102,7 @@ export interface Props {
     rules?: ((val: string) => boolean)[]
   }[]
   minimumPasswordLength?: number
-  form?: QFormProps & HTMLFormElement
+  form?: QFormProps & Partial<HTMLFormElement> & Partial<HTMLDivElement>
   input?: Omit<
     QInputProps,
     | 'id'

package/src/ui/authentication/RequestOtpForm.vue

@@ -1,5 +1,5 @@
 <template>
-  <q-form ref="formRef" v-bind="form">
+  <q-form ref="formRef" v-bind="form" @submit="(e) => submit">
     <q-input
       v-bind="input"
       id="email"
@@ -29,7 +29,7 @@ import isEmail from 'validator/es/lib/isEmail.js'
 import QSubmitButton from '../general/QSubmitButton.vue'
 
 export interface Props {
-  form?: QFormProps & HTMLFormElement
+  form?: QFormProps & Partial<HTMLFormElement> & Partial<HTMLDivElement>
   input?: Omit<
     QInputProps,
     | 'id'

package/src/ui/general/QSubmitButton.vue

@@ -4,7 +4,7 @@
     :label="isNextButton ? lang.next : lang.submit"
     color="primary"
     :loading="loading || loadingInternal"
-    :type="useForm ? 'submit' : undefined"
+    type="submit"
     @click="submit"
   />
 </template>

package/src/ui/index.ts

@@ -1,2 +1 @@
-export * from './authentication/index'
 export * from './general/index'

package/src/virtualModules.ts

@@ -0,0 +1,70 @@
+export const FlagIcon = (locale: string) => `
+  import { computed, ref, watch, h } from 'vue'
+  import { QuasarLanguageCodes, useQuasar, QIcon } from 'quasar'
+  import { useLang, loadLang } from '${
+    new URL(`../src/ui/flags/lang`, import.meta.url).pathname
+  }'
+  import icon from '${
+    new URL(`../src/ui/flags/assets/${locale}.svg`, import.meta.url).pathname
+  }'
+  export default {
+  setup(props, context) {
+    const $q = useQuasar()
+    const lang = useLang()
+    if (lang.value.isoName !== $q.lang.isoName) loadLang($q.lang.isoName)
+    watch($q.lang, (val) => {
+      loadLang($q.lang.isoName)
+    })
+    
+    const country = computed(
+      () => lang.value.countries['${locale}']
+    )
+    // @ts-ignore
+    const language = computed(() => lang.value.languages['${locale}'])
+    const variables = ref({
+      country,
+      language
+      // header: lang.value.some.nested.prop
+    })
+    const functions = ref({
+      // submit
+    })
+
+    context.expose({
+      variables,
+      functions
+    })
+
+    // return the render function
+    return () => h(QIcon, { name: \`img:\${icon}\` })
+  }}
+`
+
+export const Icon = (icon: string) => `
+  import { computed, ref, watch, h } from 'vue'
+  import { QuasarLanguageCodes, useQuasar, QIcon } from 'quasar'
+  import icon from '${
+    new URL(`../src/ui/icons/assets/${icon}.svg`, import.meta.url).pathname
+  }'
+  import icons from '${
+    new URL(`../src/ui/icons/icons.ts`, import.meta.url).pathname
+  }'
+  export default {
+  setup(props, context) {
+    const $q = useQuasar()
+
+    const variables = ref(icons['${icon}'])
+
+    const functions = ref({
+      // submit
+    })
+
+    context.expose({
+      variables,
+      functions
+    })
+
+    // return the render function
+    return () => h(QIcon, { name: \`img:\${icon}\` })
+  }}
+`

package/src/vite-plugin.ts

@@ -1,29 +1,52 @@
 import type { Plugin } from 'vite'
+import { promises } from 'fs'
+const { readFile } = promises
+
+export default async function ({
+  buildFromSrc
+}: {
+  buildFromSrc?: boolean
+} = {}): Promise<Plugin> {
+  const pkgJson = JSON.parse(
+    await readFile(
+      new URL('../package.json', import.meta.url).pathname,
+      'utf-8'
+    )
+  )
+  const exports = pkgJson.exports as Record<
+    string,
+    {
+      types: string
+      import: string
+      src: string
+    }
+  >[]
+  const name = pkgJson.name
 
-export default async function (): Promise<Plugin> {
   return {
-    name: '@simsustech/quasar-components-plugin',
+    name: `${name}-plugin`,
     config(config, { mode }) {
-      if (mode === 'development') {
+      if (mode === 'development' || buildFromSrc) {
+        const alias = Object.entries(exports)
+          .map(([key, val]) => {
+            return {
+              find: name + key.slice(1),
+              replacement: new URL('.' + val.src, import.meta.url).pathname
+            }
+          })
+          .sort(
+            (a, b) =>
+              (b.find.match(/\//g) || []).length -
+              (a.find.match(/\//g) || []).length
+          )
+
         return {
           resolve: {
-            alias: [
-              {
-                find: '@simsustech/quasar-components/flags',
-                replacement: new URL(
-                  '../src/ui/flags/index.ts',
-                  import.meta.url
-                ).pathname
-              },
-              {
-                find: '@simsustech/quasar-components',
-                replacement: new URL('../src/ui/index.ts', import.meta.url)
-                  .pathname
-              }
-            ]
+            alias
           }
         }
       }
+
       return {}
     }
   }

package/tsconfig.build.plugin.json

@@ -3,5 +3,5 @@
     "rootDir": "src/"
   },
   "extends": "./tsconfig.node.json",
-  "include": ["./src/vite-plugin.ts"]
+  "include": ["./src/vite-plugin.ts", "./src/virtualModules.ts"]
 }

package/tsconfig.node.json

@@ -6,5 +6,5 @@
     "outDir": "./dist",
     "declaration": true
   },
-  "include": ["vite.config.ts"]
+  "include": ["vite.config.ts", "src/virtualModules.ts"]
 }

package/vite.config.ts

@@ -2,77 +2,77 @@ import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import Components from 'unplugin-vue-components/vite'
 import { QuasarResolver } from 'unplugin-vue-components/resolvers'
+import { FlagIcon, Icon } from './src/virtualModules.js'
+// export const FlagIcon = (locale) => `
+//   import { computed, ref, watch, h } from 'vue'
+//   import { QuasarLanguageCodes, useQuasar, QIcon } from 'quasar'
+//   import { useLang, loadLang } from '${
+//     new URL(`./src/ui/flags/lang`, import.meta.url).pathname
+//   }'
+//   import icon from '${
+//     new URL(`./src/ui/flags/assets/${locale}.svg`, import.meta.url).pathname
+//   }'
+//   export default {
+//   setup(props, context) {
+//     const $q = useQuasar()
+//     const lang = useLang()
+//     if (lang.value.isoName !== $q.lang.isoName) loadLang($q.lang.isoName)
+//     watch($q.lang, (val) => {
+//       loadLang($q.lang.isoName)
+//     })
 
-const FlagIcon = (locale) => `
-  import { computed, ref, watch, h } from 'vue'
-  import { QuasarLanguageCodes, useQuasar, QIcon } from 'quasar'
-  import { useLang, loadLang } from '${
-    new URL(`./src/ui/flags/lang`, import.meta.url).pathname
-  }'
-  import icon from '${
-    new URL(`./src/ui/flags/assets/${locale}.svg`, import.meta.url).pathname
-  }'
-  export default {
-  setup(props, context) {
-    const $q = useQuasar()
-    const lang = useLang()
-    if (lang.value.isoName !== $q.lang.isoName) loadLang($q.lang.isoName)
-    watch($q.lang, (val) => {
-      loadLang($q.lang.isoName)
-    })
-    
-    const country = computed(
-      () => lang.value.countries['${locale}']
-    )
-    // @ts-ignore
-    const language = computed(() => lang.value.languages['${locale}'])
-    const variables = ref({
-      country,
-      language
-      // header: lang.value.some.nested.prop
-    })
-    const functions = ref({
-      // submit
-    })
+//     const country = computed(
+//       () => lang.value.countries['${locale}']
+//     )
+//     // @ts-ignore
+//     const language = computed(() => lang.value.languages['${locale}'])
+//     const variables = ref({
+//       country,
+//       language
+//       // header: lang.value.some.nested.prop
+//     })
+//     const functions = ref({
+//       // submit
+//     })
 
-    context.expose({
-      variables,
-      functions
-    })
+//     context.expose({
+//       variables,
+//       functions
+//     })
 
-    // return the render function
-    return () => h(QIcon, { name: \`img:\${icon}\` })
-  }}
-`
+//     // return the render function
+//     return () => h(QIcon, { name: \`img:\${icon}\` })
+//   }}
+// `
 
-const Icon = (icon) => `
-  import { computed, ref, watch, h } from 'vue'
-  import { QuasarLanguageCodes, useQuasar, QIcon } from 'quasar'
-  import icon from '${
-    new URL(`./src/ui/icons/assets/${icon}.svg`, import.meta.url).pathname
-  }'
-  import icons from '${
-    new URL(`./src/ui/icons/icons.ts`, import.meta.url).pathname
-  }'
-  export default {
-  setup(props, context) {
-    const $q = useQuasar()
+// export const Icon = (icon) => `
+//   import { computed, ref, watch, h } from 'vue'
+//   import { QuasarLanguageCodes, useQuasar, QIcon } from 'quasar'
+//   import icon from '${
+//     new URL(`./src/ui/icons/assets/${icon}.svg`, import.meta.url).pathname
+//   }'
+//   import icons from '${
+//     new URL(`./src/ui/icons/icons.ts`, import.meta.url).pathname
+//   }'
+//   export default {
+//   setup(props, context) {
+//     const $q = useQuasar()
 
-    const variables = ref(icons['${icon}'])
+//     const variables = ref(icons['${icon}'])
 
-    const functions = ref({
-      // submit
-    })
+//     const functions = ref({
+//       // submit
+//     })
 
-    context.expose({
-      variables,
-      functions
-    })
+//     context.expose({
+//       variables,
+//       functions
+//     })
 
-    // return the render function
-    return () => h(QIcon, { name: \`img:\${icon}\` })
-  }}
-`
+//     // return the render function
+//     return () => h(QIcon, { name: \`img:\${icon}\` })
+//   }}
+// `
 
 export default defineConfig(async ({ command, mode }) => ({
   plugins: [