@simsustech/quasar-components 0.4.5 → 0.4.7

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @simsustech/quasar-components
 
+## 0.4.7
+
+### Patch Changes
+
+- ebb0c51: fix(components): export useLang in PasswordChangeStepper
+- 98f6393: fix: replace .once modifier with debounce in QSubmitButton
+
+## 0.4.6
+
+### Patch Changes
+
+- 255d957: fix(components): make LoginButton extend QSubmitButton
+
 ## 0.4.5
 
 ### Patch Changes

package/dist/{QSubmitButton.vue_vue_type_script_setup_true_lang-17dddb76.js → QSubmitButton.vue_vue_type_script_setup_true_lang-77aece37.js}

@@ -1,5 +1,5 @@
-import { useQuasar, QBtn } from "quasar";
-import { ref, defineComponent, useAttrs, watch, openBlock, createBlock, mergeProps, unref } from "vue";
+import { useQuasar, debounce, QBtn } from "quasar";
+import { ref, defineComponent, useAttrs, watch, openBlock, createBlock, mergeProps, unref, withCtx, renderSlot, createTextVNode, toDisplayString } from "vue";
 const lang$1 = {
   isoName: "en-US",
   submit: "Submit",
@@ -72,25 +72,35 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       loadLang($q.lang.isoName);
     });
     let loadingInternal = ref(false);
-    const submit = () => {
-      if (props.loading === void 0)
-        loadingInternal.value = true;
-      new Promise((resolve, reject) => {
-        emit("submit", { done: () => resolve(true) });
-      }).finally(() => {
+    const submit = debounce(
+      () => {
         if (props.loading === void 0)
-          loadingInternal.value = false;
-      });
-    };
+          loadingInternal.value = true;
+        new Promise((resolve, reject) => {
+          emit("submit", { done: () => resolve(true) });
+        }).finally(() => {
+          if (props.loading === void 0)
+            loadingInternal.value = false;
+        });
+      },
+      1e3,
+      true
+    );
     return (_ctx, _cache) => {
       const _component_q_btn = QBtn;
       return openBlock(), createBlock(_component_q_btn, mergeProps(unref(attrs), {
-        label: __props.isNextButton ? unref(lang2).next : unref(lang2).submit,
         color: __props.color,
         loading: __props.loading || unref(loadingInternal),
         type: "submit",
-        onClick: submit
-      }), null, 16, ["label", "color", "loading"]);
+        onClick: unref(submit)
+      }), {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default", {}, () => [
+            createTextVNode(toDisplayString(__props.isNextButton ? unref(lang2).next : unref(lang2).submit), 1)
+          ])
+        ]),
+        _: 3
+      }, 16, ["color", "loading", "onClick"]);
     };
   }
 });

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-17dddb76.js";
+import { _ as _sfc_main$c } from "./QSubmitButton.vue_vue_type_script_setup_true_lang-77aece37.js";
 const lang$1 = {
   isoName: "en-US",
   myAccount: "Account",
@@ -33,6 +33,9 @@ const lang$1 = {
       fieldRequired: "Field is required.",
       invalidEmail: "A valid email address is required."
     },
+    messages: {
+      unknownEmail: "Email address is not registered."
+    },
     request: "Request a one-time password",
     checkEmail: "You will receive a verification code in your email. Please use this verification code in the next step.",
     verificationCode: "Verification code"
@@ -94,7 +97,7 @@ const enUS = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty
 const lang = ref(lang$1);
 const locales = /* @__PURE__ */ Object.assign({
   "./en-US.ts": () => Promise.resolve().then(() => enUS),
-  "./nl.ts": () => import("./nl-710ec15d.js")
+  "./nl.ts": () => import("./nl-7a870643.js")
 });
 const useLang = () => {
   return lang;
@@ -395,7 +398,6 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
       loadLang($q.lang.isoName);
     });
     const email = ref("");
