@simsustech/quasar-components 0.4.8 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @simsustech/quasar-components
 
+## 0.5.0
+
+### Minor Changes
+
+- 401bf7b: feat: change DateInput to separate input fields for year, month and day
+- fa4989f: feat: add autocomplete attributes to LoginForm
+
 ## 0.4.8
 
 ### Patch Changes

package/dist/{QSubmitButton.vue_vue_type_script_setup_true_lang-3DA1OTeA.js → QSubmitButton.vue_vue_type_script_setup_true_lang-DAnZaTMl.js}

@@ -14,7 +14,7 @@ var define_import_meta_env_default = { BASE_URL: "/", MODE: "production", DEV: f
 const lang = ref(lang$1);
 const locales = /* @__PURE__ */ Object.assign({
   "./en-US.ts": () => Promise.resolve().then(() => enUS),
-  "./nl.ts": () => import("./nl-ddFMi2cz.js")
+  "./nl.ts": () => import("./nl-vB00g7s2.js")
 });
 const useLang = () => {
   return lang;

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-3DA1OTeA.js";
+import { _ as _sfc_main$c } from "./QSubmitButton.vue_vue_type_script_setup_true_lang-DAnZaTMl.js";
 const lang$1 = {
   isoName: "en-US",
   myAccount: "Account",
@@ -98,7 +98,7 @@ var define_import_meta_env_default = { BASE_URL: "/", MODE: "production", DEV: f
 const lang = ref(lang$1);
 const locales = /* @__PURE__ */ Object.assign({
   "./en-US.ts": () => Promise.resolve().then(() => enUS),
-  "./nl.ts": () => import("./nl-Y-pHriZy.js")
+  "./nl.ts": () => import("./nl-CBxnt0JS.js")
 });
 const useLang = () => {
   return lang;
@@ -1059,7 +1059,8 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
             label: unref(lang2).login.fields.email,
             "bottom-slots": "",
             rules: validations.value["email"],
-            "lazy-rules": ""
+            "lazy-rules": "",
+            autcomplete: "email"
           }), null, 16, ["modelValue", "label", "rules"])) : createCommentVNode("", true),
           _ctx.useUsername ? (openBlock(), createBlock(_component_q_input, mergeProps({ key: 1 }, _ctx.input, {
             id: "username",
@@ -1069,7 +1070,8 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
             label: unref(lang2).login.fields.username,
             "bottom-slots": "",
             rules: validations.value["username"],
-            "lazy-rules": ""
+            "lazy-rules": "",
+            autocomplete: "username"
           }), null, 16, ["modelValue", "label", "rules"])) : createCommentVNode("", true),
           createVNode(_component_q_input, mergeProps({
             id: "password",
@@ -1082,7 +1084,8 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
             label: unref(lang2).login.fields.password,
             rules: validations.value["password"],
             "lazy-rules": "",
-            "bottom-slots": ""
+            "bottom-slots": "",
+            autcomplete: "current-password"
           }), {
             append: withCtx(() => [
               createVNode(_component_q_icon, {

package/dist/{en-US-Ub0VDpRf.js → en-US-Duo_j_eL.js}

@@ -139,7 +139,7 @@ var define_import_meta_env_default = { BASE_URL: "/", MODE: "production", DEV: f
 const lang = ref(lang$1);
 const locales = /* @__PURE__ */ Object.assign({
   "./en-US.ts": () => Promise.resolve().then(() => enUS),
-  "./nl.ts": () => import("./nl-w63lODNM.js")
+  "./nl.ts": () => import("./nl-iCAs4ELa.js")
 });
 const useLang = () => {
   return lang;

package/dist/flags.js

@@ -1,6 +1,4 @@
-import { e, n } from "./en-US-Ub0VDpRf.js";
-import "vue";
-import "quasar";
+import { e, n } from "./en-US-Duo_j_eL.js";
 export {
   e as enUs,
   n as nl

package/dist/form.js

@@ -1,5 +1,5 @@
-import { ref, defineComponent, useAttrs, withAsyncContext, watch, openBlock, createBlock, unref, mergeProps, normalizeProps, guardReactiveProps, withCtx, createVNode, createTextVNode, toDisplayString, computed, useSlots, renderSlot, createCommentVNode, toRefs, resolveDirective, createElementVNode, withDirectives, createElementBlock, Fragment } from "vue";
-import { useQuasar, QSelect, QItem, QItemSection, QItemLabel, QInput, QIcon, QBtn, QDate, QPopupProxy, QEditor } from "quasar";
+import { ref, defineComponent, useAttrs, withAsyncContext, watch, openBlock, createBlock, unref, mergeProps, normalizeProps, guardReactiveProps, withCtx, createVNode, createTextVNode, toDisplayString, computed, useSlots, renderSlot, createCommentVNode, toRefs, resolveDirective, createElementBlock, Fragment, renderList, resolveDynamicComponent, createElementVNode, withDirectives } from "vue";
+import { useQuasar, QSelect, QItem, QItemSection, QItemLabel, QInput, QDate, QIcon, QTooltip, QBtn, QPopupProxy, QField, QEditor } from "quasar";
 const lang$1 = {
   isoName: "en-US",
   yes: "Yes",
@@ -36,6 +36,9 @@ const lang$1 = {
   },
   datePicker: {
     placeholder: "YYYY/MM/DD",
+    YYYY: "YYYY",
+    MM: "MM",
+    DD: "DD",
     validations: {
       unavailableRange: "The selected period contains unavailable dates."
     }
@@ -49,7 +52,7 @@ var define_import_meta_env_default = { BASE_URL: "/", MODE: "production", DEV: f
 const lang = ref(lang$1);
 const locales = /* @__PURE__ */ Object.assign({
   "./en-US.ts": () => Promise.resolve().then(() => enUS),
-  "./nl.ts": () => import("./nl-VodfMDVb.js")
+  "./nl.ts": () => import("./nl-BjtwxTCz.js")
 });
 const useLang = () => {
   return lang;
@@ -329,39 +332,128 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   __name: "DateInput",
   props: {
     modelValue: {},
-    label: {},
+    format: { default: "YYYY-MM-DD" },
+    locale: { default: "en-US" },
+    label: { default: "" },
     required: { type: Boolean },
     clearable: { type: Boolean },
-    date: {}
+    date: { default: () => ({}) }
   },
   emits: ["update:modelValue"],
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
-    const attrs = useAttrs();
     const lang2 = useLang();
-    const $q = useQuasar();
-    if (lang2.value.isoName !== $q.lang.isoName)
-      loadLang($q.lang.isoName);
-    watch($q.lang, () => {
-      loadLang($q.lang.isoName);
+    const { modelValue, format, locale } = toRefs(props);
+    const year = ref();
+    const month = ref();
+    const day = ref();
+    const setYear = (val) => {
+      const nr = Number(val);
+      if (nr && nr > 1e3 && nr < 1e4)
+        year.value = nr;
+    };
+    const setMonth = (val) => {
+      const nr = Number(val);
+      if (nr && nr > 0 && nr < 13)
+        month.value = nr;
+      else
+        month.value = void 0;
+    };
+    const setDay = (val) => {
+      const nr = Number(val);
+      if (nr && nr > 0 && nr < 32)
+        day.value = nr;
+      else
+        day.value = void 0;
+    };
+    const setInternalDate = (dateString, separator = "-") => {
+      if (dateString) {
+        const [yearPart, monthPart, dayPart] = dateString.split(separator);
+        if (yearPart && monthPart && dayPart) {
+          year.value = Number(yearPart);
+          month.value = Number(monthPart);
+          day.value = Number(dayPart);
+        }
+      }
+    };
+    const setDate = (value) => {
+      setInternalDate(value, "/");
+    };
+    watch([year, month, day], () => {
+      const date = `${year.value}-${String(month.value).padStart(2, "0")}-${String(day.value).padStart(2, "0")}`;
+      if (Date.parse(date)) {
+        emit("update:modelValue", date);
+      } else {
+        emit("update:modelValue", "");
+      }
     });
-    const { modelValue } = toRefs(props);
-    const update = (val) => {
-      if (typeof val === "string" || val === null)
-        emit("update:modelValue", val);
+    const formattedDate = computed(() => {
+      if (modelValue.value)
+        return new Date(Date.parse(modelValue.value)).toLocaleDateString(
+          locale.value,
+          {
+            weekday: "long",
+            year: "numeric",
+            month: "short",
+            day: "numeric"
+          }
+        );
+      return "";
+    });
+    watch(modelValue, (newVal) => {
+      if (newVal)
+        setInternalDate(newVal);
+      else if (newVal === null) {
+        year.value = void 0;
+        month.value = void 0;
+        day.value = void 0;
+      }
+    });
+    setInternalDate(modelValue.value);
+    const goToNextElement = (e) => {
+      var _a, _b, _c, _d;
+      if (["Minus", "Slash"].includes(e.code)) {
+        e.preventDefault();
+        const next = (_d = (_c = (_b = (_a = e.currentTarget.parentElement) == null ? void 0 : _a.parentElement) == null ? void 0 : _b.parentElement) == null ? void 0 : _c.parentElement) == null ? void 0 : _d.nextElementSibling;
+        if (next) {
+          next.focus();
+        }
+      }
     };
-    watch(
-      () => modelValue == null ? void 0 : modelValue.value,
-      (newVal) => {
-        if (newVal === "")
-          emit("update:modelValue", null);
+    const dateProps = computed(() => ({
+      YYYY: {
+        modelValue: year.value,
+        placeholder: lang2.value.datePicker.YYYY,
+        style: "max-width: 6ch",
+        suffix: format.value === "YYYY-MM-DD" ? "-" : void 0,
+        class: format.value !== "YYYY-MM-DD" ? "q-mb-none q-ml-xs" : void 0,
+        "onUpdate:modelValue": setYear,
+        onKeydown: goToNextElement
+      },
+      MM: {
+        modelValue: month.value ? String(month.value).padStart(2, "0") : "",
+        placeholder: lang2.value.datePicker.MM,
+        style: "max-width: 4ch",
+        suffix: "-",
+        class: "q-ml-xs",
+        "onUpdate:modelValue": setMonth,
+        onKeydown: goToNextElement
+      },
+      DD: {
+        modelValue: day.value ? String(day.value).padStart(2, "0") : "",
+        placeholder: lang2.value.datePicker.DD,
+        style: "max-width: 4ch",
+        suffix: format.value === "DD-MM-YYYY" ? "-" : void 0,
+        class: format.value === "YYYY-MM-DD" ? "q-ml-xs" : void 0,
+        "onUpdate:modelValue": setDay,
+        onKeydown: goToNextElement
       }
-    );
+    }));
     const validations = ref([
       (v) => {
         if (v !== null)
-          return /^\d{4}\/(0?[1-9]|1[012])\/(0?[1-9]|[12][0-9]|3[01])$/.test(v);
+          return /^\d{4}-(0[1-9]|1[012])-(0[1-9]|[12][0-9]|3[01])$/.test(v);
         return true;
       }
     ]);
@@ -371,55 +463,69 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
       );
     return (_ctx, _cache) => {
       const _component_q_icon = QIcon;
+      const _component_q_tooltip = QTooltip;
       const _component_q_btn = QBtn;
-      const _component_q_date = QDate;
       const _component_q_popup_proxy = QPopupProxy;
+      const _component_q_field = QField;
       const _directive_close_popup = resolveDirective("close-popup");
-      return openBlock(), createBlock(unref(QInput), mergeProps(unref(attrs), {
-        rules: validations.value,
+      return openBlock(), createBlock(_component_q_field, {
         "model-value": unref(modelValue),
-        label: `${_ctx.label}${_ctx.required ? "*" : ""}`,
-        placeholder: unref(lang2).datePicker.placeholder,
-        mask: "date",
-        class: "q-pr-md",
-        "onUpdate:modelValue": update
-      }), {
+        "bottom-slots": "",
+        rules: validations.value
+      }, {
+        control: withCtx(() => [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(unref(format).split("-"), (part) => {
+            return openBlock(), createBlock(resolveDynamicComponent(unref(QInput)), mergeProps({
+              key: part,
+              borderless: ""
+            }, dateProps.value[part]), null, 16);
+          }), 128))
+        ]),
         append: withCtx(() => [
           _ctx.clearable ? (openBlock(), createBlock(_component_q_icon, {
             key: 0,
             name: "clear",
             class: "cursor-pointer",
-            onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("update:modelValue", null))
+            onClick: _cache[0] || (_cache[0] = ($event) => emit("update:modelValue", null))
           })) : createCommentVNode("", true),
           createVNode(_component_q_icon, {
             name: "event",
             class: "cursor-pointer"
           }, {
             default: withCtx(() => [
+              formattedDate.value ? (openBlock(), createBlock(_component_q_tooltip, { key: 0 }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(formattedDate.value), 1)
+                ]),
+                _: 1
+              })) : createCommentVNode("", true),
               createVNode(_component_q_popup_proxy, {
                 cover: "",
                 "transition-show": "scale",
                 "transition-hide": "scale"
               }, {
-                default: withCtx(() => [
-                  createVNode(_component_q_date, mergeProps(_ctx.date, {
-                    "model-value": unref(modelValue),
-                    "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => _ctx.$emit("update:modelValue", $event))
-                  }), {
-                    default: withCtx(() => [
-                      createElementVNode("div", _hoisted_1, [
-                        withDirectives(createVNode(_component_q_btn, {
-                          label: unref(lang2).buttons.close,
-                          color: "primary",
-                          flat: ""
-                        }, null, 8, ["label"]), [
-                          [_directive_close_popup]
+                default: withCtx(() => {
+                  var _a;
+                  return [
+                    createVNode(unref(QDate), mergeProps(_ctx.date, {
+                      "model-value": (_a = unref(modelValue)) == null ? void 0 : _a.replaceAll("-", "/"),
+                      "onUpdate:modelValue": setDate
+                    }), {
+                      default: withCtx(() => [
+                        createElementVNode("div", _hoisted_1, [
+                          withDirectives(createVNode(_component_q_btn, {
+                            label: unref(lang2).buttons.close,
+                            color: "primary",
+                            flat: ""
+                          }, null, 8, ["label"]), [
+                            [_directive_close_popup]
+                          ])
                         ])
-                      ])
-                    ]),
-                    _: 1
-                  }, 16, ["model-value"])
-                ]),
+                      ]),
+                      _: 1
+                    }, 16, ["model-value"])
+                  ];
+                }),
                 _: 1
               })
             ]),
@@ -427,7 +533,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
           })
         ]),
         _: 1
-      }, 16, ["rules", "model-value", "label", "placeholder"]);
+      }, 8, ["model-value", "rules"]);
     };
   }
 });

package/dist/general.js

@@ -1,7 +1,7 @@
-import { l as loadLang, u as useLang, _ as _sfc_main$4 } from "./QSubmitButton.vue_vue_type_script_setup_true_lang-3DA1OTeA.js";
+import { l as loadLang, u as useLang, _ as _sfc_main$4 } from "./QSubmitButton.vue_vue_type_script_setup_true_lang-DAnZaTMl.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 { e as enUs, n as nl } from "./en-US-Ub0VDpRf.js";
+import { e as enUs, n as nl } from "./en-US-Duo_j_eL.js";
 const _hoisted_1$1 = { class: "text-h6" };
 const _hoisted_2 = { class: "text-subtitle2" };
 const __default__$2 = {

package/dist/{nl-VodfMDVb.js → nl-BjtwxTCz.js}

@@ -34,6 +34,9 @@ const lang = {
   },
   datePicker: {
     placeholder: "JJJJ/MM/DD",
+    YYYY: "JJJJ",
+    MM: "MM",
+    DD: "DD",
     validations: {
       unavailableRange: "De geselecteerde periode bevat ongeschikbare datums."
     }

package/dist/style.css

@@ -1,4 +1,14 @@
 .card[data-v-302df27a] {
   width: 100%;
   max-width: 300px;
-}
+}
+.q-field--auto-height .q-field__control,
+.q-field--auto-height .q-field__native {
+  min-height: 1em;
+}
+.q-field--borderless .q-field__bottom,
+.q-field--borderless.q-field--dense .q-field__control,
+.q-field--standard .q-field__bottom,
+.q-field--standard.q-field--dense .q-field__control {
+  padding-top: 0;
+}

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

@@ -1,16 +1,33 @@
-import { QDateProps } from 'quasar';
+import { QDateProps, QuasarLanguageCodes } from 'quasar';
 export interface Props {
-    modelValue?: string | null;
+    modelValue: string | null;
+    format?: 'YYYY-MM-DD' | 'DD-MM-YYYY' | 'MM-DD-YYYY';
+    locale?: QuasarLanguageCodes;
     label?: string;
     required?: boolean;
     clearable?: boolean;
     date?: Partial<QDateProps>;
 }
-declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<Props>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+    format: string;
+    locale: string;
+    label: string;
+    date: () => {};
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (val: string | null) => void;
-}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>> & {
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+    format: string;
+    locale: string;
+    label: string;
+    date: () => {};
+}>>> & {
     "onUpdate:modelValue"?: ((val: string | null) => any) | undefined;
-}, {}, {}>;
+}, {
+    label: string;
+    date: Partial<QDateProps>;
+    format: "YYYY-MM-DD" | "DD-MM-YYYY" | "MM-DD-YYYY";
+    locale: keyof import("quasar").QuasarLanguageCodesHolder;
+}, {}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 type __VLS_TypePropsToRuntimeProps<T> = {
@@ -21,3 +38,11 @@ type __VLS_TypePropsToRuntimeProps<T> = {
         required: true;
     };
 };
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

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

@@ -34,6 +34,9 @@ export interface Language {
     };
     datePicker: {
         placeholder: string;
+        YYYY: string;
+        MM: string;
+        DD: string;
         validations: {
             unavailableRange: string;
         };
@@ -76,6 +79,9 @@ export declare const lang: Ref<{
     };
     datePicker: {
         placeholder: string;
+        YYYY: string;
+        MM: string;
+        DD: string;
         validations: {
             unavailableRange: string;
         };

package/dist/vite-plugin.js

@@ -37,17 +37,17 @@ 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;
-    return __awaiter(this, void 0, void 0, function () {
-        var pkgJson, _c, _d, exports, name;
+export default function () {
+    return __awaiter(this, arguments, void 0, function (_a) {
+        var pkgJson, _b, _c, exports, name;
+        var _d = _a === void 0 ? {} : _a, buildFromSrc = _d.buildFromSrc;
         return __generator(this, function (_e) {
             switch (_e.label) {
                 case 0:
-                    _d = (_c = JSON).parse;
+                    _c = (_b = JSON).parse;
                     return [4 /*yield*/, readFile(new URL('../package.json', import.meta.url).pathname, 'utf-8')];
                 case 1:
-                    pkgJson = _d.apply(_c, [_e.sent()]);
+                    pkgJson = _c.apply(_b, [_e.sent()]);
                     exports = pkgJson.exports;
                     name = pkgJson.name;
                     return [2 /*return*/, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simsustech/quasar-components",
-  "version": "0.4.8",
+  "version": "0.5.0",
   "author": "Stefan van Herwijnen",
   "description": "High level components for Quasar Framework",
   "license": "MIT",
@@ -52,26 +52,26 @@
     "quasar": "^2.9.2"
   },
   "devDependencies": {
-    "@types/node": "^20.11.16",
-    "@types/validator": "^13.11.8",
+    "@types/node": "^20.11.19",
+    "@types/validator": "^13.11.9",
     "@types/ws": "^8.5.10",
-    "@typescript-eslint/eslint-plugin": "^6.20.0",
-    "@typescript-eslint/parser": "^6.20.0",
-    "@vitejs/plugin-vue": "^5.0.3",
-    "@vue/server-renderer": "^3.4.15",
+    "@typescript-eslint/eslint-plugin": "^7.0.1",
+    "@typescript-eslint/parser": "^7.0.1",
+    "@vitejs/plugin-vue": "^5.0.4",
+    "@vue/server-renderer": "^3.4.19",
     "eslint": "^8.56.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier-vue": "^5.0.0",
     "eslint-plugin-vue": "^9.21.1",
     "glob": "^10.3.10",
     "local-pkg": "^0.5.0",
-    "prettier": "^3.2.4",
-    "quasar": "^2.14.3",
+    "prettier": "^3.2.5",
+    "quasar": "^2.14.4",
     "rimraf": "^5.0.5",
     "typescript": "^5.3.3",
     "unplugin-vue-components": "^0.26.0",
-    "vite": "^5.0.12",
-    "vue": "^3.4.15",
+    "vite": "^5.1.3",
+    "vue": "^3.4.19",
     "vue-router": "^4.2.5",
     "vue-tsc": "^1.8.27"
   },

package/src/ui/authentication/LoginForm.vue

@@ -15,6 +15,7 @@
       bottom-slots
       :rules="validations['email']"
       lazy-rules
+      autcomplete="email"
     />
     <q-input
       v-if="useUsername"
@@ -26,6 +27,7 @@
       bottom-slots
       :rules="validations['username']"
       lazy-rules
+      autocomplete="username"
     />
     <q-input
       id="password"
@@ -38,6 +40,7 @@
       :rules="validations['password']"
       lazy-rules
       bottom-slots
+      autcomplete="current-password"
     >
       <template #append>
         <q-icon

package/src/ui/form/DateInput.vue

@@ -1,27 +1,31 @@
 <template>
-  <q-input
-    v-bind="attrs"
-    :rules="validations"
-    :model-value="modelValue"
-    :label="`${label}${required ? '*' : ''}`"
-    :placeholder="lang.datePicker.placeholder"
-    mask="date"
-    class="q-pr-md"
-    @update:model-value="update"
-  >
-    <template v-slot:append>
+  <q-field :model-value="modelValue" bottom-slots :rules="validations">
+    <template #control>
+      <component
+        :is="QInput"
+        v-for="part in format.split('-')"
+        :key="part"
+        borderless
+        v-bind="dateProps[part]"
+      />
+    </template>
+
+    <template #append>
       <q-icon
         v-if="clearable"
         name="clear"
         class="cursor-pointer"
-        @click="$emit('update:modelValue', null)"
+        @click="emit('update:modelValue', null)"
       />
       <q-icon name="event" class="cursor-pointer">
+        <q-tooltip v-if="formattedDate">
+          {{ formattedDate }}
+        </q-tooltip>
         <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)"
+            :model-value="modelValue?.replaceAll('-', '/')"
+            @update:model-value="setDate"
           >
             <div class="row items-center justify-end">
               <q-btn
@@ -35,51 +39,170 @@
         </q-popup-proxy>
       </q-icon>
     </template>
-  </q-input>
+  </q-field>
 </template>
 
 <script setup lang="ts">
-import { ref, watch, useAttrs, toRefs } from 'vue'
-import { QDateProps, QInput, useQuasar } from 'quasar'
-import { useLang, loadLang } from './lang'
+import { ref, watch, toRefs, computed } from 'vue'
+import {
+  QDate,
+  QDateProps,
+  QInput,
+  QInputProps,
+  QuasarLanguageCodes
+} from 'quasar'
+import { useLang } from './lang'
 
 export interface Props {
-  modelValue?: string | null
+  modelValue: string | null
+  format?: 'YYYY-MM-DD' | 'DD-MM-YYYY' | 'MM-DD-YYYY'
+  locale?: QuasarLanguageCodes
   label?: string
   required?: boolean
   clearable?: boolean
   date?: Partial<QDateProps>
 }
-const props = defineProps<Props>()
+const props = withDefaults(defineProps<Props>(), {
+  format: 'YYYY-MM-DD',
+  locale: 'en-US',
+  label: '',
+  date: () => ({})
+})
 const emit = defineEmits<{
   (e: 'update:modelValue', val: string | null): void
 }>()
-const attrs = useAttrs()
+// const attrs = useAttrs()
 
 const lang = useLang()
 
-const $q = useQuasar()
-if (lang.value.isoName !== $q.lang.isoName) loadLang($q.lang.isoName)
-watch($q.lang, () => {
-  loadLang($q.lang.isoName)
+const { modelValue, format, locale } = toRefs(props)
+
+const year = ref<number>()
+const month = ref<number>()
+const day = ref<number>()
+
+const setYear: InstanceType<typeof QInput>['$props']['onUpdate:modelValue'] = (
+  val
+) => {
+  const nr = Number(val)
+  if (nr && nr > 1e3 && nr < 1e4) year.value = nr
+}
+
+const setMonth: InstanceType<typeof QInput>['$props']['onUpdate:modelValue'] = (
+  val
+) => {
+  const nr = Number(val)
+  if (nr && nr > 0 && nr < 13) month.value = nr
+  else month.value = undefined
+}
+
+const setDay: InstanceType<typeof QInput>['$props']['onUpdate:modelValue'] = (
+  val
+) => {
+  const nr = Number(val)
+  if (nr && nr > 0 && nr < 32) day.value = nr
+  else day.value = undefined
+}
+
+const setInternalDate = (
+  dateString?: string | null,
+  separator: '-' | '/' = '-'
+) => {
+  if (dateString) {
+    const [yearPart, monthPart, dayPart] = dateString.split(separator)
+    if (yearPart && monthPart && dayPart) {
+      year.value = Number(yearPart)
+      month.value = Number(monthPart)
+      day.value = Number(dayPart)
+    }
+  }
+}
+
+const setDate: InstanceType<typeof QDate>['$props']['onUpdate:modelValue'] = (
+  value
+) => {
+  setInternalDate(value, '/')
+}
+
+watch([year, month, day], () => {
+  const date = `${year.value}-${String(month.value).padStart(2, '0')}-${String(day.value).padStart(2, '0')}`
+  if (Date.parse(date)) {
+    emit('update:modelValue', date)
+  } else {
+    emit('update:modelValue', '')
+  }
 })
 
-const { modelValue } = toRefs(props)
+const formattedDate = computed(() => {
+  if (modelValue.value)
+    return new Date(Date.parse(modelValue.value)).toLocaleDateString(
+      locale.value,
+      {
+        weekday: 'long',
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric'
+      }
+    )
+  return ''
+})
 
-const update = (val: string | number | null) => {
-  if (typeof val === 'string' || val === null) emit('update:modelValue', val)
+watch(modelValue, (newVal) => {
+  if (newVal) setInternalDate(newVal)
+  else if (newVal === null) {
+    year.value = undefined
+    month.value = undefined
+    day.value = undefined
+  }
+})
+setInternalDate(modelValue.value)
+
+const goToNextElement = (e: KeyboardEvent) => {
+  if (['Minus', 'Slash'].includes(e.code)) {
+    e.preventDefault()
+    const next = (e.currentTarget as HTMLElement).parentElement?.parentElement
+      ?.parentElement?.parentElement?.nextElementSibling
+    if (next) {
+      ;(next as HTMLElement).focus()
+    }
+  }
 }
-watch(
-  () => modelValue?.value,
-  (newVal) => {
-    if (newVal === '') emit('update:modelValue', null)
+
+const dateProps = computed<Record<string, QInputProps>>(() => ({
+  YYYY: {
+    modelValue: year.value,
+    placeholder: lang.value.datePicker.YYYY,
+    style: 'max-width: 6ch',
+    suffix: format.value === 'YYYY-MM-DD' ? '-' : undefined,
+    class: format.value !== 'YYYY-MM-DD' ? 'q-mb-none q-ml-xs' : undefined,
+    'onUpdate:modelValue': setYear,
+    onKeydown: goToNextElement
+  },
+  MM: {
+    modelValue: month.value ? String(month.value).padStart(2, '0') : '',
+    placeholder: lang.value.datePicker.MM,
+    style: 'max-width: 4ch',
+    suffix: '-',
+    class: 'q-ml-xs',
+    'onUpdate:modelValue': setMonth,
+    onKeydown: goToNextElement
+  },
+  DD: {
+    modelValue: day.value ? String(day.value).padStart(2, '0') : '',
+    placeholder: lang.value.datePicker.DD,
+    style: 'max-width: 4ch',
+    suffix: format.value === 'DD-MM-YYYY' ? '-' : undefined,
+    class: format.value === 'YYYY-MM-DD' ? 'q-ml-xs' : undefined,
+    'onUpdate:modelValue': setDay,
+    onKeydown: goToNextElement
   }
-)
+}))
 
 const validations = ref<((val: string) => boolean | string)[]>([
   (v) => {
     if (v !== null)
-      return /^\d{4}\/(0?[1-9]|1[012])\/(0?[1-9]|[12][0-9]|3[01])$/.test(v)
+      // return /^\d{4}\/(0?[1-9]|1[012])\/(0?[1-9]|[12][0-9]|3[01])$/.test(v)
+      return /^\d{4}-(0[1-9]|1[012])-(0[1-9]|[12][0-9]|3[01])$/.test(v)
     return true
   }
 ])
@@ -89,3 +212,16 @@ if (props.required)
     (val: string) => !!val || lang.value.validations.fieldRequired
   )
 </script>
+
+<style>
+.q-field--auto-height .q-field__control,
+.q-field--auto-height .q-field__native {
+  min-height: 1em;
+}
+.q-field--borderless .q-field__bottom,
+.q-field--borderless.q-field--dense .q-field__control,
+.q-field--standard .q-field__bottom,
+.q-field--standard.q-field--dense .q-field__control {
+  padding-top: 0;
+}
+</style>

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

@@ -36,6 +36,9 @@ const lang: Language = {
   },
   datePicker: {
     placeholder: 'YYYY/MM/DD',
+    YYYY: 'YYYY',
+    MM: 'MM',
+    DD: 'DD',
     validations: {
       unavailableRange: 'The selected period contains unavailable dates.'
     }

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

@@ -34,6 +34,9 @@ export interface Language {
   }
   datePicker: {
     placeholder: string
+    YYYY: string
+    MM: string
+    DD: string
     validations: {
       unavailableRange: string
     }

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

@@ -36,6 +36,9 @@ const lang: Language = {
   },
   datePicker: {
     placeholder: 'JJJJ/MM/DD',
+    YYYY: 'JJJJ',
+    MM: 'MM',
+    DD: 'DD',
     validations: {
       unavailableRange: 'De geselecteerde periode bevat ongeschikbare datums.'
     }