@anzusystems/common-admin 1.49.0 → 2.0.0-rc.1

package/dist/domains/ui/components/ARow.vue.d.ts

@@ -0,0 +1,24 @@
+type __VLS_Props = {
+    title?: string;
+    value?: string | number | undefined | null;
+    dataCy?: string | undefined;
+    titleClass?: string | undefined;
+};
+declare var __VLS_13: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_13) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    value: string | number | null;
+    title: string;
+    dataCy: string;
+    titleClass: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/domains/ui/components/ARow.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,28 @@
+import { createBlock as e, createCommentVNode as t, createElementBlock as n, createElementVNode as r, createVNode as i, defineComponent as a, normalizeClass as o, openBlock as s, renderSlot as c, toDisplayString as l, withCtx as u } from "vue";
+import { VCol as d, VRow as f } from "vuetify/components/VGrid";
+//#region src/domains/ui/components/ARow.vue?vue&type=script&setup=true&lang.ts
+var p = { class: "text-high-emphasis" }, m = /*@__PURE__*/ a({
+	__name: "ARow",
+	props: {
+		title: { default: "" },
+		value: { default: "" },
+		dataCy: { default: void 0 },
+		titleClass: { default: "font-weight-bold text-label-large" }
+	},
+	setup(a) {
+		return (m, h) => (s(), e(f, { "data-cy": a.dataCy }, {
+			default: u(() => [i(d, null, {
+				default: u(() => [a.title.length ? (s(), n("h4", {
+					key: 0,
+					class: o(a.titleClass)
+				}, l(a.title), 3)) : t("", !0), c(m.$slots, "default", {}, () => [r("span", p, l(a.value), 1)])]),
+				_: 3
+			})]),
+			_: 3
+		}, 8, ["data-cy"]));
+	}
+});
+//#endregion
+export { m as default };
+
+//# sourceMappingURL=ARow.vue_vue_type_script_setup_true_lang.js.map

package/dist/domains/ui/components/ARow.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ARow.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","_component_VRow","_withCtx","_createVNode","_component_VCol","_createElementBlock","_normalizeClass","_toDisplayString","_createCommentVNode","_renderSlot","_createElementVNode","_hoisted_1","ARow_vue_vue_type_script_setup_true_lang_default","openBlock","createBlock","VRow","__props","withCtx","createVNode","VCol","createElementBlock","normalizeClass","toDisplayString","createCommentVNode","renderSlot","_ctx","createElementVNode"],"sources":["../../../../src/domains/ui/components/ARow.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nwithDefaults(\n  defineProps<{\n    title?: string\n    value?: string | number | undefined | null\n    dataCy?: string | undefined\n    titleClass?: string | undefined\n  }>(),\n  {\n    title: '',\n    value: '',\n    dataCy: undefined,\n    titleClass: 'font-weight-bold text-label-large',\n  }\n)\n</script>\n\n<template>\n  <VRow :data-cy=\"dataCy\">\n    <VCol>\n      <h4\n        v-if=\"title.length\"\n        :class=\"titleClass\"\n      >\n        {{ title }}\n      </h4>\n      <slot>\n        <span class=\"text-high-emphasis\">{{ value }}</span>\n      </slot>\n    </VCol>\n  </VRow>\n</template>\n"],"mappings":";;;;;;;;;;;;E,kBAkBEA,EAAA,GAAAC,EAYOC,GAAA,EAZA,WAASe,EAAA,OAAM,GAAA;GACpB,SAAAd,QAUO,CAVPC,EAUOC,GAAA,MAAA;IATL,SAAAF,QAKK,CAJGc,EAAA,MAAM,UADdjB,EAAA,GAAAM,EAKK,MAAA;;KAHF,OAAKC,EAAEU,EAAA,UAAU;IAEf,GAAAT,EAAAS,EAAA,KAAK,GAAA,CAAA,K,WAEVP,EAEOgB,EAAA,QAAA,WAAA,CAAA,SAAA,CADLf,EAAmD,QAAnDC,GAAmDJ,EAAfS,EAAA,KAAK,GAAA,CAAA,C"}

package/dist/domains/ui/components/ATimeTrackingFields.js

@@ -0,0 +1,7 @@
+import e from "./ATimeTrackingFields.vue_vue_type_script_setup_true_lang.js";
+//#region src/domains/ui/components/ATimeTrackingFields.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=ATimeTrackingFields.js.map

package/dist/domains/ui/components/ATimeTrackingFields.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ATimeTrackingFields.js","names":["_sfc_main","ATimeTrackingFields_vue_vue_type_script_setup_true_lang_default","ATimeTrackingFields_default"],"sources":["../../../../src/domains/ui/components/ATimeTrackingFields.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n// Deprecated: `AUserAndTimeTrackingFields` without `users` draws the dates (dropping a row that has\n// none, where this one keeps the title), and with an admin's user cache\n// (`createUserAndTimeTrackingFields`) also who. Kept for the admins that still use it.\nimport { computed } from 'vue'\nimport { useI18n } from 'vue-i18n'\nimport type { AnzuUserAndTimeTrackingAware } from '@/shared/types/AnzuUserAndTimeTrackingAware'\nimport { dateTimePretty } from '@/shared/utils/datetime'\nimport ARow from '@/domains/ui/components/ARow.vue'\n\nconst props = withDefaults(\n  defineProps<{\n    data: AnzuUserAndTimeTrackingAware | any\n    hideCreatedAt?: boolean\n    hideModifiedAt?: boolean\n  }>(),\n  {\n    hideCreatedAt: false,\n    hideModifiedAt: false,\n  }\n)\n\nconst createdAt = computed(() => {\n  return dateTimePretty(props.data.createdAt)\n})\nconst modifiedAt = computed(() => {\n  return dateTimePretty(props.data.modifiedAt)\n})\n\nconst { t } = useI18n()\n</script>\n\n<template>\n  <ARow :title=\"t('common.model.tracking.created')\">\n    <div class=\"d-flex align-center\">\n      <div\n        v-if=\"!hideCreatedAt\"\n        class=\"mr-2\"\n      >\n        {{ createdAt }}\n      </div>\n    </div>\n  </ARow>\n  <ARow :title=\"t('common.model.tracking.modified')\">\n    <div class=\"d-flex align-center\">\n      <div\n        v-if=\"!hideModifiedAt\"\n        class=\"mr-2\"\n      >\n        {{ modifiedAt }}\n      </div>\n    </div>\n  </ARow>\n</template>\n"],"mappings":""}

package/dist/domains/ui/components/ATimeTrackingFields.vue.d.ts