-    const header = computed(() => lang2.value.otp.request);
     const formRef = ref();
     const validations = computed(() => ({
       email: [
@@ -417,7 +419,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
           done();
       });
     };
-    const variables = ref({ header });
+    const variables = ref({});
     const functions = ref({ submit });
     __expose({
       variables,
@@ -751,7 +753,6 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     const repeatNewPassword = ref("");
     const showPassword = ref(false);
     const showRepeatPassword = ref(false);
-    const header = computed(() => lang2.value.password.changePassword);
     const formRef = ref();
     const validations = computed(() => ({
       password: [
@@ -779,9 +780,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
           evt.done();
       });
     };
-    const variables = ref({
-      header
-    });
+    const variables = ref({});
     const functions = ref({
       submit
     });
@@ -852,7 +851,8 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   }
 });
 const __default__$6 = {
-  name: "PasswordChangeStepper"
+  name: "PasswordChangeStepper",
+  useLang
 };
 const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   ...__default__$6,
@@ -872,24 +872,10 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     const steps = ["requestOtp", "changePassword"];
     const step = ref("requestOtp");
     const email = ref("");
-    const header = computed(() => lang2.value.password.changePassword);
-    const passwordChanged = computed(() => lang2.value.password.passwordChanged);
-    const unprocessableRequest = computed(() => lang2.value.unprocessableRequest);
-    const checkEmail = computed(() => lang2.value.otp.checkEmail);
     const requestOtpFormRef = ref();
     const passwordChangeFormRef = ref();
-    const requestOtpHeader = computed(
-      () => {
-        var _a;
-        return ((_a = requestOtpFormRef.value) == null ? void 0 : _a.variables.header) || "";
-      }
-    );
-    const passwordChangeHeader = computed(
-      () => {
-        var _a;
-        return ((_a = passwordChangeFormRef.value) == null ? void 0 : _a.variables.header) || "";
-      }
-    );
+    const requestOtpHeader = computed(() => lang2.value.otp.request);
+    const passwordChangeHeader = computed(() => lang2.value.password.changePassword);
     const requestOtp = ({
       email: emittedEmail,
       done
@@ -911,10 +897,6 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
       });
     };
     const variables = ref({
-      header,
-      passwordChanged,
-      unprocessableRequest,
-      checkEmail,
       steps
     });
     const functions = ref({
@@ -1643,7 +1625,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   props: {
     withNetwork: {}
   },
-  setup(__props, { expose: __expose }) {
+  setup(__props) {
     const $q = useQuasar();
     const lang2 = useLang();
     if (lang2.value.isoName !== $q.lang.isoName)
@@ -1651,19 +1633,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     watch($q.lang, (val) => {
       loadLang($q.lang.isoName);
     });
-    const variables = ref({
-      // header: lang.value.some.nested.prop
-    });
-    const functions = ref({
-      // submit
-    });
-    __expose({
-      variables,
-      functions
-    });
     return (_ctx, _cache) => {
-      const _component_q_btn = QBtn;
-      return openBlock(), createBlock(_component_q_btn, null, {
+      return openBlock(), createBlock(_sfc_main$c, null, {
         default: withCtx(() => [
           renderSlot(_ctx.$slots, "icon"),
           _ctx.withNetwork ? (openBlock(), createElementBlock("div", _hoisted_1, toDisplayString(unref(lang2).login.loginWith) + " " + toDisplayString(_ctx.withNetwork), 1)) : (openBlock(), createElementBlock("div", _hoisted_2, toDisplayString(unref(lang2).login.login), 1))

package/dist/form.js

@@ -347,7 +347,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     });
     const { modelValue } = toRefs(props);
     const update = (val) => {
-      if (typeof val === "string")
+      if (typeof val === "string" || val === null)
         emit("update:modelValue", val);
     };
     watch(

package/dist/general.js

@@ -1,4 +1,4 @@
-import { l as loadLang, u as useLang, _ as _sfc_main$4 } from "./QSubmitButton.vue_vue_type_script_setup_true_lang-17dddb76.js";
+import { l as loadLang, u as useLang, _ as _sfc_main$4 } from "./QSubmitButton.vue_vue_type_script_setup_true_lang-77aece37.js";
 import { useQuasar, QCard, QCardSection, QCardActions, QDialog, QBtn, QToolbarTitle, QToolbar, QHeader, QPage, QPageContainer, QLayout, QSpace, QPageSticky, QSelect, QItemSection, QItemLabel, QItem } from "quasar";
 import { defineComponent, watch, ref, openBlock, createBlock, unref, withCtx, renderSlot, createVNode, createElementVNode, normalizeProps, guardReactiveProps, normalizeClass, createCommentVNode, toRefs, useAttrs, computed, mergeProps, createTextVNode, toDisplayString } from "vue";
 import { enUs, nl } from "./flags.js";

package/dist/{nl-710ec15d.js → nl-7a870643.js}

@@ -30,6 +30,9 @@ const lang = {
       fieldRequired: "Veld is vereist.",
       invalidEmail: "Het email adres is ongeldig."
     },
+    messages: {
+      unknownEmail: "Email adres is niet geregistreerd."
+    },
     request: "Vraag een eenmalig wachtwoord aan.",
     checkEmail: "U ontvangt een verificatie code in uw mailbox. Gebruik deze code in de volgende stap.",
     verificationCode: "Verificatie code"

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

@@ -16,7 +16,7 @@ declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimePr
         deny: string;
     }>;
     functions: import("vue").Ref<{}>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>>, {}, {}>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>>, {}, {}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 type __VLS_TypePropsToRuntimeProps<T> = {

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

@@ -23,7 +23,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
         otp: string;
         done: () => void;
     }) => void;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>> & {
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>> & {
     onSubmit?: ((args_0: {
         email: string;
         newEmail: string;

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

@@ -26,7 +26,7 @@ declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimePr
         otp: string;
         done: () => void;
     }) => void;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>> & {
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>> & {
     onChangeEmail?: ((args_0: {
         email: string;
         newEmail: string;

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

@@ -1,10 +1,7 @@
 export interface Props {
     withNetwork?: string;
 }
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<Props>, {
-    variables: import("vue").Ref<{}>;
-    functions: import("vue").Ref<{}>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>>, {}, {}>, {
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<Props>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>>, {}, {}>, {
     icon?(_: {}): any;
 }>;
 export default _default;

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

@@ -27,7 +27,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
         username?: string | undefined;
         done: () => void;
     }) => void;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>> & {
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>> & {
     onSubmit?: ((args_0: {
         email?: string | undefined;
         password: string;

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

@@ -2,7 +2,7 @@ declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimePr
     modelValue: string;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (...args: any[]) => void;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
     modelValue: string;
 }>>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;

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

@@ -12,9 +12,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     form: undefined;
     input: undefined;
 }>, {
-    variables: import("vue").Ref<{
-        header: string;
-    }>;
+    variables: import("vue").Ref<{}>;
     functions: import("vue").Ref<{
         submit: (args_0: {
             value?: string | undefined;
@@ -28,7 +26,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
         otp: string;
         done: () => void;
     }) => void;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
     minimumPasswordLength: number;
     form: undefined;
     input: undefined;

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

@@ -6,10 +6,6 @@ export interface Props {
 }
 declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<Props>, {
     variables: import("vue").Ref<{
-        header: string;
-        passwordChanged: string;
-        unprocessableRequest: string;
-        checkEmail: string;
         steps: readonly ["requestOtp", "changePassword"];
     }>;
     functions: import("vue").Ref<{
@@ -26,7 +22,7 @@ declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimePr
         otp: string;
         done: () => void;
     }) => void;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>> & {
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>> & {
     onRequestOtp?: ((args_0: {
         email: string;
         done: () => void;

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

@@ -39,7 +39,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
         extraFields?: Record<string, string> | undefined;
         done: () => void;
     }) => void;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
     minimumPasswordLength: number;
     extraFields: undefined;
     form: undefined;

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

@@ -6,9 +6,7 @@ export interface Props {
     })>;
 }
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<Props>, {
-    variables: import("vue").Ref<{
-        header: string;
-    }>;
+    variables: import("vue").Ref<{}>;
     functions: import("vue").Ref<{
         submit: (args_0: {
             value?: string | undefined;
@@ -20,7 +18,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
         email: string;
         done: () => void;
     }) => void;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>> & {
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>> & {
     onSubmit?: ((args_0: {
         email: string;
         done: () => void;

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

@@ -7,7 +7,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     functions: import("vue").Ref<{}>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     signOut: () => void;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>> & {
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>> & {
     onSignOut?: (() => any) | undefined;
 }, {}, {}>, {
     default?(_: {}): any;

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

@@ -6,7 +6,7 @@ declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimePr
     functions: import("vue").Ref<{}>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     verified: () => void;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>> & {
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>> & {
     onVerified?: (() => any) | undefined;
 }, {}, {}>;
 export default _default;

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

@@ -46,6 +46,9 @@ export interface Language {
             fieldRequired: string;
             invalidEmail: string;
         };
+        messages: {
+            unknownEmail: string;
+        };
         request: string;
         checkEmail: string;
         verificationCode: string;
@@ -133,6 +136,9 @@ export declare const lang: Ref<{
             fieldRequired: string;
             invalidEmail: string;
         };
+        messages: {
+            unknownEmail: string;
+        };
         request: string;
         checkEmail: string;
         verificationCode: string;

package/dist/types/ui/form/BooleanItem.vue.d.ts

@@ -2,7 +2,7 @@ export interface Props {
     modelValue: boolean;
     label: string;
 }
-declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<Props>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>>, {}, {}>;
+declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<Props>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>>, {}, {}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 type __VLS_TypePropsToRuntimeProps<T> = {

package/dist/types/ui/form/BooleanSelect.vue.d.ts

@@ -5,7 +5,7 @@ export interface Props {
 }
 declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<Props>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (...args: any[]) => void;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>> & {
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {}, {}>;
 export default _default;

package/dist/types/ui/form/DateInput.vue.d.ts

@@ -8,7 +8,7 @@ export interface Props {
 }
 declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<Props>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (val: string | null) => void;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>> & {
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>> & {
     "onUpdate:modelValue"?: ((val: string | null) => any) | undefined;
 }, {}, {}>;
 export default _default;

package/dist/types/ui/form/DatePicker.vue.d.ts

@@ -16,7 +16,7 @@ declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimePr
         from: string;
         to: string;
     }) => void;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
     modelValue: string | null | undefined | {
         from: string;
         to: string;

package/dist/types/ui/form/EmailInput.vue.d.ts

@@ -8,7 +8,7 @@ declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimePr
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:subject": (value: string | number | null) => void;
     "update:body": (value: string | null) => void;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>> & {
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>> & {
     "onUpdate:subject"?: ((value: string | number | null) => any) | undefined;
     "onUpdate:body"?: ((value: string | null) => any) | undefined;
 }, {}, {}>;

package/dist/types/ui/form/FormInput.vue.d.ts

@@ -5,7 +5,7 @@ export interface Props {
     label?: string;
     required?: boolean;
 }
-declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<Props>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>>, {}, {}>;
+declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<Props>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>>, {}, {}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 type __VLS_TypePropsToRuntimeProps<T> = {

package/dist/types/ui/form/FormItem.vue.d.ts

@@ -4,7 +4,7 @@ export interface Props {
     label?: string;
     field?: FormItems;
 }
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<Props>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>>, {}, {}>, {
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<Props>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>>, {}, {}>, {
     avatar?(_: {}): any;
     side?(_: {}): any;
 }>;

package/dist/types/ui/form/GenderItem.vue.d.ts

@@ -2,7 +2,7 @@ import type { Gender } from './GenderSelect.vue';
 export interface Props {
     modelValue: Gender;
 }
-declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<Props>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>>, {}, {}>;
+declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<Props>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>>, {}, {}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 type __VLS_TypePropsToRuntimeProps<T> = {

package/dist/types/ui/form/GenderSelect.vue.d.ts

@@ -6,7 +6,7 @@ export interface Props {
 }
 declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<Props>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (...args: any[]) => void;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>> & {
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {}, {}>;
 export default _default;

package/dist/types/ui/form/PostalCodeInput.vue.d.ts

@@ -6,7 +6,7 @@ export interface Props {
 }
 declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<Props>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (...args: any[]) => void;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>> & {
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {}, {}>;
 export default _default;

package/dist/types/ui/form/TelephoneNumberInput.vue.d.ts

@@ -4,7 +4,7 @@ export interface Props {
 }
 declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<Props>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (...args: any[]) => void;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>> & {
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {}, {}>;
 export default _default;

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

@@ -3,7 +3,7 @@ export interface Props {
     modelValue: string;
     languageImports: Record<string, () => Promise<QuasarLanguage>>;
 }
-declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<Props>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>>, {}, {}>;
+declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<Props>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>>, {}, {}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 type __VLS_TypePropsToRuntimeProps<T> = {

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

@@ -5,7 +5,7 @@ export interface Props {
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<Props>, {
     variables: import("vue").Ref<{}>;
     functions: import("vue").Ref<{}>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>>, {}, {}>, {
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>>, {}, {}>, {
     image?(_: {}): any;
     title?(_: {}): any;
     subtitle?(_: {}): any;

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

@@ -4,7 +4,7 @@ export interface Props {
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<Props>, {
     variables: import("vue").Ref<{}>;
     functions: import("vue").Ref<{}>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>>, {}, {}>, {
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>>, {}, {}>, {
     leftDrawerItems?(_: {}): any;
 }>;
 export default _default;

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

@@ -4,7 +4,7 @@ export interface Props {
     isNextButton?: boolean;
     color?: string;
 }
-declare const _default: import("vue").DefineComponent<{
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     loading: {
         type: BooleanConstructor;
         default: undefined;
@@ -24,7 +24,7 @@ declare const _default: import("vue").DefineComponent<{
         value?: string | undefined;
         done: () => void;
     }) => void;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     loading: {
         type: BooleanConstructor;
         default: undefined;
@@ -49,5 +49,12 @@ declare const _default: import("vue").DefineComponent<{
     loading: boolean;
     useForm: boolean;
     isNextButton: boolean;
-}, {}>;
+}, {}>, {
+    default?(_: {}): any;
+}>;
 export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -17,7 +17,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
         data?: unknown;
         done: (success?: boolean) => void;
     }) => void;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
     type: string;
     disabled: boolean;
 }>>> & {

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

@@ -12,7 +12,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     submit: (args_0: {
         done: (success?: boolean) => void;
     }) => void;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>> & {
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>> & {
     onSubmit?: ((args_0: {
         done: (success?: boolean) => void;
     }) => any) | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simsustech/quasar-components",
-  "version": "0.4.5",
+  "version": "0.4.7",
   "author": "Stefan van Herwijnen",
   "description": "High level components for Quasar Framework",
   "license": "MIT",

package/src/ui/authentication/LoginButton.vue

@@ -1,11 +1,9 @@
 <template>
-  <q-btn>
+  <q-submit-button>
     <slot name="icon" />
     <div v-if="withNetwork">{{ lang.login.loginWith }} {{ withNetwork }}</div>
-    <div v-else>
-      {{ lang.login.login }}
-    </div>
-  </q-btn>
+    <div v-else>{{ lang.login.login }}</div>
+  </q-submit-button>
 </template>
 
 <script lang="ts">
@@ -15,42 +13,20 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { watch } from 'vue'
 import { useQuasar } from 'quasar'
-import { useLang, loadLang } from './lang'
+import { useLang, loadLang } from './lang/index.js'
+import QSubmitButton from '../general/QSubmitButton.vue'
 
 export interface Props {
   withNetwork?: string
 }
 defineProps<Props>()
-// const attrs = useAttrs();
-// const emit = defineEmits<{
-//   (
-//     e: "asyncEmit",
-//     {
-//       value,
-//       done,
-//     }: {
-//       value: string;
-//       done: () => void;
-//     }
-//   ): void;
-// }>();
+
 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 variables = ref({
-  // header: lang.value.some.nested.prop
-})
-const functions = ref({
-  // submit
-})
-defineExpose({
-  variables,
-  functions
-})
 </script>

package/src/ui/authentication/PasswordChangeForm.vue

@@ -116,7 +116,6 @@ const newPassword = ref('')
 const repeatNewPassword = ref('')
 const showPassword = ref(false)
 const showRepeatPassword = ref(false)
-const header = computed(() => lang.value.password.changePassword)
 
 const formRef = ref<QForm>()
 const validations = computed<
@@ -153,9 +152,7 @@ const submit: InstanceType<typeof QSubmitButton>['$props']['onSubmit'] = (
   })
 }
 
-const variables = ref({
-  header
-})
+const variables = ref({})
 const functions = ref({
   submit
 })

package/src/ui/authentication/PasswordChangeStepper.vue

@@ -38,15 +38,17 @@
 </template>
 
 <script lang="ts">
+import { useLang, loadLang } from './lang'
+
 export default {
-  name: 'PasswordChangeStepper'
+  name: 'PasswordChangeStepper',
+  useLang: useLang
 }
 </script>
 
 <script setup lang="ts">
 import { ref, computed, watch } from 'vue'
 import { useQuasar, QInputProps } from 'quasar'
-import { useLang, loadLang } from './lang'
 import QSubmitButton from '../general/QSubmitButton.vue'
 import RequestOtpForm from './RequestOtpForm.vue'
 import PasswordChangeForm from './PasswordChangeForm.vue'
@@ -102,20 +104,14 @@ watch($q.lang, (val) => {
 const steps = ['requestOtp', 'changePassword'] as const
 const step = ref<(typeof steps)[number]>('requestOtp')
 const email = ref('')
-const header = computed(() => lang.value.password.changePassword)
-const passwordChanged = computed(() => lang.value.password.passwordChanged)
-const unprocessableRequest = computed(() => lang.value.unprocessableRequest)
-const checkEmail = computed(() => lang.value.otp.checkEmail)
 
 const requestOtpFormRef = ref<typeof RequestOtpForm>()
 const passwordChangeFormRef = ref<typeof PasswordChangeForm>()
 
-const requestOtpHeader = computed(
-  () => requestOtpFormRef.value?.variables.header || ''
-)
-const passwordChangeHeader = computed(
-  () => passwordChangeFormRef.value?.variables.header || ''
-)
+const requestOtpHeader = computed(() => lang.value.otp.request)
+
+const passwordChangeHeader = computed(() => lang.value.password.changePassword)
+
 const requestOtp: InstanceType<typeof RequestOtpForm>['$props']['onSubmit'] = ({
   email: emittedEmail,
   done
@@ -141,10 +137,6 @@ const changePassword: InstanceType<
 }
 
 const variables = ref({
-  header,
-  passwordChanged,
-  unprocessableRequest,
-  checkEmail,
   steps
 })
 const functions = ref({

package/src/ui/authentication/RequestOtpForm.vue

@@ -65,7 +65,6 @@ watch($q.lang, (val) => {
 })
 
 const email = ref('')
-const header = computed(() => lang.value.otp.request)
 
 const formRef = ref<QForm>()
 const validations = computed<
@@ -90,7 +89,7 @@ const submit: InstanceType<typeof QSubmitButton>['$props']['onSubmit'] = ({
   })
 }
 
-const variables = ref({ header })
+const variables = ref({})
 const functions = ref({ submit })
 defineExpose({
   variables,

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

@@ -32,6 +32,9 @@ const lang: Language = {
       fieldRequired: 'Field is required.',
       invalidEmail: 'A valid email address is required.'
     },
+    messages: {
+      unknownEmail: 'Email address is not registered.'
+    },
     request: 'Request a one-time password',
     checkEmail:
       'You will receive a verification code in your email. Please use this verification code in the next step.',

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

@@ -46,6 +46,9 @@ export interface Language {
       fieldRequired: string
       invalidEmail: string
     }
+    messages: {
+      unknownEmail: string
+    }
     request: string
     checkEmail: string
     verificationCode: string

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

@@ -32,6 +32,9 @@ const lang: Language = {
       fieldRequired: 'Veld is vereist.',
       invalidEmail: 'Het email adres is ongeldig.'
     },
+    messages: {
+      unknownEmail: 'Email adres is niet geregistreerd.'
+    },
     request: 'Vraag een eenmalig wachtwoord aan.',
     checkEmail:
       'U ontvangt een verificatie code in uw mailbox. Gebruik deze code in de volgende stap.',

package/src/ui/form/DateInput.vue

@@ -67,7 +67,7 @@ watch($q.lang, () => {
 const { modelValue } = toRefs(props)
 
 const update = (val: string | number | null) => {
-  if (typeof val === 'string') emit('update:modelValue', val)
+  if (typeof val === 'string' || val === null) emit('update:modelValue', val)
 }
 watch(
   () => modelValue?.value,

package/src/ui/general/QSubmitButton.vue

@@ -1,12 +1,15 @@
 <template>
   <q-btn
     v-bind="attrs"
-    :label="isNextButton ? lang.next : lang.submit"
     :color="color"
     :loading="loading || loadingInternal"
     type="submit"
     @click="submit"
-  />
+  >
+    <slot>
+      {{ isNextButton ? lang.next : lang.submit }}
+    </slot>
+  </q-btn>
 </template>
 
 <script lang="ts">
@@ -18,7 +21,7 @@ export default {
 
 <script setup lang="ts">
 import { ref, watch, useAttrs } from 'vue'
-import { useQuasar } from 'quasar'
+import { useQuasar, debounce } from 'quasar'
 import { useLang, loadLang } from './lang'
 export interface Props {
   loading?: boolean
@@ -64,12 +67,16 @@ watch($q.lang, (val) => {
 
 let loadingInternal = ref(false)
 
-const submit = () => {
-  if (props.loading === void 0) loadingInternal.value = true
-  const p = new Promise((resolve, reject) => {
-    emit('submit', { done: () => resolve(true) })
-  }).finally(() => {
-    if (props.loading === void 0) loadingInternal.value = false
-  })
-}
+const submit = debounce(
+  () => {
+    if (props.loading === void 0) loadingInternal.value = true
+    const p = new Promise((resolve, reject) => {
+      emit('submit', { done: () => resolve(true) })
+    }).finally(() => {
+      if (props.loading === void 0) loadingInternal.value = false
+    })
+  },
+  1000,
+  true
+)
 </script>