@simsustech/quasar-components 0.12.3 → 0.12.5

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @simsustech/quasar-components
 
+## 0.12.5
+
+### Patch Changes
+
+- d6f5de7: fix(components): fix NavigationRailFabs
+- 0ec347b: fix(CronScheduleInput): remove negative-margin hack, use items-center
+
+  Same pattern as DateInput: the old margin-top: -1.7em hack broke with
+  unocss-preset-quasar updates. Replaced with:
+
+  - items-center for proper vertical alignment
+  - CSS overrides for padding leaks from q-field--labeled
+  - Neutralized cascaded padding-top on inner control-containers
+  - Removed horizontal padding on inner controls
+
+- fix(DateInput): prevent DD/MM/YYYY fields from overlapping QField stack label
+
+  Nesting QInput inside the outer QField's #control slot created a
+  QField-inside-QField structure that caused padding leaks from the
+  preset's q-field--labeled descendant selectors and broke with the
+  unocss-preset-quasar update. Refactored to use plain `<input>`
+  elements instead of nested QInput, removing the old negative-margin
+  hack (-1.7em) that caused the overlap.
+
+## 0.12.4
+
+### Patch Changes
+
+- a21d944: fix(components): move ready check to QLayout in Md3Layout
+
 ## 0.12.3
 
 ### Patch Changes

package/dist/form.js