@@ -0,0 +1,12 @@
+import { AnzuUserAndTimeTrackingAware } from '../../../shared/types/AnzuUserAndTimeTrackingAware';
+type __VLS_Props = {
+    data: AnzuUserAndTimeTrackingAware | any;
+    hideCreatedAt?: boolean;
+    hideModifiedAt?: boolean;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    hideCreatedAt: boolean;
+    hideModifiedAt: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/domains/ui/components/ATimeTrackingFields.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,39 @@
+import e from "./ARow.js";
+import { dateTimePretty as t } from "../../../shared/utils/datetime.js";
+import { Fragment as n, computed as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createVNode as s, defineComponent as c, openBlock as l, toDisplayString as u, unref as d, withCtx as f } from "vue";
+import { useI18n as p } from "vue-i18n";
+//#region src/domains/ui/components/ATimeTrackingFields.vue?vue&type=script&setup=true&lang.ts
+var m = { class: "d-flex align-center" }, h = {
+	key: 0,
+	class: "mr-2"
+}, g = { class: "d-flex align-center" }, _ = {
+	key: 0,
+	class: "mr-2"
+}, v = /*@__PURE__*/ c({
+	__name: "ATimeTrackingFields",
+	props: {
+		data: {},
+		hideCreatedAt: {
+			type: Boolean,
+			default: !1
+		},
+		hideModifiedAt: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	setup(c) {
+		let v = c, y = r(() => t(v.data.createdAt)), b = r(() => t(v.data.modifiedAt)), { t: x } = p();
+		return (t, r) => (l(), a(n, null, [s(e, { title: d(x)("common.model.tracking.created") }, {
+			default: f(() => [o("div", m, [c.hideCreatedAt ? i("", !0) : (l(), a("div", h, u(y.value), 1))])]),
+			_: 1
+		}, 8, ["title"]), s(e, { title: d(x)("common.model.tracking.modified") }, {
+			default: f(() => [o("div", g, [c.hideModifiedAt ? i("", !0) : (l(), a("div", _, u(b.value), 1))])]),
+			_: 1
+		}, 8, ["title"])], 64));
+	}
+});
+//#endregion
+export { v as default };
+
+//# sourceMappingURL=ATimeTrackingFields.vue_vue_type_script_setup_true_lang.js.map

package/dist/domains/ui/components/ATimeTrackingFields.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ATimeTrackingFields.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_Fragment","_createVNode","ARow","_unref","_withCtx","_createElementVNode","_toDisplayString","_createCommentVNode","ARow_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","ATimeTrackingFields_vue_vue_type_script_setup_true_lang_default","props","__props","createdAt","computed","dateTimePretty","modifiedAt","useI18n","openBlock","createElementBlock","Fragment","createVNode","unref","t","withCtx","createElementVNode","createCommentVNode","toDisplayString"],"sources":["../../../../src/domains/ui/components/ATimeTrackingFields.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n// Deprecated: `AUserAndTimeTrackingFields` without `users` draws the dates (dropping a row that has\n// none, where this one keeps the title), and with an admin's user cache\n// (`createUserAndTimeTrackingFields`) also who. Kept for the admins that still use it.\nimport { computed } from 'vue'\nimport { useI18n } from 'vue-i18n'\nimport type { AnzuUserAndTimeTrackingAware } from '@/shared/types/AnzuUserAndTimeTrackingAware'\nimport { dateTimePretty } from '@/shared/utils/datetime'\nimport ARow from '@/domains/ui/components/ARow.vue'\n\nconst props = withDefaults(\n  defineProps<{\n    data: AnzuUserAndTimeTrackingAware | any\n    hideCreatedAt?: boolean\n    hideModifiedAt?: boolean\n  }>(),\n  {\n    hideCreatedAt: false,\n    hideModifiedAt: false,\n  }\n)\n\nconst createdAt = computed(() => {\n  return dateTimePretty(props.data.createdAt)\n})\nconst modifiedAt = computed(() => {\n  return dateTimePretty(props.data.modifiedAt)\n})\n\nconst { t } = useI18n()\n</script>\n\n<template>\n  <ARow :title=\"t('common.model.tracking.created')\">\n    <div class=\"d-flex align-center\">\n      <div\n        v-if=\"!hideCreatedAt\"\n        class=\"mr-2\"\n      >\n        {{ createdAt }}\n      </div>\n    </div>\n  </ARow>\n  <ARow :title=\"t('common.model.tracking.modified')\">\n    <div class=\"d-flex align-center\">\n      <div\n        v-if=\"!hideModifiedAt\"\n        class=\"mr-2\"\n      >\n        {{ modifiedAt }}\n      </div>\n    </div>\n  </ARow>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;EAUA,IAAMgB,IAAQC,GAYRC,IAAYC,QACTC,EAAeJ,EAAM,KAAK,SAAS,CAC3C,GACKK,IAAaF,QACVC,EAAeJ,EAAM,KAAK,UAAU,CAC5C,GAEK,EAAE,SAAMM,EAAQ;E,mCAIpBnB,EASOC,GAAA,EATA,OAAOC,EAAAuB,CAAA,CAAC,CAAA,+BAAA,E;GACb,SAAAtB,QAOM,CAPNC,EAOM,OAPNI,GAOM,CALKM,EAAA,gB,aADTjB,EAAA,GAAAC,EAKM,OALNW,GAKMJ,EADDU,EAAA,KAAS,GAAA,CAAA,E;;E,kBAIlBf,EASOC,GAAA,EATA,OAAOC,EAAAuB,CAAA,CAAC,CAAA,gCAAA,E;GACb,SAAAtB,QAOM,CAPNC,EAOM,OAPNM,GAOM,CALKI,EAAA,iB,aADTjB,EAAA,GAAAC,EAKM,OALNa,GAKMN,EADDa,EAAA,KAAU,GAAA,CAAA,E"}

package/dist/domains/ui/components/AUserAndTimeTrackingFields.js

@@ -0,0 +1,7 @@
+import e from "./AUserAndTimeTrackingFields.vue_vue_type_script_setup_true_lang.js";
+//#region src/domains/ui/components/AUserAndTimeTrackingFields.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=AUserAndTimeTrackingFields.js.map

package/dist/domains/ui/components/AUserAndTimeTrackingFields.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AUserAndTimeTrackingFields.js","names":["_sfc_main","AUserAndTimeTrackingFields_vue_vue_type_script_setup_true_lang_default","AUserAndTimeTrackingFields_default"],"sources":["../../../../src/domains/ui/components/AUserAndTimeTrackingFields.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed, useSlots, watch } from 'vue'\nimport { useI18n } from 'vue-i18n'\nimport ARow from '@/domains/ui/components/ARow.vue'\nimport ADatetime from '@/domains/ui/datetime/components/ADatetime.vue'\nimport ACachedUserChip from '@/domains/cached/components/ACachedUserChip.vue'\nimport type { UserAndTimeTrackingData, UserAndTimeTrackingUsers } from '@/shared/types/UserAndTimeTracking'\nimport type { CachedItem } from '@/domains/cached/composables/defineCached'\nimport type { IntegerId } from '@/shared/types/common'\nimport { isNull, isUndefined } from '@/shared/utils/common'\n\n/**\n * Created and modified -- when and by whom -- for a detail or an edit form.\n *\n * An admin does not use it directly but through its own component made by\n * `createUserAndTimeTrackingFields`, which supplies its user cache and the route to a user's detail.\n * Without `users` it draws the dates only, as it always has.\n */\nconst props = withDefaults(\n  defineProps<{\n    data: UserAndTimeTrackingData\n    users?: UserAndTimeTrackingUsers | undefined\n    userRouteName?: string | undefined\n    userExternalUrlTemplate?: string | undefined\n    // `any`: an admin's label reads its own user (a nickname), which `AnzuUserMinimal` does not have.\n    userTitleFn?: ((user: CachedItem<any>) => string) | undefined\n    hideCreatedAt?: boolean\n    hideModifiedAt?: boolean\n    hideCreatedBy?: boolean\n    hideModifiedBy?: boolean\n  }>(),\n  {\n    users: undefined,\n    userRouteName: undefined,\n    userExternalUrlTemplate: undefined,\n    userTitleFn: undefined,\n    hideCreatedAt: false,\n    hideModifiedAt: false,\n    hideCreatedBy: false,\n    hideModifiedBy: false,\n  }\n)\n\ndefineSlots<{\n  /** The user part of a row, for an admin that draws its own chip. */\n  user?: (props: { id: IntegerId | null; field: 'createdBy' | 'modifiedBy' }) => unknown\n}>()\n\nconst { t } = useI18n()\nconst slots = useSlots()\n\nconst hasDate = (value: string | null | undefined) => !isUndefined(value) && !isNull(value) && value !== ''\n\n// `undefined` is a field the backend does not send (no user tracking), so it is left out; `null` is\n// a field it sends empty, and the chip shows it as such.\nconst userShown = (hidden: boolean, id: IntegerId | null | undefined) =>\n  !hidden && !isUndefined(id) && (!!props.users || !!slots.user)\n\nconst createdAtShown = computed(() => !props.hideCreatedAt && hasDate(props.data.createdAt))\nconst modifiedAtShown = computed(() => !props.hideModifiedAt && hasDate(props.data.modifiedAt))\nconst createdByShown = computed(() => userShown(props.hideCreatedBy, props.data.createdBy))\nconst modifiedByShown = computed(() => userShown(props.hideModifiedBy, props.data.modifiedBy))\n\n// The rows ask for their users themselves: the detail and edit actions that load a record do not put\n// its users into the cache, and a save changes `modifiedBy`. Read off `props.data` on every run,\n// because a store replaces the record whole after a fetch or a save. `defineCached` debounces, so the\n// rows of one page share a request with every other chip on it.\nwatch(\n  [\n    () => props.data.createdBy,\n    () => props.data.modifiedBy,\n    () => props.hideCreatedBy,\n    () => props.hideModifiedBy,\n    () => props.users,\n  ],\n  ([createdBy, modifiedBy, hideCreatedBy, hideModifiedBy, users]) => {\n    if (!users) return\n    const ids = [hideCreatedBy ? null : createdBy, hideModifiedBy ? null : modifiedBy].filter(\n      (id): id is IntegerId => !!id\n    )\n    if (ids.length === 0) return\n    users.addToCachedUsers(ids)\n    users.fetchCachedUsers()\n  },\n  { immediate: true }\n)\n</script>\n\n<template>\n  <ARow\n    v-if=\"createdAtShown || createdByShown\"\n    :title=\"t('common.model.tracking.created')\"\n  >\n    <div class=\"d-flex flex-wrap align-center gc-2 gr-1\">\n      <ADatetime\n        v-if=\"createdAtShown\"\n        :date-time=\"data.createdAt ?? null\"\n      />\n      <slot\n        v-if=\"createdByShown\"\n        :id=\"data.createdBy || null\"\n        name=\"user\"\n        field=\"createdBy\"\n      >\n        <ACachedUserChip\n          v-if=\"users\"\n          :id=\"data.createdBy\"\n          :get-cached-fn=\"users.getCachedUser\"\n          :route-name=\"userRouteName\"\n          :external-url-template=\"userExternalUrlTemplate\"\n          :title-fn=\"userTitleFn\"\n        />\n      </slot>\n    </div>\n  </ARow>\n  <ARow\n    v-if=\"modifiedAtShown || modifiedByShown\"\n    :title=\"t('common.model.tracking.modified')\"\n  >\n    <div class=\"d-flex flex-wrap align-center gc-2 gr-1\">\n      <ADatetime\n        v-if=\"modifiedAtShown\"\n        :date-time=\"data.modifiedAt ?? null\"\n      />\n      <slot\n        v-if=\"modifiedByShown\"\n        :id=\"data.modifiedBy || null\"\n        name=\"user\"\n        field=\"modifiedBy\"\n      >\n        <ACachedUserChip\n          v-if=\"users\"\n          :id=\"data.modifiedBy\"\n          :get-cached-fn=\"users.getCachedUser\"\n          :route-name=\"userRouteName\"\n          :external-url-template=\"userExternalUrlTemplate\"\n          :title-fn=\"userTitleFn\"\n        />\n      </slot>\n    </div>\n  </ARow>\n</template>\n"],"mappings":""}

package/dist/domains/ui/components/AUserAndTimeTrackingFields.vue.d.ts

@@ -0,0 +1,46 @@
+import { UserAndTimeTrackingData, UserAndTimeTrackingUsers } from '../../../shared/types/UserAndTimeTracking';
+import { CachedItem } from '../../cached/composables/defineCached';
+import { IntegerId } from '../../../shared/types/common';
+/**
+ * Created and modified -- when and by whom -- for a detail or an edit form.
+ *
+ * An admin does not use it directly but through its own component made by
+ * `createUserAndTimeTrackingFields`, which supplies its user cache and the route to a user's detail.
+ * Without `users` it draws the dates only, as it always has.
+ */
+type __VLS_Props = {
+    data: UserAndTimeTrackingData;
+    users?: UserAndTimeTrackingUsers | undefined;
+    userRouteName?: string | undefined;
+    userExternalUrlTemplate?: string | undefined;
+    userTitleFn?: ((user: CachedItem<any>) => string) | undefined;
+    hideCreatedAt?: boolean;
+    hideModifiedAt?: boolean;
+    hideCreatedBy?: boolean;
+    hideModifiedBy?: boolean;
+};
+type __VLS_Slots = {
+    /** The user part of a row, for an admin that draws its own chip. */
+    user?: (props: {
+        id: IntegerId | null;
+        field: 'createdBy' | 'modifiedBy';
+    }) => unknown;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    users: UserAndTimeTrackingUsers<import('../../../lib').AnzuUserMinimal>;
+    hideCreatedAt: boolean;
+    hideModifiedAt: boolean;
+    userRouteName: string;
+    userExternalUrlTemplate: string;
+    userTitleFn: (user: CachedItem<any>) => string;
+    hideCreatedBy: boolean;
+    hideModifiedBy: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/domains/ui/components/AUserAndTimeTrackingFields.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,104 @@
+import e from "./ARow.js";
+import { isNull as t, isUndefined as n } from "../../../shared/utils/common.js";
+import r from "../datetime/components/ADatetime.js";
+import i from "../../cached/components/ACachedUserChip.js";
+import { Fragment as a, computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, defineComponent as d, openBlock as f, renderSlot as p, unref as m, useSlots as h, watch as g, withCtx as _ } from "vue";
+import { useI18n as v } from "vue-i18n";
+//#region src/domains/ui/components/AUserAndTimeTrackingFields.vue?vue&type=script&setup=true&lang.ts
+var y = { class: "d-flex flex-wrap align-center gc-2 gr-1" }, b = { class: "d-flex flex-wrap align-center gc-2 gr-1" }, x = /*@__PURE__*/ d({
+	__name: "AUserAndTimeTrackingFields",
+	props: {
+		data: {},
+		users: { default: void 0 },
+		userRouteName: { default: void 0 },
+		userExternalUrlTemplate: { default: void 0 },
+		userTitleFn: {
+			type: Function,
+			default: void 0
+		},
+		hideCreatedAt: {
+			type: Boolean,
+			default: !1
+		},
+		hideModifiedAt: {
+			type: Boolean,
+			default: !1
+		},
+		hideCreatedBy: {
+			type: Boolean,
+			default: !1
+		},
+		hideModifiedBy: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	setup(d) {
+		let x = d, { t: S } = v(), C = h(), w = (e) => !n(e) && !t(e) && e !== "", T = (e, t) => !e && !n(t) && (!!x.users || !!C.user), E = o(() => !x.hideCreatedAt && w(x.data.createdAt)), D = o(() => !x.hideModifiedAt && w(x.data.modifiedAt)), O = o(() => T(x.hideCreatedBy, x.data.createdBy)), k = o(() => T(x.hideModifiedBy, x.data.modifiedBy));
+		return g([
+			() => x.data.createdBy,
+			() => x.data.modifiedBy,
+			() => x.hideCreatedBy,
+			() => x.hideModifiedBy,
+			() => x.users
+		], ([e, t, n, r, i]) => {
+			if (!i) return;
+			let a = [n ? null : e, r ? null : t].filter((e) => !!e);
+			a.length !== 0 && (i.addToCachedUsers(a), i.fetchCachedUsers());
+		}, { immediate: !0 }), (t, n) => (f(), l(a, null, [E.value || O.value ? (f(), s(e, {
+			key: 0,
+			title: m(S)("common.model.tracking.created")
+		}, {
+			default: _(() => [u("div", y, [E.value ? (f(), s(r, {
+				key: 0,
+				"date-time": d.data.createdAt ?? null
+			}, null, 8, ["date-time"])) : c("", !0), O.value ? p(t.$slots, "user", {
+				id: d.data.createdBy || null,
+				field: "createdBy"
+			}, () => [d.users ? (f(), s(i, {
+				key: 0,
+				id: d.data.createdBy,
+				"get-cached-fn": d.users.getCachedUser,
+				"route-name": d.userRouteName,
+				"external-url-template": d.userExternalUrlTemplate,
+				"title-fn": d.userTitleFn
+			}, null, 8, [
+				"id",
+				"get-cached-fn",
+				"route-name",
+				"external-url-template",
+				"title-fn"
+			])) : c("", !0)], void 0, 1) : c("", !0)])]),
+			_: 3
+		}, 8, ["title"])) : c("", !0), D.value || k.value ? (f(), s(e, {
+			key: 1,
+			title: m(S)("common.model.tracking.modified")
+		}, {
+			default: _(() => [u("div", b, [D.value ? (f(), s(r, {
+				key: 0,
+				"date-time": d.data.modifiedAt ?? null
+			}, null, 8, ["date-time"])) : c("", !0), k.value ? p(t.$slots, "user", {
+				id: d.data.modifiedBy || null,
+				field: "modifiedBy"
+			}, () => [d.users ? (f(), s(i, {
+				key: 0,
+				id: d.data.modifiedBy,
+				"get-cached-fn": d.users.getCachedUser,
+				"route-name": d.userRouteName,
+				"external-url-template": d.userExternalUrlTemplate,
+				"title-fn": d.userTitleFn
+			}, null, 8, [
+				"id",
+				"get-cached-fn",
+				"route-name",
+				"external-url-template",
+				"title-fn"
+			])) : c("", !0)], void 0, 1) : c("", !0)])]),
+			_: 3
+		}, 8, ["title"])) : c("", !0)], 64));
+	}
+});
+//#endregion
+export { x as default };
+
+//# sourceMappingURL=AUserAndTimeTrackingFields.vue_vue_type_script_setup_true_lang.js.map

package/dist/domains/ui/components/AUserAndTimeTrackingFields.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AUserAndTimeTrackingFields.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_Fragment","_createBlock","ARow","_unref","_withCtx","_createElementVNode","ADatetime","_createCommentVNode","_renderSlot","ACachedUserChip","ARow_default","ADatetime_default","ACachedUserChip_default","_hoisted_1","_hoisted_2","AUserAndTimeTrackingFields_vue_vue_type_script_setup_true_lang_default","props","__props","useI18n","slots","useSlots","hasDate","isUndefined","value","isNull","userShown","hidden","id","createdAtShown","computed","modifiedAtShown","createdByShown","modifiedByShown","watch","createdBy","modifiedBy","hideCreatedBy","hideModifiedBy","users","ids","openBlock","createElementBlock","Fragment","createBlock","unref","t","withCtx","createElementVNode","createCommentVNode","renderSlot","_ctx"],"sources":["../../../../src/domains/ui/components/AUserAndTimeTrackingFields.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed, useSlots, watch } from 'vue'\nimport { useI18n } from 'vue-i18n'\nimport ARow from '@/domains/ui/components/ARow.vue'\nimport ADatetime from '@/domains/ui/datetime/components/ADatetime.vue'\nimport ACachedUserChip from '@/domains/cached/components/ACachedUserChip.vue'\nimport type { UserAndTimeTrackingData, UserAndTimeTrackingUsers } from '@/shared/types/UserAndTimeTracking'\nimport type { CachedItem } from '@/domains/cached/composables/defineCached'\nimport type { IntegerId } from '@/shared/types/common'\nimport { isNull, isUndefined } from '@/shared/utils/common'\n\n/**\n * Created and modified -- when and by whom -- for a detail or an edit form.\n *\n * An admin does not use it directly but through its own component made by\n * `createUserAndTimeTrackingFields`, which supplies its user cache and the route to a user's detail.\n * Without `users` it draws the dates only, as it always has.\n */\nconst props = withDefaults(\n  defineProps<{\n    data: UserAndTimeTrackingData\n    users?: UserAndTimeTrackingUsers | undefined\n    userRouteName?: string | undefined\n    userExternalUrlTemplate?: string | undefined\n    // `any`: an admin's label reads its own user (a nickname), which `AnzuUserMinimal` does not have.\n    userTitleFn?: ((user: CachedItem<any>) => string) | undefined\n    hideCreatedAt?: boolean\n    hideModifiedAt?: boolean\n    hideCreatedBy?: boolean\n    hideModifiedBy?: boolean\n  }>(),\n  {\n    users: undefined,\n    userRouteName: undefined,\n    userExternalUrlTemplate: undefined,\n    userTitleFn: undefined,\n    hideCreatedAt: false,\n    hideModifiedAt: false,\n    hideCreatedBy: false,\n    hideModifiedBy: false,\n  }\n)\n\ndefineSlots<{\n  /** The user part of a row, for an admin that draws its own chip. */\n  user?: (props: { id: IntegerId | null; field: 'createdBy' | 'modifiedBy' }) => unknown\n}>()\n\nconst { t } = useI18n()\nconst slots = useSlots()\n\nconst hasDate = (value: string | null | undefined) => !isUndefined(value) && !isNull(value) && value !== ''\n\n// `undefined` is a field the backend does not send (no user tracking), so it is left out; `null` is\n// a field it sends empty, and the chip shows it as such.\nconst userShown = (hidden: boolean, id: IntegerId | null | undefined) =>\n  !hidden && !isUndefined(id) && (!!props.users || !!slots.user)\n\nconst createdAtShown = computed(() => !props.hideCreatedAt && hasDate(props.data.createdAt))\nconst modifiedAtShown = computed(() => !props.hideModifiedAt && hasDate(props.data.modifiedAt))\nconst createdByShown = computed(() => userShown(props.hideCreatedBy, props.data.createdBy))\nconst modifiedByShown = computed(() => userShown(props.hideModifiedBy, props.data.modifiedBy))\n\n// The rows ask for their users themselves: the detail and edit actions that load a record do not put\n// its users into the cache, and a save changes `modifiedBy`. Read off `props.data` on every run,\n// because a store replaces the record whole after a fetch or a save. `defineCached` debounces, so the\n// rows of one page share a request with every other chip on it.\nwatch(\n  [\n    () => props.data.createdBy,\n    () => props.data.modifiedBy,\n    () => props.hideCreatedBy,\n    () => props.hideModifiedBy,\n    () => props.users,\n  ],\n  ([createdBy, modifiedBy, hideCreatedBy, hideModifiedBy, users]) => {\n    if (!users) return\n    const ids = [hideCreatedBy ? null : createdBy, hideModifiedBy ? null : modifiedBy].filter(\n      (id): id is IntegerId => !!id\n    )\n    if (ids.length === 0) return\n    users.addToCachedUsers(ids)\n    users.fetchCachedUsers()\n  },\n  { immediate: true }\n)\n</script>\n\n<template>\n  <ARow\n    v-if=\"createdAtShown || createdByShown\"\n    :title=\"t('common.model.tracking.created')\"\n  >\n    <div class=\"d-flex flex-wrap align-center gc-2 gr-1\">\n      <ADatetime\n        v-if=\"createdAtShown\"\n        :date-time=\"data.createdAt ?? null\"\n      />\n      <slot\n        v-if=\"createdByShown\"\n        :id=\"data.createdBy || null\"\n        name=\"user\"\n        field=\"createdBy\"\n      >\n        <ACachedUserChip\n          v-if=\"users\"\n          :id=\"data.createdBy\"\n          :get-cached-fn=\"users.getCachedUser\"\n          :route-name=\"userRouteName\"\n          :external-url-template=\"userExternalUrlTemplate\"\n          :title-fn=\"userTitleFn\"\n        />\n      </slot>\n    </div>\n  </ARow>\n  <ARow\n    v-if=\"modifiedAtShown || modifiedByShown\"\n    :title=\"t('common.model.tracking.modified')\"\n  >\n    <div class=\"d-flex flex-wrap align-center gc-2 gr-1\">\n      <ADatetime\n        v-if=\"modifiedAtShown\"\n        :date-time=\"data.modifiedAt ?? null\"\n      />\n      <slot\n        v-if=\"modifiedByShown\"\n        :id=\"data.modifiedBy || null\"\n        name=\"user\"\n        field=\"modifiedBy\"\n      >\n        <ACachedUserChip\n          v-if=\"users\"\n          :id=\"data.modifiedBy\"\n          :get-cached-fn=\"users.getCachedUser\"\n          :route-name=\"userRouteName\"\n          :external-url-template=\"userExternalUrlTemplate\"\n          :title-fn=\"userTitleFn\"\n        />\n      </slot>\n    </div>\n  </ARow>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkBA,IAAMkB,IAAQC,GA8BR,EAAE,SAAMC,EAAQ,GAChBC,IAAQC,EAAS,GAEjBC,KAAW,MAAqC,CAACC,EAAYC,CAAK,KAAK,CAACC,EAAOD,CAAK,KAAKA,MAAU,IAInGE,KAAa,GAAiB,MAClC,CAACC,KAAU,CAACJ,EAAYK,CAAE,MAAM,CAAC,CAACX,EAAM,SAAS,CAAC,CAACG,EAAM,OAErDS,IAAiBC,QAAe,CAACb,EAAM,iBAAiBK,EAAQL,EAAM,KAAK,SAAS,CAAC,GACrFc,IAAkBD,QAAe,CAACb,EAAM,kBAAkBK,EAAQL,EAAM,KAAK,UAAU,CAAC,GACxFe,IAAiBF,QAAeJ,EAAUT,EAAM,eAAeA,EAAM,KAAK,SAAS,CAAC,GACpFgB,IAAkBH,QAAeJ,EAAUT,EAAM,gBAAgBA,EAAM,KAAK,UAAU,CAAC;E,OAM7FiB,EACE;SACQjB,EAAM,KAAK;SACXA,EAAM,KAAK;SACXA,EAAM;SACNA,EAAM;SACNA,EAAM;EACd,IACC,CAACkB,GAAWC,GAAYC,GAAeC,GAAgBC,OAAW;GACjE,IAAI,CAACA,GAAO;GACZ,IAAMC,IAAM,CAACH,IAAgB,OAAOF,GAAWG,IAAiB,OAAOF,CAAU,CAAC,CAAC,QAChF,MAAwB,CAAC,CAACR,CAC7B;GACA,AAAIY,EAAI,WAAW,MACnBD,EAAM,iBAAiBC,CAAG,GAC1BD,EAAM,iBAAiB;EACzB,GACA,EAAE,WAAW,GAAK,CACpB,I,2BAKUV,EAAA,SAAkBG,EAAA,SAD1BjC,EAAA,GAAAG,EAyBOC,GAAA;;GAvBJ,OAAOC,EAAA0C,CAAA,CAAC,CAAA,+BAAA;;GAET,SAAAzC,QAoBM,CApBNC,EAoBM,OApBNQ,GAoBM,CAlBIe,EAAA,SADR9B,EAAA,GAAAG,EAGEK,GAAA;;IADC,aAAWW,EAAA,KAAK,aAAS;G,yCAGpBc,EAAA,QADRvB,EAcO0C,EAAA,QAAA,QAAA;IAZJ,IAAIjC,EAAA,KAAK,aAAS;IAEnB,OAAM;GAJR,SAcO,CAPGA,EAAA,SADRnB,EAAA,GAAAG,EAOEQ,GAAA;;IALC,IAAIQ,EAAA,KAAK;IACT,iBAAeA,EAAA,MAAM;IACrB,cAAYA,EAAA;IACZ,yBAAuBA,EAAA;IACvB,YAAUA,EAAA;;;;;;;;;E,+BAMXa,EAAA,SAAmBE,EAAA,SAD3BlC,EAAA,GAAAG,EAyBOC,GAAA;;GAvBJ,OAAOC,EAAA0C,CAAA,CAAC,CAAA,gCAAA;;GAET,SAAAzC,QAoBM,CApBNC,EAoBM,OApBNS,GAoBM,CAlBIgB,EAAA,SADRhC,EAAA,GAAAG,EAGEK,GAAA;;IADC,aAAWW,EAAA,KAAK,cAAU;G,yCAGrBe,EAAA,QADRxB,EAcO0C,EAAA,QAAA,QAAA;IAZJ,IAAIjC,EAAA,KAAK,cAAU;IAEpB,OAAM;GAJR,SAcO,CAPGA,EAAA,SADRnB,EAAA,GAAAG,EAOEQ,GAAA;;IALC,IAAIQ,EAAA,KAAK;IACT,iBAAeA,EAAA,MAAM;IACrB,cAAYA,EAAA;IACZ,yBAAuBA,EAAA;IACvB,YAAUA,EAAA"}

package/dist/domains/ui/datetime/components/ADatetime.js

@@ -0,0 +1,7 @@
+import e from "./ADatetime.vue_vue_type_script_setup_true_lang.js";
+//#region src/domains/ui/datetime/components/ADatetime.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=ADatetime.js.map

package/dist/domains/ui/datetime/components/ADatetime.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ADatetime.js","names":["_sfc_main","ADatetime_vue_vue_type_script_setup_true_lang_default","ADatetime_default"],"sources":["../../../../../src/domains/ui/datetime/components/ADatetime.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed } from 'vue'\nimport { dateTimePretty } from '@/shared/utils/datetime'\nimport type { DatetimeUTCNullable } from '@/shared/types/common'\n\nconst props = withDefaults(\n  defineProps<{\n    dateTime: DatetimeUTCNullable\n    edgeDateValue?: string\n  }>(),\n  {\n    edgeDateValue: 'n/a',\n  }\n)\n\nconst pretty = computed(() => {\n  return dateTimePretty(props.dateTime, props.edgeDateValue)\n})\n</script>\n\n<template>\n  {{ pretty }}\n</template>\n"],"mappings":""}

package/dist/domains/ui/datetime/components/ADatetime.vue.d.ts

@@ -0,0 +1,10 @@
+import { DatetimeUTCNullable } from '../../../../shared/types/common';
+type __VLS_Props = {
+    dateTime: DatetimeUTCNullable;
+    edgeDateValue?: string;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    edgeDateValue: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/domains/ui/datetime/components/ADatetime.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,18 @@
+import { dateTimePretty as e } from "../../../../shared/utils/datetime.js";
+import { computed as t, defineComponent as n, toDisplayString as r } from "vue";
+//#region src/domains/ui/datetime/components/ADatetime.vue?vue&type=script&setup=true&lang.ts
+var i = /*@__PURE__*/ n({
+	__name: "ADatetime",
+	props: {
+		dateTime: {},
+		edgeDateValue: { default: "n/a" }
+	},
+	setup(n) {
+		let i = n, a = t(() => e(i.dateTime, i.edgeDateValue));
+		return (e, t) => r(a.value);
+	}
+});
+//#endregion
+export { i as default };
+
+//# sourceMappingURL=ADatetime.vue_vue_type_script_setup_true_lang.js.map

package/dist/domains/ui/datetime/components/ADatetime.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ADatetime.vue_vue_type_script_setup_true_lang.js","names":["_toDisplayString","ADatetime_vue_vue_type_script_setup_true_lang_default","props","__props","pretty","computed","dateTimePretty","toDisplayString"],"sources":["../../../../../src/domains/ui/datetime/components/ADatetime.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed } from 'vue'\nimport { dateTimePretty } from '@/shared/utils/datetime'\nimport type { DatetimeUTCNullable } from '@/shared/types/common'\n\nconst props = withDefaults(\n  defineProps<{\n    dateTime: DatetimeUTCNullable\n    edgeDateValue?: string\n  }>(),\n  {\n    edgeDateValue: 'n/a',\n  }\n)\n\nconst pretty = computed(() => {\n  return dateTimePretty(props.dateTime, props.edgeDateValue)\n})\n</script>\n\n<template>\n  {{ pretty }}\n</template>\n"],"mappings":";;;;;;;;;;EAKA,IAAME,IAAQC,GAURC,IAASC,QACNC,EAAeJ,EAAM,UAAUA,EAAM,aAAa,CAC1D;E,iBAIIF,EAAAI,EAAA,KAAM"}

package/dist/domains/ui/datetime/components/ADatetimePicker.js

@@ -0,0 +1,9 @@
+import e from "../../../../_virtual/_plugin-vue_export-helper.js";
+import t from "./ADatetimePicker.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                                                */
+//#region src/domains/ui/datetime/components/ADatetimePicker.vue
+var n = /*#__PURE__*/ e(t, [["__scopeId", "data-v-9c0882ba"]]);
+//#endregion
+export { n as default };
+
+//# sourceMappingURL=ADatetimePicker.js.map

package/dist/domains/ui/datetime/components/ADatetimePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ADatetimePicker.js","names":["_sfc_main","_plugin_vue_export_helper_default","ADatetimePicker_vue_vue_type_script_setup_true_lang_default","ADatetimePicker_default"],"sources":["../../../../../src/domains/ui/datetime/components/ADatetimePicker.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { DatetimeUTC } from '@/shared/types/common'\nimport { computed, nextTick, ref, toRaw, useTemplateRef, watch } from 'vue'\nimport { isDefined, isNull, isUndefined } from '@/shared/utils/common'\nimport useVuelidate, { type ErrorObject } from '@vuelidate/core'\nimport { useValidate } from '@/shared/validators/vuelidate/useValidate'\nimport TimePicker from '@/domains/ui/datetime/components/TimePicker.vue'\nimport type { Dayjs } from 'dayjs'\nimport {\n  applyCalendarDate,\n  type DatetimePickerType,\n  emptyBaseValue,\n  formatDisplay,\n  isSameValue,\n  parseModel,\n  parseTyped,\n  placeholderFor,\n  serialize,\n  toCalendarDate,\n  todayValue,\n} from '@/shared/utils/datetimePickerValue'\nimport { useI18n } from 'vue-i18n'\nimport type { VTextField } from 'vuetify/components/VTextField'\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue: DatetimeUTC | null | undefined\n    type?: DatetimePickerType\n    label?: string\n    hideLabel?: boolean\n    clearable?: boolean\n    disabled?: boolean\n    hideDetails?: boolean\n    required?: boolean\n    hideSetToNow?: boolean\n    placeholder?: string\n    dataCy?: string\n    defaultValue?: DatetimeUTC | null | undefined\n    errorMessages?: string[]\n    lastMinuteMoment?: boolean\n    readonly?: boolean\n  }>(),\n  {\n    type: 'datetime',\n    label: '',\n    hideLabel: false,\n    clearable: false,\n    disabled: false,\n    hideDetails: false,\n    required: false,\n    hideSetToNow: false,\n    placeholder: '',\n    dataCy: '',\n    defaultValue: null,\n    errorMessages: undefined,\n    lastMinuteMoment: false,\n    // Not set, the text field follows a readonly `VForm` around it; the calendar and clearing follow only this prop.\n    readonly: undefined,\n  }\n)\n\nconst emit = defineEmits<{\n  (e: 'blur'): void\n  (e: 'focus'): void\n  (e: 'update:modelValue', data: DatetimeUTC | null | undefined): void\n  (e: 'open'): void\n  (e: 'close'): void\n  (e: 'afterClear'): void\n}>()\n\nconst pickerOpened = ref(false)\nconst pickerKey = ref(0)\nconst timeKey = ref(0)\nconst timePickerInstance = useTemplateRef<InstanceType<typeof TimePicker>>('timePickerInstance')\nconst inputInstance = useTemplateRef<InstanceType<typeof VTextField>>('inputInstance')\nconst confirmRefButton = useTemplateRef<HTMLButtonElement>('confirmRefButton')\nconst textFieldValue = ref('')\n\nconst datePickerValue = ref<null | Date>(null)\nconst timePickerValue = ref<null | { hours: number; minutes: number }>(null)\nconst datetimeInternal = ref<null | Dayjs>(null)\n\nconst { t } = useI18n()\n\nconst placeholderComputed = computed(() => {\n  return props.placeholder.length ? props.placeholder : placeholderFor(props.type)\n})\n\nconst { requiredIf } = useValidate()\nconst rules = computed(() => {\n  return {\n    textFieldValue: {\n      required: requiredIf(props.required),\n    },\n  }\n})\nconst v$ = useVuelidate(rules, { textFieldValue })\n\nconst tryEmitNewValue = (newValue: DatetimeUTC | null | undefined) => {\n  if (newValue === props.modelValue) return\n  emit('update:modelValue', newValue)\n}\n\nconst updateDateAndTimePickerOnlyWhenChanged = (newValue: Dayjs | null) => {\n  if (isNull(newValue)) return\n  if (\n    props.type !== 'date' &&\n    (isNull(timePickerValue.value) ||\n      newValue.hour() !== timePickerValue.value.hours ||\n      newValue.minute() !== timePickerValue.value.minutes)\n  ) {\n    timePickerValue.value = { hours: newValue.hour(), minutes: newValue.minute() }\n  }\n  if (\n    isNull(datePickerValue.value) ||\n    newValue.year() !== datePickerValue.value.getFullYear() ||\n    newValue.month() !== datePickerValue.value.getMonth() ||\n    newValue.date() !== datePickerValue.value.getDate()\n  ) {\n    datePickerValue.value = toCalendarDate(newValue, props.type)\n  }\n}\n\nwatch(\n  () => props.modelValue,\n  (newValue, oldValue) => {\n    if (newValue === oldValue) return\n    datetimeInternal.value = parseModel(newValue, props.type, props.lastMinuteMoment)\n  },\n  { immediate: true }\n)\n\nconst watchDatePicker = (newValue: null | Date, internal: Dayjs) => {\n  if (isNull(newValue)) return internal\n  return applyCalendarDate(internal, newValue, props.type)\n}\n\nconst watchTimePicker = (newValue: null | { hours: number; minutes: number }, internal: Dayjs) => {\n  if (isNull(newValue) || props.type === 'date') return internal\n  return internal.set('hour', newValue.hours).set('minute', newValue.minutes)\n}\n\nwatch([timePickerValue, datePickerValue], ([newTimePickerValue, newDatePickerValue]) => {\n  let newDate: Dayjs | null = null\n\n  if (!isNull(datetimeInternal.value)) {\n    newDate = datetimeInternal.value\n  } else {\n    newDate =\n      parseModel(props.modelValue, props.type, props.lastMinuteMoment) ??\n      emptyBaseValue(props.type, props.lastMinuteMoment)\n  }\n\n  newDate = watchTimePicker(newTimePickerValue, newDate!)\n  newDate = watchDatePicker(newDatePickerValue, newDate!)\n  if (newDate.isSame(toRaw(datetimeInternal.value))) return\n  datetimeInternal.value = newDate\n})\n\nwatch(\n  datetimeInternal,\n  (newValue) => {\n    if (isNull(newValue)) {\n      textFieldValue.value = ''\n      tryEmitNewValue(null)\n      return\n    }\n    const newUtcValue = serialize(newValue, props.type)\n    textFieldValue.value = formatDisplay(newValue, props.type)\n    updateDateAndTimePickerOnlyWhenChanged(newValue)\n    tryEmitNewValue(newUtcValue)\n  },\n  { immediate: true }\n)\n\nwatch(pickerOpened, (newValue) => {\n  if (newValue) {\n    onTextFieldBlur()\n    if (isNull(datetimeInternal.value) && (isNull(props.defaultValue) || isUndefined(props.defaultValue))) {\n      datetimeInternal.value = todayValue(props.type, props.lastMinuteMoment)\n    }\n    emit('open')\n    return\n  }\n  emit('close')\n})\n\nconst errorMessageComputed = computed(() => {\n  if (isDefined(props.errorMessages)) return props.errorMessages\n  if (v$.value.textFieldValue.$errors.length)\n    return [v$.value.textFieldValue.$errors.map((item: ErrorObject) => item.$message).join(' ')]\n  return []\n})\n\nconst onTextFieldBlur = () => {\n  const filtered = textFieldValue.value.replace(/[^\\s\\d.:]/g, '').trim()\n  if (filtered.length === 0 && !props.required) {\n    datetimeInternal.value = parseModel(props.defaultValue, props.type, props.lastMinuteMoment)\n    emit('blur')\n    return\n  }\n  // keep seconds from original model\n  const seconds = parseModel(props.modelValue, props.type, props.lastMinuteMoment)?.second() ?? 0\n  const reparsed = parseTyped(filtered, props.type, seconds)\n  if (!isNull(reparsed)) {\n    // A day click blurs this field before the picker emits, so re-assigning an unchanged datetime\n    // would push the stale date back into it.\n    if (isSameValue(reparsed, toRaw(datetimeInternal.value), props.type)) {\n      textFieldValue.value = formatDisplay(reparsed, props.type)\n    } else {\n      datetimeInternal.value = reparsed\n    }\n    v$.value.textFieldValue.$touch()\n    emit('blur')\n    return\n  }\n  if (!isNull(datetimeInternal.value)) {\n    textFieldValue.value = formatDisplay(datetimeInternal.value, props.type)\n  }\n  v$.value.textFieldValue.$touch()\n  emit('blur')\n}\n\nconst onClear = () => {\n  if (isNull(props.defaultValue) || isUndefined(props.defaultValue)) {\n    datetimeInternal.value = null\n    datePickerValue.value = null\n    timePickerValue.value = null\n    emit('afterClear')\n    return\n  }\n  datetimeInternal.value = parseModel(props.defaultValue, props.type, props.lastMinuteMoment)\n  emit('afterClear')\n}\n\nconst close = () => {\n  pickerOpened.value = false\n  inputInstance.value?.focus()\n  inputInstance.value?.blur()\n  emit('close')\n  emit('blur')\n}\n\nconst onTextFieldFocus = () => {\n  emit('focus')\n}\n\n// The calendar icon is a button: Enter and Space open and close the calendar as a click does. Its menu takes only the\n// arrows from the keyboard. The keyup of that Enter stays on the icon: the Enter of the field would report it left a\n// second time.\nconst togglePicker = () => {\n  pickerOpened.value = !pickerOpened.value\n}\n\nconst onTimePickerEnterKeyup = () => {\n  pickerOpened.value = false\n}\n\nconst onFocusConfirm = () => {\n  confirmRefButton.value?.focus()\n}\n\nconst onDatePickerUpdate = () => {\n  if (props.type === 'date') {\n    // The value travels through pre-flush watchers, so closing now would emit blur and release the\n    // collab lock with the previous value still in the model.\n    nextTick(close)\n    return\n  }\n  timePickerInstance.value?.focusHour()\n}\n\nconst now = () => {\n  datetimeInternal.value = todayValue(props.type, props.lastMinuteMoment)\n  nextTick(() => {\n    // Vuetify navigates the calendar to a new value on its own, but skips an unchanged day, so a\n    // value that is already today would leave the user on whatever month they paged to.\n    pickerKey.value++\n    timeKey.value++\n  })\n}\n</script>\n\n<template>\n  <VTextField\n    ref=\"inputInstance\"\n    v-model=\"textFieldValue\"\n    :error-messages=\"errorMessageComputed\"\n    :persistent-placeholder=\"true\"\n    :placeholder=\"placeholderComputed\"\n    class=\"a-datetime-picker\"\n    :hide-details=\"hideDetails ? true : 'auto'\"\n    :data-cy=\"dataCy.length ? dataCy : undefined\"\n    :disabled=\"disabled\"\n    :readonly=\"readonly\"\n    autocomplete=\"off\"\n    @blur=\"onTextFieldBlur\"\n    @focus=\"onTextFieldFocus\"\n    @keyup.enter=\"onTextFieldBlur\"\n  >\n    <template #append-inner>\n      <VIcon\n        v-if=\"clearable && !readonly && defaultValue !== modelValue\"\n        class=\"a-datetime-picker__clearable-icon\"\n        icon=\"mdi-close-circle\"\n        :aria-label=\"t('common.button.clear')\"\n        @click.stop=\"onClear\"\n      />\n      <VMenu\n        v-if=\"!disabled && !readonly\"\n        location=\"bottom end\"\n        origin=\"top end\"\n        :close-on-content-click=\"false\"\n        :model-value=\"pickerOpened\"\n        @update:model-value=\"(value: boolean) => (pickerOpened = value)\"\n      >\n        <template #activator=\"{ props: menuProps }\">\n          <VIcon\n            class=\"a-datetime-picker__calendar-icon\"\n            icon=\"mdi-calendar\"\n            size=\"small\"\n            :aria-label=\"t('$vuetify.datePicker.title')\"\n            v-bind=\"menuProps\"\n            @keydown.enter.space.prevent=\"togglePicker\"\n            @keyup.enter.stop\n          />\n        </template>\n\n        <VCard v-if=\"pickerOpened\">\n          <VBtn\n            v-tooltip=\"t('common.button.close')\"\n            :aria-label=\"t('common.button.close')\"\n            icon\n            variant=\"text\"\n            :width=\"36\"\n            :height=\"36\"\n            class=\"position-absolute top-0 right-0\"\n            @click.stop=\"close\"\n          >\n            <VIcon\n              icon=\"mdi-close\"\n              color=\"white\"\n            />\n          </VBtn>\n          <VDatePicker\n            :key=\"pickerKey\"\n            v-model=\"datePickerValue\"\n            class=\"a-datetime-picker-calendar\"\n            color=\"primary\"\n            show-adjacent-months\n            v-bind=\"$attrs\"\n            @update:model-value=\"onDatePickerUpdate\"\n          />\n          <TimePicker\n            v-if=\"type !== 'date'\"\n            ref=\"timePickerInstance\"\n            :key=\"timeKey\"\n            v-model=\"timePickerValue\"\n            @enter-keyup=\"onTimePickerEnterKeyup\"\n            @focus-confirm=\"onFocusConfirm\"\n          />\n          <div class=\"d-flex\">\n            <button\n              v-if=\"!hideSetToNow\"\n              type=\"button\"\n              class=\"a-datetime-picker__bottom-button\"\n              tabindex=\"8\"\n              @click=\"now\"\n            >\n              {{ type === 'date' ? t('common.time.today') : t('common.time.now') }}\n            </button>\n            <button\n              ref=\"confirmRefButton\"\n              type=\"button\"\n              class=\"a-datetime-picker__bottom-button\"\n              tabindex=\"7\"\n              @click.stop=\"close\"\n            >\n              {{ t('common.button.confirm') }}\n            </button>\n          </div>\n        </VCard>\n      </VMenu>\n\n      <div class=\"ml-1\">\n        <slot name=\"append-inner\" />\n      </div>\n    </template>\n    <template\n      v-if=\"!hideLabel\"\n      #label\n    >\n      {{ label\n      }}<span\n        v-if=\"required\"\n        class=\"a-required-mark\"\n      />\n    </template>\n  </VTextField>\n</template>\n\n<style lang=\"scss\" scoped>\n.a-datetime-picker {\n  :deep(.v-field__append-inner .v-icon) {\n    cursor: pointer;\n  }\n\n  &__calendar-icon {\n    margin-top: 2px;\n    opacity: 0.6 !important;\n  }\n\n  &__clearable-icon {\n    opacity: 0 !important;\n  }\n\n  &:hover {\n    .a-datetime-picker__clearable-icon {\n      opacity: 0.6 !important;\n    }\n  }\n\n  &__bottom-button {\n    width: 100%;\n    text-align: center;\n    font-size: 0.86rem;\n    font-family: Roboto, sans-serif;\n    font-weight: bold;\n    line-height: 1.8;\n    padding: 6px 0;\n\n    &:hover {\n      background-color: rgb(0 0 0 / 5%);\n    }\n  }\n}\n\n.a-datetime-picker-calendar {\n  :deep(.v-picker-title) {\n    display: none;\n  }\n\n  :deep(.v-date-picker-header) {\n    padding-top: 12px;\n  }\n\n  :deep(.v-date-picker-month) {\n    padding-bottom: 2px;\n  }\n}\n</style>\n"],"mappings":""}

package/dist/domains/ui/datetime/components/ADatetimePicker.vue.d.ts

@@ -0,0 +1,61 @@
+import { DatetimeUTC } from '../../../../shared/types/common';
+import { DatetimePickerType } from '../../../../shared/utils/datetimePickerValue';
+type __VLS_Props = {
+    modelValue: DatetimeUTC | null | undefined;
+    type?: DatetimePickerType;
+    label?: string;
+    hideLabel?: boolean;
+    clearable?: boolean;
+    disabled?: boolean;
+    hideDetails?: boolean;
+    required?: boolean;
+    hideSetToNow?: boolean;
+    placeholder?: string;
+    dataCy?: string;
+    defaultValue?: DatetimeUTC | null | undefined;
+    errorMessages?: string[];
+    lastMinuteMoment?: boolean;
+    readonly?: boolean;
+};
+declare var __VLS_70: {};
+type __VLS_Slots = {} & {
+    'append-inner'?: (props: typeof __VLS_70) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    close: () => any;
+    open: () => any;
+    "update:modelValue": (data: string | null | undefined) => any;
+    blur: () => any;
+    focus: () => any;
+    afterClear: () => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: (() => any) | undefined;
+    onOpen?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((data: string | null | undefined) => any) | undefined;
+    onBlur?: (() => any) | undefined;
+    onFocus?: (() => any) | undefined;
+    onAfterClear?: (() => any) | undefined;
+}>, {
+    disabled: boolean;
+    type: DatetimePickerType;
+    label: string;
+    required: boolean;
+    placeholder: string;
+    dataCy: string;
+    clearable: boolean;
+    hideLabel: boolean;
+    readonly: boolean;
+    errorMessages: string[];
+    hideDetails: boolean;
+    defaultValue: string | null;
+    hideSetToNow: boolean;
+    lastMinuteMoment: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};