@@ -1,6 +1,6 @@
 import { n as loadLang, r as useLang, t as LocaleSelect_default } from "./LocaleSelect-BtwfPrmu.js";
 import { QBtn, QDate, QEditor, QField, QIcon, QInput, QItem, QItemLabel, QItemSection, QPopupProxy, QSelect, QTooltip, useQuasar } from "quasar";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, guardReactiveProps, mergeProps, normalizeProps, openBlock, ref, renderList, renderSlot, resolveDirective, resolveDynamicComponent, toDisplayString, toRefs, unref, useAttrs, useSlots, watch, withAsyncContext, withCtx, withDirectives } from "vue";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, guardReactiveProps, mergeProps, normalizeClass, normalizeProps, normalizeStyle, openBlock, ref, renderList, renderSlot, resolveDirective, toDisplayString, toRefs, unref, useAttrs, useSlots, watch, withAsyncContext, withCtx, withDirectives } from "vue";
 //#endregion
 //#region src/ui/form/GenderSelect.vue
 var GenderSelect_default = /* @__PURE__ */ defineComponent({
@@ -249,15 +249,28 @@ var TelephoneNumberInput_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/ui/form/DateInput.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$2 = { class: "row" };
-var _hoisted_2$1 = {
+var _hoisted_1$2 = {
+	class: "row items-center date-input-row no-wrap",
+	style: { "height": "100%" }
+};
+var _hoisted_2$1 = [
+	"value",
+	"placeholder",
+	"maxlength",
+	"onInput",
+	"onKeydown"
+];
+var _hoisted_3 = {
 	key: 0,
+	class: "q-field__marginal",
 	style: {
-		"margin-top": "1em",
-		"width": "1ch"
+		"flex": "initial",
+		"width": "1ch",
+		"padding": "0",
+		"margin": "0"
 	}
 };
-var _hoisted_3 = { class: "row items-center justify-end" };
+var _hoisted_4 = { class: "row items-center justify-end" };
 //#endregion
 //#region src/ui/form/DateInput.vue
 var DateInput_default = /* @__PURE__ */ defineComponent({
@@ -281,46 +294,84 @@ var DateInput_default = /* @__PURE__ */ defineComponent({
 		const emit = __emit;
 		const lang = useLang();
 		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;
-			else year.value = void 0;
+		const year = ref("");
+		const month = ref("");
+		const day = ref("");
+		const parts = computed(() => {
+			const keys = format.value.split("-");
+			const map = {
+				YYYY: {
+					value: year.value,
+					placeholder: lang.value.datePicker.YYYY,
+					style: { "max-width": format.value === "YYYY-MM-DD" ? "8ch" : "7ch" },
+					inputClass: "text-center",
+					maxLength: 10
+				},
+				MM: {
+					value: month.value,
+					placeholder: lang.value.datePicker.MM,
+					style: { "max-width": "7ch" },
+					inputClass: "text-center",
+					maxLength: 10
+				},
+				DD: {
+					value: day.value,
+					placeholder: lang.value.datePicker.DD,
+					style: { "max-width": format.value === "DD-MM-YYYY" ? "7ch" : "4ch" },
+					inputClass: "text-center",
+					maxLength: 10
+				}
+			};
+			return keys.map((k) => ({
+				key: k,
+				...map[k]
+			}));
+		});
+		const onInput = (e, key) => {
+			const input = e.target;
+			const raw = input.value;
+			let clamped;
+			if (key === "YYYY") clamped = clamp(raw, 4);
+			else if (key === "MM") clamped = clamp(raw, 2, 12);
+			else if (key === "DD") clamped = clamp(raw, 2, 31);
+			else clamped = raw;
+			if (input.value !== clamped) input.value = clamped;
+			if (key === "YYYY") year.value = clamped;
+			else if (key === "MM") month.value = clamped;
+			else if (key === "DD") day.value = clamped;
 		};
-		const setMonth = (val) => {
-			const nr = Number(val);
-			if (nr && nr > 0 && nr < 13) month.value = nr;
-			else month.value = void 0;
+		const onKeydown = (e, _index) => {
+			if (["Minus", "Slash"].includes(e.code)) {
+				e.preventDefault();
+				const all = e.currentTarget.closest(".date-input-row")?.querySelectorAll(".q-field__native");
+				const currentIdx = Array.from(all || []).indexOf(e.currentTarget);
+				(all?.[currentIdx + 1])?.focus();
+			}
 		};
-		const setDay = (val) => {
-			const nr = Number(val);
-			if (nr && nr > 0 && nr < 32) day.value = nr;
-			else day.value = void 0;
+		const clamp = (val, maxLen, maxVal) => {
+			const digits = val.replace(/\D/g, "").slice(0, maxLen);
+			if (maxVal !== void 0 && digits.length === maxLen) {
+				if (parseInt(digits, 10) > maxVal) return String(maxVal);
+			}
+			return digits;
 		};
-		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);
+		watch(year, () => emitDate());
+		watch(month, () => emitDate());
+		watch(day, () => emitDate());
+		function emitDate() {
+			const y = year.value;
+			const m = month.value;
+			const d = day.value;
+			if (y.length === 4 && m.length === 2 && d.length === 2) {
+				const date = `${y}-${m}-${d}`;
+				if (!isNaN(Date.parse(date))) {
+					emit("update:modelValue", date);
+					return;
 				}
 			}
-		};
-		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 (year.value && month.value && day.value && !isNaN(Date.parse(date))) emit("update:modelValue", date);
-			else if (modelValue.value !== null) emit("update:modelValue", null);
-		});
+			const partial = `${y.padEnd(4, "_")}-${m.padEnd(2, "_")}-${d.padEnd(2, "_")}`;
+			if (partial !== modelValue.value) emit("update:modelValue", partial);
+		}
 		const formattedDate = computed(() => {
 			if (modelValue.value) return new Date(Date.parse(modelValue.value)).toLocaleDateString(locale.value, {
 				weekday: "long",
@@ -330,69 +381,28 @@ var DateInput_default = /* @__PURE__ */ defineComponent({
 			});
 			return "";
 		});
+		function setInternalDate(dateString, separator = "-") {
+			if (dateString) {
+				const [yearPart, monthPart, dayPart] = dateString.split(separator);
+				if (yearPart && monthPart && dayPart) {
+					year.value = String(yearPart);
+					month.value = String(monthPart).padStart(2, "0");
+					day.value = String(dayPart).padStart(2, "0");
+				}
+			}
+		}
+		const setDate = (value) => {
+			setInternalDate(value, "/");
+		};
 		watch(modelValue, (newVal) => {
-			if (newVal) setInternalDate(newVal);
+			if (newVal && !newVal.includes("_")) setInternalDate(newVal);
 			else if (newVal === null) {
-				year.value = void 0;
-				month.value = void 0;
-				day.value = void 0;
+				year.value = "";
+				month.value = "";
+				day.value = "";
 			}
 		});
 		setInternalDate(modelValue.value);
-		const goToNextElement = (e) => {
-			if (["Minus", "Slash"].includes(e.code)) {
-				e.preventDefault();
-				const next = e.currentTarget.parentElement?.parentElement?.parentElement?.parentElement?.nextElementSibling;
-				if (next) next.focus();
-			}
-		};
-		const dateProps = computed(() => ({
-			YYYY: {
-				modelValue: year.value,
-				placeholder: lang.value.datePicker.YYYY,
-				style: {
-					"max-width": format.value === "YYYY-MM-DD" ? "8ch" : "7ch",
-					"margin-top": "-1.7em",
-					"margin-bottom": "-0.5em",
-					background: "transparent",
-					border: 0
-				},
-				class: format.value !== "YYYY-MM-DD" ? "q-mb-none q-ml-none" : void 0,
-				inputClass: "text-center",
-				"onUpdate:modelValue": setYear,
-				onKeydown: goToNextElement
-			},
-			MM: {
-				modelValue: month.value ? String(month.value).padStart(2, "0") : "",
-				placeholder: lang.value.datePicker.MM,
-				style: {
-					"max-width": "7ch",
-					"margin-top": "-1.7em",
-					"margin-bottom": "-0.5em",
-					background: "transparent",
-					border: 0
-				},
-				class: "q-ml-none",
-				inputClass: "text-center",
-				"onUpdate:modelValue": setMonth,
-				onKeydown: goToNextElement
-			},
-			DD: {
-				modelValue: day.value ? String(day.value).padStart(2, "0") : "",
-				placeholder: lang.value.datePicker.DD,
-				style: {
-					"max-width": format.value === "DD-MM-YYYY" ? "7ch" : "4ch",
-					"margin-top": "-1.7em",
-					"margin-bottom": "-0.5em",
-					background: "transparent",
-					border: 0
-				},
-				class: format.value === "YYYY-MM-DD" ? "q-ml-none" : void 0,
-				inputClass: "text-center",
-				"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 true;
@@ -411,24 +421,24 @@ var DateInput_default = /* @__PURE__ */ defineComponent({
 				rules: validations.value,
 				label: `${__props.label}${__props.required ? "*" : ""}`,
 				"stack-label": "",
-				"lazy-rules": ""
+				"lazy-rules": "",
+				class: "date-input-field"
 			}, createSlots({
-				control: withCtx(() => [createElementVNode("div", _hoisted_1$2, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(format).split("-"), (part, index) => {
-					return openBlock(), createBlock(resolveDynamicComponent(unref(QInput)), mergeProps({
-						key: part,
-						class: "col-auto",
-						borderless: "",
-						filled: false,
-						outlined: false,
-						standout: false,
-						rounded: false
-					}, { ref_for: true }, dateProps.value[part], {
+				control: withCtx(() => [createElementVNode("div", _hoisted_1$2, [(openBlock(true), createElementBlock(Fragment, null, renderList(parts.value, (part, index) => {
+					return openBlock(), createElementBlock("div", {
+						key: part.key,
+						class: "row no-wrap items-center",
+						style: { "gap": "0" }
+					}, [createElementVNode("input", {
+						value: part.value,
+						placeholder: part.placeholder,
+						class: normalizeClass(["q-field__native text-center", part.inputClass]),
+						style: normalizeStyle(part.style),
 						inputmode: "numeric",
-						dense: ""
-					}), {
-						after: withCtx(() => [index < 2 ? (openBlock(), createElementBlock("a", _hoisted_2$1, "-")) : createCommentVNode("", true)]),
-						_: 2
-					}, 1040);
+						maxlength: part.maxLength,
+						onInput: ($event) => onInput($event, part.key),
+						onKeydown: ($event) => onKeydown($event, index)
+					}, null, 46, _hoisted_2$1), index < parts.value.length - 1 ? (openBlock(), createElementBlock("span", _hoisted_3, "-")) : createCommentVNode("", true)]);
 				}), 128))])]),
 				append: withCtx(() => [__props.clearable ? (openBlock(), createBlock(_component_q_icon, {
 					key: 0,
@@ -451,7 +461,7 @@ var DateInput_default = /* @__PURE__ */ defineComponent({
 							"model-value": unref(modelValue)?.replaceAll("-", "/"),
 							"onUpdate:modelValue": setDate
 						}), {
-							default: withCtx(() => [createElementVNode("div", _hoisted_3, [withDirectives(createVNode(_component_q_btn, {
+							default: withCtx(() => [createElementVNode("div", _hoisted_4, [withDirectives(createVNode(_component_q_btn, {
 								label: unref(lang).buttons.close,
 								color: "primary",
 								flat: ""
@@ -805,10 +815,10 @@ var FilteredModelSelect_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/ui/form/CronScheduleInput.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$1 = { class: "row" };
+var _hoisted_1$1 = { class: "row cron-input-row items-center" };
 var _hoisted_2 = {
 	key: 0,
-	class: "row"
+	class: "row cron-input-row items-center"
 };
 //#endregion
 //#region src/ui/form/CronScheduleInput.vue
@@ -869,13 +879,10 @@ var CronScheduleInput_default = /* @__PURE__ */ defineComponent({
 			}
 		}
 		const smallStyle = {
-			"margin-top": "-1.7em",
-			"margin-bottom": "-0.5em",
 			background: "transparent",
 			border: 0
 		};
 		const dayOfWeekStyle = {
-			"margin-bottom": "-0.5em",
 			background: "transparent",
 			border: 0
 		};
@@ -892,7 +899,8 @@ var CronScheduleInput_default = /* @__PURE__ */ defineComponent({
 				rules: validations.value,
 				label: `${unref(label)}${__props.required ? "*" : ""}`,
 				"stack-label": "",
-				borderless: ""
+				borderless: "",
+				class: "cron-input-field"
 			}, {
 				control: withCtx(() => [createElementVNode("div", _hoisted_1$1, [
 					__props.showHour ? (openBlock(), createBlock(_component_q_select, {

package/dist/md3.js

@@ -32,7 +32,11 @@ var NavigationRailFabs_default = /* @__PURE__ */ defineComponent({
 					"gt-sm": true,
 					animated: !!__props.seekAttention,
 					"animated-tada": !!__props.seekAttention,
-					"animated-infinite": !!__props.seekAttention
+					"animated-infinite": !!__props.seekAttention,
+					"!bg-$light-primary-container": true,
+					"dark:!bg-$dark-primary-container": true,
+					"text-$on-light-primary-container": true,
+					"dark:text-$on-dark-primary-container": true
 				}),
 				fab: "",
 				icon: unref(addIcon),
@@ -49,7 +53,11 @@ var NavigationRailFabs_default = /* @__PURE__ */ defineComponent({
 					"gt-sm": true,
 					animated: !!__props.seekAttention,
 					"animated-tada": !!__props.seekAttention,
-					"animated-infinite": !!__props.seekAttention
+					"animated-infinite": !!__props.seekAttention,
+					"!bg-$light-primary-container": true,
+					"dark:!bg-$dark-primary-container": true,
+					"text-$on-light-primary-container": true,
+					"dark:text-$on-dark-primary-container": true
 				}),
 				fab: "",
 				icon: unref(editIcon),
@@ -264,8 +272,7 @@ function onClickOutside(target, handler, options = {}) {
 Number.POSITIVE_INFINITY;
 //#endregion
 //#region src/ui/md3/Md3Layout.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = { key: 0 };
-var _hoisted_2 = {
+var _hoisted_1 = {
 	id: "fabs",
 	class: "q-mb-md min-h-56px"
 };
@@ -325,8 +332,11 @@ var Md3Layout_default = /* @__PURE__ */ defineComponent({
 			const _component_router_view = resolveComponent("router-view");
 			const _component_q_page_container = QPageContainer;
 			const _component_q_layout = QLayout;
-			return openBlock(), createBlock(_component_q_layout, { view: "lHh Lpr lFf" }, {
-				default: withCtx(() => [__props.ready ? (openBlock(), createElementBlock("div", _hoisted_1, [
+			return __props.ready ? (openBlock(), createBlock(_component_q_layout, {
+				key: 0,
+				view: "lHh Lpr lFf"
+			}, {
+				default: withCtx(() => [
 					createVNode(_component_q_header, null, {
 						default: withCtx(() => [createVNode(_component_q_toolbar, null, {
 							default: withCtx(() => [!miniState.value ? (openBlock(), createBlock(_component_q_btn, {
@@ -369,7 +379,7 @@ var Md3Layout_default = /* @__PURE__ */ defineComponent({
 								class: "q-mb-md",
 								onClick: _cache[1] || (_cache[1] = ($event) => toggleLeftDrawer())
 							}),
-							createElementVNode("div", _hoisted_2, [renderSlot(_ctx.$slots, "fabs", { showSticky: false })]),
+							createElementVNode("div", _hoisted_1, [renderSlot(_ctx.$slots, "fabs", { showSticky: false })]),
 							renderSlot(_ctx.$slots, "drawer-mini-navigation")
 						], 2)]),
 						default: withCtx(() => [renderSlot(_ctx.$slots, "drawer")]),
@@ -387,9 +397,9 @@ var Md3Layout_default = /* @__PURE__ */ defineComponent({
 						default: withCtx(() => [createVNode(_component_router_view), renderSlot(_ctx.$slots, "fabs", { showSticky: true })]),
 						_: 3
 					})
-				])) : createCommentVNode("", true)]),
+				]),
 				_: 3
-			});
+			})) : createCommentVNode("", true);
 		};
 	}
 });

package/dist/quasar-components.css

@@ -2,6 +2,44 @@
 .break-all {
   word-break: break-all;
 }
+
+/* The outer QField gets q-field--labeled which leaks padding into
+   descendant .q-field__native elements. The auto-height override
+   fixes padding-top but not padding-bottom. */
+.date-input-field.q-field--auto-height.q-field--labeled .q-field__native {
+  padding-bottom: 0 !important;
+  box-sizing: border-box;
+}
+
+/* Remove the standard underline (creates whitespace beneath) */
+.date-input-field.q-field--standard
+  > .q-field__inner
+  > .q-field__control::before {
+  border-bottom: none !important;
+}
+.date-input-field.q-field--standard
+  > .q-field__inner
+  > .q-field__control::after {
+  display: none !important;
+}
+
+/* Stop padding leak from outer q-field--labeled into inner QSelects */
+.cron-input-field.q-field--labeled .cron-input-row .q-field__native,
+.cron-input-field.q-field--labeled .cron-input-row .q-field__input {
+  padding-bottom: 0 !important;
+}
+
+/* Inner control-container — neutralize cascaded padding-top */
+.cron-input-field.q-field--auto-height.q-field--labeled
+  .cron-input-row
+  .q-field__control-container {
+  padding-top: 0 !important;
+}
+
+/* Inner controls — remove horizontal padding */
+.cron-input-field .cron-input-row .q-field__control {
+  padding-inline: 0 !important;
+}
 /* https://github.com/quasarframework/quasar/blob/dev/docs/src/layouts/doc-layout/DocPageMenu.sass */
 .q-drawer-list .q-item__section--avatar {
   color: var(--q-primary);

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

@@ -12,9 +12,9 @@ export interface Props {
         clear: string;
     };
 }
-declare var __VLS_57: string, __VLS_58: any;
+declare var __VLS_50: string, __VLS_51: any;
 type __VLS_Slots = {} & {
-    [K in NonNullable<typeof __VLS_57>]?: (props: typeof __VLS_58) => any;
+    [K in NonNullable<typeof __VLS_50>]?: (props: typeof __VLS_51) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "update:modelValue": (val: string | null) => any;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simsustech/quasar-components",
-  "version": "0.12.3",
+  "version": "0.12.5",
   "description": "High level components for Quasar Framework",
   "bugs": "https://github.com/simsusech/quasar-components/issues",
   "license": "MIT",

package/src/ui/form/CronScheduleInput.vue

@@ -5,9 +5,10 @@
     :label="`${label}${required ? '*' : ''}`"
     stack-label
     borderless
+    class="cron-input-field"
   >
     <template #control>
-      <div class="row">
+      <div class="row cron-input-row items-center">
         <q-select
           v-if="showHour"
           v-model="hour"
@@ -102,7 +103,7 @@
           </template>
         </q-select>
       </div>
-      <div v-if="showDayOfWeek" class="row">
+      <div v-if="showDayOfWeek" class="row cron-input-row items-center">
         <q-select
           v-if="showDayOfWeek"
           v-model="dayOfWeek"
@@ -214,14 +215,11 @@ function setInternalCron(cronString: string) {
 }
 
 const smallStyle = {
-  'margin-top': '-1.7em',
-  'margin-bottom': '-0.5em',
   background: 'transparent',
   border: 0
 }
 
 const dayOfWeekStyle = {
-  'margin-bottom': '-0.5em',
   background: 'transparent',
   border: 0
 }
@@ -234,3 +232,23 @@ watch(modelValue, (newVal) => {
 })
 setInternalCron(modelValue.value)
 </script>
+
+<style>
+/* Stop padding leak from outer q-field--labeled into inner QSelects */
+.cron-input-field.q-field--labeled .cron-input-row .q-field__native,
+.cron-input-field.q-field--labeled .cron-input-row .q-field__input {
+  padding-bottom: 0 !important;
+}
+
+/* Inner control-container — neutralize cascaded padding-top */
+.cron-input-field.q-field--auto-height.q-field--labeled
+  .cron-input-row
+  .q-field__control-container {
+  padding-top: 0 !important;
+}
+
+/* Inner controls — remove horizontal padding */
+.cron-input-field .cron-input-row .q-field__control {
+  padding-inline: 0 !important;
+}
+</style>

package/src/ui/form/DateInput.vue

@@ -6,27 +6,34 @@
     :label="`${label}${required ? '*' : ''}`"
     stack-label
     lazy-rules
+    class="date-input-field"
   >
     <template #control>
-      <div class="row">
-        <component
-          :is="QInput"
-          v-for="(part, index) in format.split('-')"
-          :key="part"
-          class="col-auto"
-          borderless
-          :filled="false"
-          :outlined="false"
-          :standout="false"
-          :rounded="false"
-          v-bind="dateProps[part]"
-          inputmode="numeric"
-          dense
+      <div class="row items-center date-input-row no-wrap" style="height: 100%">
+        <div
+          v-for="(part, index) in parts"
+          :key="part.key"
+          class="row no-wrap items-center"
+          style="gap: 0"
         >
-          <template #after>
-            <a v-if="index < 2" style="margin-top: 1em; width: 1ch">-</a>
-          </template>
-        </component>
+          <input
+            :value="part.value"
+            :placeholder="part.placeholder"
+            class="q-field__native text-center"
+            :class="part.inputClass"
+            :style="part.style"
+            inputmode="numeric"
+            :maxlength="part.maxLength"
+            @input="onInput($event, part.key)"
+            @keydown="onKeydown($event, index)"
+          />
+          <span
+            v-if="index < parts.length - 1"
+            class="q-field__marginal"
+            style="flex: initial; width: 1ch; padding: 0; margin: 0"
+            >-</span
+          >
+        </div>
       </div>
     </template>
 
@@ -68,13 +75,7 @@
 
 <script setup lang="ts">
 import { ref, watch, toRefs, computed } from 'vue'
-import {
-  QDate,
-  QDateProps,
-  QInput,
-  QInputProps,
-  QuasarLanguageCodes
-} from 'quasar'
+import { QDate, QDateProps, QuasarLanguageCodes } from 'quasar'
 import { useLang } from './lang'
 
 export interface Props {
@@ -103,68 +104,112 @@ const props = withDefaults(defineProps<Props>(), {
 const emit = defineEmits<{
   (e: 'update:modelValue', val: string | null): void
 }>()
-// const attrs = useAttrs()
 
 const lang = useLang()
 
 const { modelValue, format, locale } = toRefs(props)
 
-const year = ref<number>()
-const month = ref<number>()
-const day = ref<number>()
+const year = ref('')
+const month = ref('')
+const day = ref('')
 
-const setYear: InstanceType<typeof QInput>['$props']['onUpdate:modelValue'] = (
-  val
-) => {
-  const nr = Number(val)
-  if (nr && nr > 1e3 && nr < 1e4) year.value = nr
-  else year.value = undefined
+interface PartInfo {
+  value: string
+  placeholder: string
+  style: Record<string, string>
+  inputClass: string
+  maxLength: number
 }
 
-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 parts = computed(() => {
+  const keys = format.value.split('-')
+  const map: Record<string, PartInfo> = {
+    YYYY: {
+      value: year.value,
+      placeholder: lang.value.datePicker.YYYY,
+      style: { 'max-width': format.value === 'YYYY-MM-DD' ? '8ch' : '7ch' },
+      inputClass: 'text-center',
+      maxLength: 10
+    },
+    MM: {
+      value: month.value,
+      placeholder: lang.value.datePicker.MM,
+      style: { 'max-width': '7ch' },
+      inputClass: 'text-center',
+      maxLength: 10
+    },
+    DD: {
+      value: day.value,
+      placeholder: lang.value.datePicker.DD,
+      style: { 'max-width': format.value === 'DD-MM-YYYY' ? '7ch' : '4ch' },
+      inputClass: 'text-center',
+      maxLength: 10
+    }
+  }
+  return keys.map((k) => ({ key: k, ...map[k] }))
+})
 
-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 onInput = (e: Event, key: string) => {
+  const input = e.target as HTMLInputElement
+  const raw = input.value
+  let clamped: string
+  if (key === 'YYYY') clamped = clamp(raw, 4)
+  else if (key === 'MM') clamped = clamp(raw, 2, 12)
+  else if (key === 'DD') clamped = clamp(raw, 2, 31)
+  else clamped = raw
+  // Directly set DOM value so it's visible immediately — Vue's :value
+  // binding is async and `pressSequentially` types faster than it resolves.
+  // Without this, the browser shows the raw non-digit-mixed value between renders.
+  if (input.value !== clamped) input.value = clamped
+  if (key === 'YYYY') year.value = clamped
+  else if (key === 'MM') month.value = clamped
+  else if (key === 'DD') day.value = clamped
 }
 
-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 onKeydown = (e: KeyboardEvent, _index: number) => {
+  if (['Minus', 'Slash'].includes(e.code)) {
+    e.preventDefault()
+    const row = (e.currentTarget as HTMLElement).closest('.date-input-row')
+    const all = row?.querySelectorAll('.q-field__native')
+    const currentIdx = Array.from(all || []).indexOf(
+      e.currentTarget as HTMLElement
+    )
+    const next = all?.[currentIdx + 1] as HTMLElement | undefined
+    next?.focus()
   }
 }
 
-const setDate: InstanceType<typeof QDate>['$props']['onUpdate:modelValue'] = (
-  value
-) => {
-  setInternalDate(value, '/')
+const clamp = (val: string, maxLen: number, maxVal?: number): string => {
+  const digits = val.replace(/\D/g, '').slice(0, maxLen)
+  if (maxVal !== undefined && digits.length === maxLen) {
+    const n = parseInt(digits, 10)
+    if (n > maxVal) return String(maxVal)
+  }
+  return digits
 }
 
-watch([year, month, day], () => {
-  const date = `${year.value}-${String(month.value).padStart(2, '0')}-${String(day.value).padStart(2, '0')}`
-  if (year.value && month.value && day.value && !isNaN(Date.parse(date))) {
-    emit('update:modelValue', date)
-  } else if (modelValue.value !== null) {
-    emit('update:modelValue', null)
+watch(year, () => emitDate())
+watch(month, () => emitDate())
+watch(day, () => emitDate())
+
+function emitDate() {
+  const y = year.value
+  const m = month.value
+  const d = day.value
+  if (y.length === 4 && m.length === 2 && d.length === 2) {
+    const date = `${y}-${m}-${d}`
+    if (!isNaN(Date.parse(date))) {
+      emit('update:modelValue', date)
+      return
+    }
   }
-})
+  // Emit partial date so validation rules still catch invalid input,
+  // but watch(modelValue) doesn't clear the refs (it only clears on null).
+  const partial = `${y.padEnd(4, '_')}-${m.padEnd(2, '_')}-${d.padEnd(2, '_')}`
+  if (partial !== modelValue.value) {
+    emit('update:modelValue', partial)
+  }
+}
 
 const formattedDate = computed(() => {
   if (modelValue.value)
@@ -180,82 +225,42 @@ const formattedDate = computed(() => {
   return ''
 })
 
-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()
+function setInternalDate(
+  dateString?: string | null,
+  separator: '-' | '/' = '-'
+) {
+  if (dateString) {
+    const [yearPart, monthPart, dayPart] = dateString.split(separator)
+    if (yearPart && monthPart && dayPart) {
+      year.value = String(yearPart)
+      month.value = String(monthPart).padStart(2, '0')
+      day.value = String(dayPart).padStart(2, '0')
     }
   }
 }
 
-const dateProps = computed<Record<string, QInputProps>>(() => ({
-  YYYY: {
-    modelValue: year.value,
-    placeholder: lang.value.datePicker.YYYY,
-    style: {
-      'max-width': format.value === 'YYYY-MM-DD' ? '8ch' : '7ch',
-      'margin-top': '-1.7em',
-      'margin-bottom': '-0.5em',
-      background: 'transparent',
-      border: 0
-    },
-    // suffix: format.value === 'YYYY-MM-DD' ? '-' : undefined,
-    class: format.value !== 'YYYY-MM-DD' ? 'q-mb-none q-ml-none' : undefined,
-    inputClass: 'text-center',
-    'onUpdate:modelValue': setYear,
-    onKeydown: goToNextElement
-  },
-  MM: {
-    modelValue: month.value ? String(month.value).padStart(2, '0') : '',
-    placeholder: lang.value.datePicker.MM,
-    style: {
-      'max-width': '7ch',
-      'margin-top': '-1.7em',
-      'margin-bottom': '-0.5em',
-      background: 'transparent',
-      border: 0
-    },
-    // suffix: '-',
-    class: 'q-ml-none',
-    inputClass: 'text-center',
-    'onUpdate:modelValue': setMonth,
-    onKeydown: goToNextElement
-  },
-  DD: {
-    modelValue: day.value ? String(day.value).padStart(2, '0') : '',
-    placeholder: lang.value.datePicker.DD,
-    style: {
-      'max-width': format.value === 'DD-MM-YYYY' ? '7ch' : '4ch',
-      'margin-top': '-1.7em',
-      'margin-bottom': '-0.5em',
-      background: 'transparent',
-      border: 0
-    },
-    // suffix: format.value === 'DD-MM-YYYY' ? '-' : undefined,
-    class: format.value === 'YYYY-MM-DD' ? 'q-ml-none' : undefined,
-    inputClass: 'text-center',
-    'onUpdate:modelValue': setDay,
-    onKeydown: goToNextElement
+const setDate: InstanceType<typeof QDate>['$props']['onUpdate:modelValue'] = (
+  value
+) => {
+  setInternalDate(value, '/')
+}
+
+watch(modelValue, (newVal) => {
+  if (newVal && !newVal.includes('_')) {
+    // Proper date string (no _ padding from partial emits)
+    setInternalDate(newVal)
+  } else if (newVal === null) {
+    year.value = ''
+    month.value = ''
+    day.value = ''
   }
-}))
+  // Partial dates contain _ — refs are already correct from onInput
+})
+setInternalDate(modelValue.value)
 
 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 true
   }
@@ -267,4 +272,24 @@ if (props.required)
   )
 </script>
 
-<style></style>
+<style>
+/* The outer QField gets q-field--labeled which leaks padding into
+   descendant .q-field__native elements. The auto-height override
+   fixes padding-top but not padding-bottom. */
+.date-input-field.q-field--auto-height.q-field--labeled .q-field__native {
+  padding-bottom: 0 !important;
+  box-sizing: border-box;
+}
+
+/* Remove the standard underline (creates whitespace beneath) */
+.date-input-field.q-field--standard
+  > .q-field__inner
+  > .q-field__control::before {
+  border-bottom: none !important;
+}
+.date-input-field.q-field--standard
+  > .q-field__inner
+  > .q-field__control::after {
+  display: none !important;
+}
+</style>

package/src/ui/md3/Md3Layout.vue

@@ -1,71 +1,69 @@
 <template>
-  <q-layout view="lHh Lpr lFf">
-    <div v-if="ready">
-      <q-header>
-        <q-toolbar>
+  <q-layout v-if="ready" view="lHh Lpr lFf">
+    <q-header>
+      <q-toolbar>
+        <q-btn
+          v-if="!miniState"
+          flat
+          dense
+          round
+          aria-label="Menu"
+          icon="i-mdi-menu"
+          @click="toggleLeftDrawer()"
+        >
+        </q-btn>
+        <slot name="header-toolbar" />
+      </q-toolbar>
+    </q-header>
+
+    <q-drawer
+      ref="drawerRef"
+      :model-value="leftDrawerOpen"
+      :width="drawerWidth"
+      :mini-width="80"
+      :mini="miniState"
+      show-if-above
+      bordered
+      @hide="onDrawerHide"
+      @update:model-value="toggleLeftDrawer"
+      @mouseleave="debouncedToggleMiniState(true)"
+    >
+      <template #mini>
+        <div
+          :class="{
+            column: true,
+            'items-center': miniState,
+            'pr-0': true
+          }"
+        >
           <q-btn
-            v-if="!miniState"
             flat
             dense
             round
             aria-label="Menu"
             icon="i-mdi-menu"
+            class="q-mb-md"
             @click="toggleLeftDrawer()"
           >
           </q-btn>
-          <slot name="header-toolbar" />
-        </q-toolbar>
-      </q-header>
-
-      <q-drawer
-        ref="drawerRef"
-        :model-value="leftDrawerOpen"
-        :width="drawerWidth"
-        :mini-width="80"
-        :mini="miniState"
-        show-if-above
-        bordered
-        @hide="onDrawerHide"
-        @update:model-value="toggleLeftDrawer"
-        @mouseleave="debouncedToggleMiniState(true)"
-      >
-        <template #mini>
-          <div
-            :class="{
-              column: true,
-              'items-center': miniState,
-              'pr-0': true
-            }"
-          >
-            <q-btn
-              flat
-              dense
-              round
-              aria-label="Menu"
-              icon="i-mdi-menu"
-              class="q-mb-md"
-              @click="toggleLeftDrawer()"
-            >
-            </q-btn>
-            <div id="fabs" class="q-mb-md min-h-56px">
-              <slot name="fabs" :show-sticky="false" />
-            </div>
-
-            <slot name="drawer-mini-navigation" />
+          <div id="fabs" class="q-mb-md min-h-56px">
+            <slot name="fabs" :show-sticky="false" />
           </div>
-        </template>
-        <slot name="drawer" />
-      </q-drawer>
-
-      <q-footer class="h-80px lt-md">
-        <slot name="footer" />
-      </q-footer>
-
-      <q-page-container>
-        <router-view />
-        <slot name="fabs" :show-sticky="true" />
-      </q-page-container>
-    </div>
+
+          <slot name="drawer-mini-navigation" />
+        </div>
+      </template>
+      <slot name="drawer" />
+    </q-drawer>
+
+    <q-footer class="h-80px lt-md">
+      <slot name="footer" />
+    </q-footer>
+
+    <q-page-container>
+      <router-view />
+      <slot name="fabs" :show-sticky="true" />
+    </q-page-container>
   </q-layout>
 </template>
 

package/src/ui/md3/NavigationRailFabs.vue

@@ -7,7 +7,11 @@
         'gt-sm': true,
         animated: !!seekAttention,
         'animated-tada': !!seekAttention,
-        'animated-infinite': !!seekAttention
+        'animated-infinite': !!seekAttention,
+        '!bg-$light-primary-container': true,
+        'dark:!bg-$dark-primary-container': true,
+        'text-$on-light-primary-container': true,
+        'dark:text-$on-dark-primary-container': true
       }"
       fab
       :icon="addIcon"
@@ -21,7 +25,11 @@
         'gt-sm': true,
         animated: !!seekAttention,
         'animated-tada': !!seekAttention,
-        'animated-infinite': !!seekAttention
+        'animated-infinite': !!seekAttention,
+        '!bg-$light-primary-container': true,
+        'dark:!bg-$dark-primary-container': true,
+        'text-$on-light-primary-container': true,
+        'dark:text-$on-dark-primary-container': true
       }"
       fab
       :icon="editIcon"