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

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

@@ -1 +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"}
+{"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 edit form.\n * Admins use it through their own component from `createUserAndTimeTrackingFields`, which\n * supplies the user cache and user detail route. Without `users` it draws only the dates.\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),\n// so it is hidden. `null` is sent empty, and the chip shows it as empty.\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 fetch their users themselves. Record loads do not fill the cache, and a save changes `modifiedBy`.\n// Reads `props.data` on every run because a store replaces the whole record after\n// a fetch or save. `defineCached` debounces, so chips on a page share one request.\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgBA,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,OAK7FiB,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

@@ -1,7 +1,6 @@
 import e from "./ADatetime.vue_vue_type_script_setup_true_lang.js";
-//#region src/domains/ui/datetime/components/ADatetime.vue
+// 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.vue_vue_type_script_setup_true_lang.js

@@ -1,6 +1,6 @@
 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
+// src/domains/ui/datetime/components/ADatetime.vue?vue&type=script&setup=true&lang.ts
 var i = /*@__PURE__*/ n({
 	__name: "ADatetime",
 	props: {
@@ -12,7 +12,6 @@ var i = /*@__PURE__*/ n({
 		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/ADatetimePicker.js

@@ -1,9 +1,8 @@
-import e from "../../../../_virtual/_plugin-vue_export-helper.js";
-import t from "./ADatetimePicker.vue_vue_type_script_setup_true_lang.js";
+import e 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
+import t from "../../../../_virtual/_plugin-vue_export-helper.js";
+// src/domains/ui/datetime/components/ADatetimePicker.vue
+var n = /*#__PURE__*/ t(e, [["__scopeId", "data-v-ec08a2a8"]]);
 export { n as default };
 
 //# sourceMappingURL=ADatetimePicker.js.map

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

@@ -1 +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":""}
+{"version":3,"file":"ADatetimePicker.js","names":["_sfc_main","ADatetimePicker_vue_vue_type_script_setup_true_lang_default","_plugin_vue_export_helper_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    // When unset, 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  // Keeps the seconds from the 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 toggle the calendar like a click. Its menu takes only the arrow keys.\n// The keyup of that Enter stays on the icon. Otherwise the field's Enter handler would report leaving a 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

@@ -17,10 +17,12 @@ type __VLS_Props = {
     lastMinuteMoment?: boolean;
     readonly?: boolean;
 };
-declare var __VLS_70: {};
-type __VLS_Slots = {} & {
-    'append-inner'?: (props: typeof __VLS_70) => any;
+declare const __VLS_template: () => {
+    __VLS_Slots: {
+        'append-inner'?: (props: {}) => any;
+    };
 };
+type __VLS_Slots = ReturnType<typeof __VLS_template>['__VLS_Slots'];
 declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
     close: () => any;
     open: () => any;

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

@@ -12,7 +12,7 @@ import { VBtn as de } from "vuetify/components/VBtn";
 import { VMenu as fe } from "vuetify/components/VMenu";
 import pe from "@vuelidate/core";
 import { VDatePicker as me } from "vuetify/components/VDatePicker";
-//#region src/domains/ui/datetime/components/ADatetimePicker.vue?vue&type=script&setup=true&lang.ts
+// src/domains/ui/datetime/components/ADatetimePicker.vue?vue&type=script&setup=true&lang.ts
 var M = { class: "d-flex" }, N = { class: "ml-1" }, P = {
 	key: 0,
 	class: "a-required-mark"
@@ -82,7 +82,7 @@ var M = { class: "d-flex" }, N = { class: "ml-1" }, P = {
 		let ye = (e, n) => t(e) ? n : i(n, e, I.type), be = (e, n) => t(e) || I.type === "date" ? n : n.set("hour", e.hours).set("minute", e.minutes);
 		D([K, G], ([e, n]) => {
 			let r = null;
-			r = t(q.value) ? o(I.modelValue, I.type, I.lastMinuteMoment) ?? te(I.type, I.lastMinuteMoment) : q.value, r = be(e, r), r = ye(n, r), !r.isSame(w(q.value)) && (q.value = r);
+			r = t(q.value) ? o(I.modelValue, I.type, I.lastMinuteMoment) ?? te(I.type, I.lastMinuteMoment) : q.value, r = be(e, r), r = ye(n, r), r.isSame(w(q.value)) || (q.value = r);
 		}), D(q, (e) => {
 			if (t(e)) {
 				W.value = "", X(null);
@@ -234,7 +234,6 @@ var M = { class: "d-flex" }, N = { class: "ml-1" }, P = {
 		]));
 	}
 });
-//#endregion
 export { F as default };
 
 //# sourceMappingURL=ADatetimePicker.vue_vue_type_script_setup_true_lang.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ADatetimePicker.vue_vue_type_script_setup_true_lang.js","names":["$attrs","_openBlock","_createBlock","_component_VTextField","_withKeys","_createSlots","_withCtx","_component_VIcon","_unref","_withModifiers","_createCommentVNode","_component_VMenu","_createVNode","_mergeProps","_component_VCard","_withDirectives","_component_VBtn","_directive_tooltip","_component_VDatePicker","TimePicker","_createElementVNode","_createElementBlock","_toDisplayString","_renderSlot","_createTextVNode","TimePicker_default","useVuelidate","_hoisted_1","_hoisted_2","_hoisted_3","ADatetimePicker_vue_vue_type_script_setup_true_lang_default","__emit","props","__props","emit","pickerOpened","ref","pickerKey","timeKey","timePickerInstance","useTemplateRef","inputInstance","confirmRefButton","textFieldValue","datePickerValue","timePickerValue","datetimeInternal","useI18n","placeholderComputed","computed","placeholderFor","useValidate","rules","requiredIf","v$","tryEmitNewValue","newValue","updateDateAndTimePickerOnlyWhenChanged","isNull","toCalendarDate","oldValue","parseModel","watchDatePicker","internal","applyCalendarDate","watchTimePicker","watch","newTimePickerValue","newDatePickerValue","newDate","emptyBaseValue","toRaw","newUtcValue","serialize","formatDisplay","onTextFieldBlur","isUndefined","todayValue","errorMessageComputed","isDefined","item","filtered","seconds","reparsed","parseTyped","isSameValue","onClear","close","onTextFieldFocus","togglePicker","onTimePickerEnterKeyup","onFocusConfirm","onDatePickerUpdate","nextTick","now","openBlock","createBlock","VTextField","_cache","$event","withKeys","createSlots","withCtx","VIcon","unref","t","withModifiers","createCommentVNode","VMenu","value","menuProps","createVNode","mergeProps","VCard","withDirectives","VBtn","Tooltip","VDatePicker","_ctx","createElementVNode","createElementBlock","toDisplayString","renderSlot","createTextVNode"],"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":"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"}
+{"version":3,"file":"ADatetimePicker.vue_vue_type_script_setup_true_lang.js","names":["$attrs","_openBlock","_createBlock","_component_VTextField","_withKeys","_createSlots","_withCtx","_component_VIcon","_unref","_withModifiers","_createCommentVNode","_component_VMenu","_createVNode","_mergeProps","_component_VCard","_withDirectives","_component_VBtn","_directive_tooltip","_component_VDatePicker","TimePicker","_createElementVNode","_createElementBlock","_toDisplayString","_renderSlot","_createTextVNode","TimePicker_default","useVuelidate","_hoisted_1","_hoisted_2","_hoisted_3","ADatetimePicker_vue_vue_type_script_setup_true_lang_default","__emit","props","__props","emit","pickerOpened","ref","pickerKey","timeKey","timePickerInstance","useTemplateRef","inputInstance","confirmRefButton","textFieldValue","datePickerValue","timePickerValue","datetimeInternal","useI18n","placeholderComputed","computed","placeholderFor","useValidate","rules","requiredIf","v$","tryEmitNewValue","newValue","updateDateAndTimePickerOnlyWhenChanged","isNull","toCalendarDate","oldValue","parseModel","watchDatePicker","internal","applyCalendarDate","watchTimePicker","watch","newTimePickerValue","newDatePickerValue","newDate","emptyBaseValue","toRaw","newUtcValue","serialize","formatDisplay","onTextFieldBlur","isUndefined","todayValue","errorMessageComputed","isDefined","item","filtered","seconds","reparsed","parseTyped","isSameValue","onClear","close","onTextFieldFocus","togglePicker","onTimePickerEnterKeyup","onFocusConfirm","onDatePickerUpdate","nextTick","now","openBlock","createBlock","VTextField","_cache","$event","withKeys","createSlots","withCtx","VIcon","unref","t","withModifiers","createCommentVNode","VMenu","value","menuProps","createVNode","mergeProps","VCard","withDirectives","VBtn","Tooltip","VDatePicker","_ctx","createElementVNode","createElementBlock","toDisplayString","renderSlot","createTextVNode"],"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    // When unset, 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  // Keeps the seconds from the 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 toggle the calendar like a click. Its menu takes only the arrow keys.\n// The keyup of that Enter stays on the icon. Otherwise the field's Enter handler would report leaving a 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":"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"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"TimePicker.js","names":["_sfc_main","_plugin_vue_export_helper_default","TimePicker_vue_vue_type_script_setup_true_lang_default","TimePicker_default"],"sources":["../../../../../src/domains/ui/datetime/components/TimePicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { nextTick, ref, useTemplateRef, watch, computed } from 'vue'\nimport { useI18n } from 'vue-i18n'\n\nconst emit = defineEmits<{\n  (e: 'enterKeyup'): void\n  (e: 'focusConfirm'): void\n}>()\n\nconst modelValue = defineModel<null | { hours: number; minutes: number }>('modelValue', {\n  required: true,\n})\n\nconst hours = ref<string | undefined>(\n  // eslint-disable-next-line vue/no-ref-object-reactivity-loss\n  modelValue.value ? String(modelValue.value.hours).padStart(2, '0') : '12'\n)\nconst minutes = ref<string | undefined>(\n  // eslint-disable-next-line vue/no-ref-object-reactivity-loss\n  modelValue.value ? String(modelValue.value.minutes).padStart(2, '0') : '00'\n)\n\nconst hoursRefInput = useTemplateRef<HTMLInputElement>('hoursRefInput')\nconst minutesRefInput = useTemplateRef<HTMLInputElement>('minutesRefInput')\n\nconst hoursComputed = computed({\n  get: () => hours.value,\n  set: (value: string | number) => {\n    let cleanValue = String(value).replace(/[^0-9]/g, '')\n\n    if (cleanValue && parseInt(cleanValue) > 23) {\n      hours.value = '23'\n      nextTick(() => minutesRefInput.value?.focus())\n      return\n    }\n\n    if (cleanValue.length > 2) {\n      cleanValue = cleanValue.slice(0, 2)\n    }\n\n    hours.value = cleanValue\n\n    if (cleanValue.length === 2) {\n      nextTick(() => minutesRefInput.value?.focus())\n    }\n  },\n})\n\nconst minutesComputed = computed({\n  get: () => minutes.value,\n  set: (value: string | number) => {\n    let cleanValue = String(value).replace(/[^0-9]/g, '')\n\n    if (cleanValue && parseInt(cleanValue) > 59) {\n      minutes.value = '59'\n      emit('focusConfirm')\n      return\n    }\n\n    if (cleanValue.length > 2) {\n      cleanValue = cleanValue.slice(0, 2)\n    }\n\n    minutes.value = cleanValue\n\n    if (cleanValue.length === 2) {\n      emit('focusConfirm')\n    }\n  },\n})\n\nconst selectContent = async (event: FocusEvent) => {\n  const target = event.target as HTMLInputElement | null\n  await nextTick()\n  target?.select()\n}\n\nconst onBlurHours = () => {\n  const parsedHours = parseInt(hours.value || '0')\n  hours.value = parsedHours >= 0 && parsedHours <= 23 ? String(parsedHours).padStart(2, '0') : '00'\n}\n\nconst onBlurMinutes = () => {\n  const parsedMinutes = parseInt(minutes.value || '0')\n  minutes.value = parsedMinutes >= 0 && parsedMinutes <= 59 ? String(parsedMinutes).padStart(2, '0') : '00'\n}\n\nconst onEnterHoursKeyup = () => {\n  onBlurHours()\n  emit('enterKeyup')\n}\n\nconst onEnterMinutesKeyup = () => {\n  onBlurMinutes()\n  emit('enterKeyup')\n}\n\nconst increaseHours = () => {\n  const parsedHours = parseInt(hours.value || '0')\n  const newHours = isNaN(parsedHours) ? 1 : (parsedHours + 1) % 24\n  hours.value = String(newHours).padStart(2, '0')\n}\n\nconst decreaseHours = () => {\n  const parsedHours = parseInt(hours.value || '0')\n  const newHours = isNaN(parsedHours) ? 23 : (parsedHours - 1 + 24) % 24\n  hours.value = String(newHours).padStart(2, '0')\n}\n\nconst increaseMinutes = () => {\n  const parsedMinutes = parseInt(minutes.value || '0')\n  const parsedHours = parseInt(hours.value || '0')\n\n  if (isNaN(parsedMinutes)) {\n    minutes.value = '01'\n    return\n  }\n\n  if (parsedMinutes === 59) {\n    minutes.value = '00'\n    const newHours = isNaN(parsedHours) ? 1 : (parsedHours + 1) % 24\n    hours.value = String(newHours).padStart(2, '0')\n  } else {\n    const newMinutes = parsedMinutes + 1\n    minutes.value = String(newMinutes).padStart(2, '0')\n  }\n}\n\nconst decreaseMinutes = () => {\n  const parsedMinutes = parseInt(minutes.value || '0')\n  const parsedHours = parseInt(hours.value || '0')\n\n  if (isNaN(parsedMinutes)) {\n    minutes.value = '59'\n    return\n  }\n\n  if (parsedMinutes === 0) {\n    minutes.value = '59'\n    const newHours = isNaN(parsedHours) ? 23 : (parsedHours - 1 + 24) % 24\n    hours.value = String(newHours).padStart(2, '0')\n  } else {\n    const newMinutes = parsedMinutes - 1\n    minutes.value = String(newMinutes).padStart(2, '0')\n  }\n}\n\nconst focusHour = () => {\n  hoursRefInput.value?.focus()\n}\n\nwatch([hours, minutes], ([newHours, newMinutes], [oldHours, oldMinutes]) => {\n  if (newHours === oldHours && newMinutes === oldMinutes) return\n  const hoursInt = parseInt(newHours ?? (modelValue.value ? modelValue.value.hours.toString() : '12'))\n  const minutesInt = parseInt(newMinutes ?? (modelValue.value ? modelValue.value.minutes.toString() : '0'))\n  if (hoursInt >= 0 && hoursInt <= 23 && minutesInt >= 0 && minutesInt <= 59) {\n    modelValue.value = { hours: hoursInt, minutes: minutesInt }\n  }\n})\n\ndefineExpose({\n  focusHour,\n})\n\nconst { t } = useI18n()\n</script>\n\n<template>\n  <div class=\"a-datetime-picker-time\">\n    <div class=\"a-datetime-picker-time__item a-datetime-picker-time__item\">\n      <input\n        ref=\"hoursRefInput\"\n        v-model=\"hoursComputed\"\n        class=\"a-datetime-picker-time__input a-datetime-picker-time__input--hours\"\n        type=\"text\"\n        :aria-label=\"t('$vuetify.timePicker.hour')\"\n        tabindex=\"1\"\n        min=\"0\"\n        max=\"23\"\n        @focus=\"selectContent\"\n        @blur=\"onBlurHours\"\n        @keyup.enter=\"onEnterHoursKeyup\"\n      />\n      <div class=\"a-datetime-picker-time__arrows\">\n        <VBtn\n          tabindex=\"-1\"\n          variant=\"text\"\n          class=\"a-datetime-picker-time__arrow-up\"\n          :aria-label=\"t('common.button.increaseHours')\"\n          @click=\"increaseHours\"\n        >\n          <VIcon icon=\"mdi-chevron-up\" />\n        </VBtn>\n        <VBtn\n          tabindex=\"-1\"\n          variant=\"text\"\n          class=\"a-datetime-picker-time__arrow-down\"\n          :aria-label=\"t('common.button.decreaseHours')\"\n          @click=\"decreaseHours\"\n        >\n          <VIcon icon=\"mdi-chevron-down\" />\n        </VBtn>\n      </div>\n    </div>\n    <span class=\"a-datetime-picker-time__separator\">:</span>\n    <div class=\"a-datetime-picker-time__item\">\n      <input\n        ref=\"minutesRefInput\"\n        v-model=\"minutesComputed\"\n        class=\"a-datetime-picker-time__input a-datetime-picker-time__input--minutes\"\n        type=\"text\"\n        :aria-label=\"t('$vuetify.timePicker.minute')\"\n        tabindex=\"2\"\n        min=\"0\"\n        max=\"59\"\n        @focus=\"selectContent\"\n        @blur=\"onBlurMinutes\"\n        @keyup.enter=\"onEnterMinutesKeyup\"\n      />\n      <div class=\"a-datetime-picker-time__arrows\">\n        <VBtn\n          tabindex=\"-1\"\n          variant=\"text\"\n          class=\"a-datetime-picker-time__arrow-up\"\n          :aria-label=\"t('common.button.increaseMinutes')\"\n          @click=\"increaseMinutes\"\n        >\n          <VIcon icon=\"mdi-chevron-up\" />\n        </VBtn>\n        <VBtn\n          tabindex=\"-1\"\n          variant=\"text\"\n          class=\"a-datetime-picker-time__arrow-down\"\n          :aria-label=\"t('common.button.decreaseMinutes')\"\n          @click=\"decreaseMinutes\"\n        >\n          <VIcon icon=\"mdi-chevron-down\" />\n        </VBtn>\n      </div>\n    </div>\n  </div>\n</template>\n\n<style lang=\"scss\" scoped>\n$hover-bg-color: rgb(0 0 0 / 5%);\n\n.a-datetime-picker-time {\n  display: flex;\n\n  &__item {\n    flex-grow: 1;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-height: 40px;\n\n    &:hover {\n      background-color: $hover-bg-color;\n    }\n  }\n\n  &__separator {\n    font-weight: bold;\n    font-size: 1.2rem;\n    text-align: center;\n    font-family: Roboto, sans-serif;\n    min-height: 40px;\n    padding: 0 5px;\n    display: flex;\n    align-items: center;\n  }\n\n  &__arrows {\n    display: flex;\n    flex-direction: column;\n    opacity: 0;\n\n    .v-btn {\n      padding: 0 !important;\n      min-width: 28px !important;\n      width: 28px !important;\n      height: 28px !important;\n    }\n\n    .a-datetime-picker-time__item:hover &,\n    .a-datetime-picker-time__input:focus + &,\n    &:focus-within {\n      opacity: 1;\n    }\n  }\n\n  &__input {\n    width: 100%;\n    max-width: 128px;\n    height: 100%;\n    display: inline-block;\n    background: transparent;\n    /* stylelint-disable-next-line */\n    -webkit-box-shadow: none;\n    box-shadow: none;\n    border: 0;\n    border-radius: 0;\n    text-align: center;\n    margin: 0;\n    padding: 0;\n    line-height: inherit;\n    font-size: 1rem;\n    position: relative;\n    /* stylelint-disable-next-line */\n    -webkit-box-sizing: border-box;\n    box-sizing: border-box;\n    /* stylelint-disable-next-line */\n    -webkit-appearance: textfield;\n    /* stylelint-disable-next-line */\n    -moz-appearance: textfield;\n    appearance: textfield;\n    outline: none;\n\n    &--hours {\n      font-weight: bold;\n    }\n  }\n\n  &__input::-webkit-inner-spin-button,\n  &__input::-webkit-outer-spin-button {\n    /* stylelint-disable-next-line */\n    -webkit-appearance: none;\n    margin: 0;\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"TimePicker.js","names":["_sfc_main","TimePicker_vue_vue_type_script_setup_true_lang_default","_plugin_vue_export_helper_default","TimePicker_default"],"sources":["../../../../../src/domains/ui/datetime/components/TimePicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { nextTick, ref, useTemplateRef, watch, computed } from 'vue'\nimport { useI18n } from 'vue-i18n'\n\nconst emit = defineEmits<{\n  (e: 'enterKeyup'): void\n  (e: 'focusConfirm'): void\n}>()\n\nconst modelValue = defineModel<null | { hours: number; minutes: number }>('modelValue', {\n  required: true,\n})\n\nconst hours = ref<string | undefined>(\n  // eslint-disable-next-line vue/no-ref-object-reactivity-loss\n  modelValue.value ? String(modelValue.value.hours).padStart(2, '0') : '12'\n)\nconst minutes = ref<string | undefined>(\n  // eslint-disable-next-line vue/no-ref-object-reactivity-loss\n  modelValue.value ? String(modelValue.value.minutes).padStart(2, '0') : '00'\n)\n\nconst hoursRefInput = useTemplateRef<HTMLInputElement>('hoursRefInput')\nconst minutesRefInput = useTemplateRef<HTMLInputElement>('minutesRefInput')\n\nconst hoursComputed = computed({\n  get: () => hours.value,\n  set: (value: string | number) => {\n    let cleanValue = String(value).replace(/[^0-9]/g, '')\n\n    if (cleanValue && parseInt(cleanValue) > 23) {\n      hours.value = '23'\n      nextTick(() => minutesRefInput.value?.focus())\n      return\n    }\n\n    if (cleanValue.length > 2) {\n      cleanValue = cleanValue.slice(0, 2)\n    }\n\n    hours.value = cleanValue\n\n    if (cleanValue.length === 2) {\n      nextTick(() => minutesRefInput.value?.focus())\n    }\n  },\n})\n\nconst minutesComputed = computed({\n  get: () => minutes.value,\n  set: (value: string | number) => {\n    let cleanValue = String(value).replace(/[^0-9]/g, '')\n\n    if (cleanValue && parseInt(cleanValue) > 59) {\n      minutes.value = '59'\n      emit('focusConfirm')\n      return\n    }\n\n    if (cleanValue.length > 2) {\n      cleanValue = cleanValue.slice(0, 2)\n    }\n\n    minutes.value = cleanValue\n\n    if (cleanValue.length === 2) {\n      emit('focusConfirm')\n    }\n  },\n})\n\nconst selectContent = async (event: FocusEvent) => {\n  const target = event.target as HTMLInputElement | null\n  await nextTick()\n  target?.select()\n}\n\nconst onBlurHours = () => {\n  const parsedHours = parseInt(hours.value || '0')\n  hours.value = parsedHours >= 0 && parsedHours <= 23 ? String(parsedHours).padStart(2, '0') : '00'\n}\n\nconst onBlurMinutes = () => {\n  const parsedMinutes = parseInt(minutes.value || '0')\n  minutes.value = parsedMinutes >= 0 && parsedMinutes <= 59 ? String(parsedMinutes).padStart(2, '0') : '00'\n}\n\nconst onEnterHoursKeyup = () => {\n  onBlurHours()\n  emit('enterKeyup')\n}\n\nconst onEnterMinutesKeyup = () => {\n  onBlurMinutes()\n  emit('enterKeyup')\n}\n\nconst increaseHours = () => {\n  const parsedHours = parseInt(hours.value || '0')\n  const newHours = isNaN(parsedHours) ? 1 : (parsedHours + 1) % 24\n  hours.value = String(newHours).padStart(2, '0')\n}\n\nconst decreaseHours = () => {\n  const parsedHours = parseInt(hours.value || '0')\n  const newHours = isNaN(parsedHours) ? 23 : (parsedHours - 1 + 24) % 24\n  hours.value = String(newHours).padStart(2, '0')\n}\n\nconst increaseMinutes = () => {\n  const parsedMinutes = parseInt(minutes.value || '0')\n  const parsedHours = parseInt(hours.value || '0')\n\n  if (isNaN(parsedMinutes)) {\n    minutes.value = '01'\n    return\n  }\n\n  if (parsedMinutes === 59) {\n    minutes.value = '00'\n    const newHours = isNaN(parsedHours) ? 1 : (parsedHours + 1) % 24\n    hours.value = String(newHours).padStart(2, '0')\n  } else {\n    const newMinutes = parsedMinutes + 1\n    minutes.value = String(newMinutes).padStart(2, '0')\n  }\n}\n\nconst decreaseMinutes = () => {\n  const parsedMinutes = parseInt(minutes.value || '0')\n  const parsedHours = parseInt(hours.value || '0')\n\n  if (isNaN(parsedMinutes)) {\n    minutes.value = '59'\n    return\n  }\n\n  if (parsedMinutes === 0) {\n    minutes.value = '59'\n    const newHours = isNaN(parsedHours) ? 23 : (parsedHours - 1 + 24) % 24\n    hours.value = String(newHours).padStart(2, '0')\n  } else {\n    const newMinutes = parsedMinutes - 1\n    minutes.value = String(newMinutes).padStart(2, '0')\n  }\n}\n\nconst focusHour = () => {\n  hoursRefInput.value?.focus()\n}\n\nwatch([hours, minutes], ([newHours, newMinutes], [oldHours, oldMinutes]) => {\n  if (newHours === oldHours && newMinutes === oldMinutes) return\n  const hoursInt = parseInt(newHours ?? (modelValue.value ? modelValue.value.hours.toString() : '12'))\n  const minutesInt = parseInt(newMinutes ?? (modelValue.value ? modelValue.value.minutes.toString() : '0'))\n  if (hoursInt >= 0 && hoursInt <= 23 && minutesInt >= 0 && minutesInt <= 59) {\n    modelValue.value = { hours: hoursInt, minutes: minutesInt }\n  }\n})\n\ndefineExpose({\n  focusHour,\n})\n\nconst { t } = useI18n()\n</script>\n\n<template>\n  <div class=\"a-datetime-picker-time\">\n    <div class=\"a-datetime-picker-time__item a-datetime-picker-time__item\">\n      <input\n        ref=\"hoursRefInput\"\n        v-model=\"hoursComputed\"\n        class=\"a-datetime-picker-time__input a-datetime-picker-time__input--hours\"\n        type=\"text\"\n        :aria-label=\"t('$vuetify.timePicker.hour')\"\n        tabindex=\"1\"\n        min=\"0\"\n        max=\"23\"\n        @focus=\"selectContent\"\n        @blur=\"onBlurHours\"\n        @keyup.enter=\"onEnterHoursKeyup\"\n      />\n      <div class=\"a-datetime-picker-time__arrows\">\n        <VBtn\n          tabindex=\"-1\"\n          variant=\"text\"\n          class=\"a-datetime-picker-time__arrow-up\"\n          :aria-label=\"t('common.button.increaseHours')\"\n          @click=\"increaseHours\"\n        >\n          <VIcon icon=\"mdi-chevron-up\" />\n        </VBtn>\n        <VBtn\n          tabindex=\"-1\"\n          variant=\"text\"\n          class=\"a-datetime-picker-time__arrow-down\"\n          :aria-label=\"t('common.button.decreaseHours')\"\n          @click=\"decreaseHours\"\n        >\n          <VIcon icon=\"mdi-chevron-down\" />\n        </VBtn>\n      </div>\n    </div>\n    <span class=\"a-datetime-picker-time__separator\">:</span>\n    <div class=\"a-datetime-picker-time__item\">\n      <input\n        ref=\"minutesRefInput\"\n        v-model=\"minutesComputed\"\n        class=\"a-datetime-picker-time__input a-datetime-picker-time__input--minutes\"\n        type=\"text\"\n        :aria-label=\"t('$vuetify.timePicker.minute')\"\n        tabindex=\"2\"\n        min=\"0\"\n        max=\"59\"\n        @focus=\"selectContent\"\n        @blur=\"onBlurMinutes\"\n        @keyup.enter=\"onEnterMinutesKeyup\"\n      />\n      <div class=\"a-datetime-picker-time__arrows\">\n        <VBtn\n          tabindex=\"-1\"\n          variant=\"text\"\n          class=\"a-datetime-picker-time__arrow-up\"\n          :aria-label=\"t('common.button.increaseMinutes')\"\n          @click=\"increaseMinutes\"\n        >\n          <VIcon icon=\"mdi-chevron-up\" />\n        </VBtn>\n        <VBtn\n          tabindex=\"-1\"\n          variant=\"text\"\n          class=\"a-datetime-picker-time__arrow-down\"\n          :aria-label=\"t('common.button.decreaseMinutes')\"\n          @click=\"decreaseMinutes\"\n        >\n          <VIcon icon=\"mdi-chevron-down\" />\n        </VBtn>\n      </div>\n    </div>\n  </div>\n</template>\n\n<style lang=\"scss\" scoped>\n$hover-bg-color: rgb(0 0 0 / 5%);\n\n.a-datetime-picker-time {\n  display: flex;\n\n  &__item {\n    flex-grow: 1;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-height: 40px;\n\n    &:hover {\n      background-color: $hover-bg-color;\n    }\n  }\n\n  &__separator {\n    font-weight: bold;\n    font-size: 1.2rem;\n    text-align: center;\n    font-family: Roboto, sans-serif;\n    min-height: 40px;\n    padding: 0 5px;\n    display: flex;\n    align-items: center;\n  }\n\n  &__arrows {\n    display: flex;\n    flex-direction: column;\n    opacity: 0;\n\n    .v-btn {\n      padding: 0 !important;\n      min-width: 28px !important;\n      width: 28px !important;\n      height: 28px !important;\n    }\n\n    .a-datetime-picker-time__item:hover &,\n    .a-datetime-picker-time__input:focus + &,\n    &:focus-within {\n      opacity: 1;\n    }\n  }\n\n  &__input {\n    width: 100%;\n    max-width: 128px;\n    height: 100%;\n    display: inline-block;\n    background: transparent;\n    /* stylelint-disable-next-line */\n    -webkit-box-shadow: none;\n    box-shadow: none;\n    border: 0;\n    border-radius: 0;\n    text-align: center;\n    margin: 0;\n    padding: 0;\n    line-height: inherit;\n    font-size: 1rem;\n    position: relative;\n    /* stylelint-disable-next-line */\n    -webkit-box-sizing: border-box;\n    box-sizing: border-box;\n    /* stylelint-disable-next-line */\n    -webkit-appearance: textfield;\n    /* stylelint-disable-next-line */\n    -moz-appearance: textfield;\n    appearance: textfield;\n    outline: none;\n\n    &--hours {\n      font-weight: bold;\n    }\n  }\n\n  &__input::-webkit-inner-spin-button,\n  &__input::-webkit-outer-spin-button {\n    /* stylelint-disable-next-line */\n    -webkit-appearance: none;\n    margin: 0;\n  }\n}\n</style>\n"],"mappings":""}

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

@@ -2,7 +2,7 @@ import { computed as e, createElementBlock as t, createElementVNode as n, create
 import { useI18n as _ } from "vue-i18n";
 import { VIcon as v } from "vuetify/components/VIcon";
 import { VBtn as y } from "vuetify/components/VBtn";
-//#region src/domains/ui/datetime/components/TimePicker.vue?vue&type=script&setup=true&lang.ts
+// src/domains/ui/datetime/components/TimePicker.vue?vue&type=script&setup=true&lang.ts
 var b = { class: "a-datetime-picker-time" }, x = { class: "a-datetime-picker-time__item a-datetime-picker-time__item" }, S = ["aria-label"], C = { class: "a-datetime-picker-time__arrows" }, w = { class: "a-datetime-picker-time__item" }, T = ["aria-label"], E = { class: "a-datetime-picker-time__arrows" }, D = /*@__PURE__*/ i({
 	__name: "TimePicker",
 	props: {
@@ -145,7 +145,6 @@ var b = { class: "a-datetime-picker-time" }, x = { class: "a-datetime-picker-tim
 		]));
 	}
 });
-//#endregion
 export { D as default };
 
 //# sourceMappingURL=TimePicker.vue_vue_type_script_setup_true_lang.js.map

package/dist/domains/ui/datetime/composables/remainingTime.js

@@ -1,5 +1,5 @@
 import { useI18n as e } from "vue-i18n";
-//#region src/domains/ui/datetime/composables/remainingTime.ts
+// src/domains/ui/datetime/composables/remainingTime.ts
 var t = 60, n = 3600, r = 86400;
 function i() {
 	let { t: i } = e(), a = (e, a) => {
@@ -11,7 +11,6 @@ function i() {
 		remainingTimeLong: (e) => a(e, !1)
 	};
 }
-//#endregion
 export { i as useRemainingTime };
 
 //# sourceMappingURL=remainingTime.js.map

package/dist/domains/ui/file/components/AFileDropzone.js

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

package/dist/domains/ui/file/components/AFileDropzone.js.map

@@ -1 +1 @@
-{"version":3,"file":"AFileDropzone.js","names":["_sfc_main","AFileDropzone_vue_vue_type_script_setup_true_lang_default","AFileDropzone_default"],"sources":["../../../../../src/domains/ui/file/components/AFileDropzone.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useDropZone } from '@vueuse/core'\nimport { ref } from 'vue'\nimport { useDropzoneGlobalDragState } from '@/domains/ui/file/composables/dropzone'\nimport { isNull } from '@/shared/utils/common'\nimport { useFormatAndSizeCheck } from '@/domains/ui/file/composables/formatAndSizeCheck'\nimport { useI18n } from 'vue-i18n'\n\n/**\n * For accept and maxSizes check docs {@see useFormatAndSizeCheck}\n */\nconst props = withDefaults(\n  defineProps<{\n    variant?: 'fill' | 'default' | 'fullscreen'\n    accept?: string | undefined\n    maxSizes?: Record<string, number> | undefined\n    disabled?: boolean\n    transparent?: boolean\n    size?: 'small' | 'default' | 'large'\n    hoverOnly?: boolean\n    hideText?: boolean\n  }>(),\n  {\n    variant: 'default',\n    accept: undefined,\n    maxSizes: undefined,\n    disabled: false,\n    transparent: false,\n    size: 'default',\n    hoverOnly: false,\n    hideText: false,\n  }\n)\nconst emit = defineEmits<{\n  (e: 'drop', files: File[]): void\n  (e: 'click'): void\n}>()\n\nconst dropZoneRef = ref<HTMLDivElement>()\n\nconst { checkFormatsAndSizes } = useFormatAndSizeCheck(\n  () => props.accept,\n  () => props.maxSizes\n)\n\nfunction onDrop(files: File[] | null) {\n  if (props.disabled) return\n  if (isNull(files) || files.length === 0) return\n  emit('drop', checkFormatsAndSizes(files))\n}\n\nconst { isOverDropZone } = useDropZone(dropZoneRef, onDrop)\n\nconst { isDraggingFile } = useDropzoneGlobalDragState()\nconst { t } = useI18n()\n</script>\n\n<template>\n  <div\n    ref=\"dropZoneRef\"\n    class=\"a-file-dropzone\"\n    :class=\"{\n      'a-file-dropzone--bg': !transparent,\n      'a-file-dropzone--over': isOverDropZone && isDraggingFile,\n      'a-file-dropzone--possibility': isDraggingFile,\n      'a-file-dropzone--disabled': disabled,\n      [`a-file-dropzone--${variant}`]: true,\n      [`a-file-dropzone--${size}`]: true,\n      [`a-file-dropzone--hover-only`]: hoverOnly,\n      [`a-file-dropzone--hide-text`]: hideText,\n    }\"\n    @click.stop=\"emit('click')\"\n  >\n    <div\n      v-if=\"disabled\"\n      class=\"text\"\n    />\n    <div\n      v-else-if=\"isDraggingFile\"\n      class=\"text\"\n    >\n      {{ t('common.system.dropzone.dropHere') }}\n    </div>\n    <div\n      v-else\n      class=\"text\"\n    >\n      {{ t('common.system.dropzone.dropPossibility') }}\n    </div>\n  </div>\n</template>\n\n<style lang=\"scss\">\n$class-name-root: 'a-file-dropzone';\n\n.#{$class-name-root} {\n  outline-offset: -4px;\n  position: relative;\n  text-align: center;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  .text {\n    padding: 6px;\n    pointer-events: none;\n    user-select: none;\n    text-align: center;\n    border-radius: 5px;\n  }\n\n  &--bg {\n    width: 100%;\n  }\n\n  &--fullscreen {\n    inset: 0;\n    position: fixed;\n    z-index: 9999;\n  }\n\n  &--small {\n    min-height: 70px;\n\n    .text {\n      font-size: 0.75rem;\n      line-height: 1.2;\n      padding: 4px;\n    }\n  }\n\n  &--default {\n    min-height: 140px;\n  }\n\n  &--large {\n    min-height: 210px;\n  }\n\n  &--fill {\n    position: absolute !important;\n    inset: 0;\n    min-height: 40px;\n  }\n\n  &--hover-only {\n    display: none;\n  }\n\n  &--hide-text .text,\n  &--disabled .text {\n    display: none;\n  }\n\n  &.#{$class-name-root}--hover-only.#{$class-name-root}--possibility {\n    display: flex;\n  }\n}\n\n.v-theme--light {\n  .#{$class-name-root} {\n    .text {\n      background-color: rgb(212 212 212 / 50%);\n    }\n\n    &--bg {\n      background-color: #d4d4d4;\n    }\n\n    &--possibility:not(&--disabled) {\n      background-color: #e5edf1;\n      outline: 2px dashed #bacfd4;\n    }\n\n    // After `--possibility`, here and under the dark theme: a zone with the file over it has both classes, and of two\n    // rules of the same weight the later one is drawn.\n    &--over:not(&--disabled) {\n      background-color: #dcedc8;\n      outline: 2px dashed #7cb342;\n    }\n  }\n}\n\n.v-theme--dark {\n  .#{$class-name-root} {\n    .text {\n      background-color: rgb(57 57 57 / 50%);\n    }\n\n    &--bg {\n      background-color: #393939;\n    }\n\n    &--possibility:not(&--disabled) {\n      background-color: #212531;\n      outline: 2px dashed #01579b;\n    }\n\n    &--over:not(&--disabled) {\n      background-color: #283121;\n      outline: 2px dashed #333e28;\n    }\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"AFileDropzone.js","names":["_sfc_main","AFileDropzone_vue_vue_type_script_setup_true_lang_default","AFileDropzone_default"],"sources":["../../../../../src/domains/ui/file/components/AFileDropzone.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useDropZone } from '@vueuse/core'\nimport { ref } from 'vue'\nimport { useDropzoneGlobalDragState } from '@/domains/ui/file/composables/dropzone'\nimport { isNull } from '@/shared/utils/common'\nimport { useFormatAndSizeCheck } from '@/domains/ui/file/composables/formatAndSizeCheck'\nimport { useI18n } from 'vue-i18n'\n\n/**\n * For accept and maxSizes check docs {@see useFormatAndSizeCheck}\n */\nconst props = withDefaults(\n  defineProps<{\n    variant?: 'fill' | 'default' | 'fullscreen'\n    accept?: string | undefined\n    maxSizes?: Record<string, number> | undefined\n    disabled?: boolean\n    transparent?: boolean\n    size?: 'small' | 'default' | 'large'\n    hoverOnly?: boolean\n    hideText?: boolean\n  }>(),\n  {\n    variant: 'default',\n    accept: undefined,\n    maxSizes: undefined,\n    disabled: false,\n    transparent: false,\n    size: 'default',\n    hoverOnly: false,\n    hideText: false,\n  }\n)\nconst emit = defineEmits<{\n  (e: 'drop', files: File[]): void\n  (e: 'click'): void\n}>()\n\nconst dropZoneRef = ref<HTMLDivElement>()\n\nconst { checkFormatsAndSizes } = useFormatAndSizeCheck(\n  () => props.accept,\n  () => props.maxSizes\n)\n\nfunction onDrop(files: File[] | null) {\n  if (props.disabled) return\n  if (isNull(files) || files.length === 0) return\n  emit('drop', checkFormatsAndSizes(files))\n}\n\nconst { isOverDropZone } = useDropZone(dropZoneRef, onDrop)\n\nconst { isDraggingFile } = useDropzoneGlobalDragState()\nconst { t } = useI18n()\n</script>\n\n<template>\n  <div\n    ref=\"dropZoneRef\"\n    class=\"a-file-dropzone\"\n    :class=\"{\n      'a-file-dropzone--bg': !transparent,\n      'a-file-dropzone--over': isOverDropZone && isDraggingFile,\n      'a-file-dropzone--possibility': isDraggingFile,\n      'a-file-dropzone--disabled': disabled,\n      [`a-file-dropzone--${variant}`]: true,\n      [`a-file-dropzone--${size}`]: true,\n      [`a-file-dropzone--hover-only`]: hoverOnly,\n      [`a-file-dropzone--hide-text`]: hideText,\n    }\"\n    @click.stop=\"emit('click')\"\n  >\n    <div\n      v-if=\"disabled\"\n      class=\"text\"\n    />\n    <div\n      v-else-if=\"isDraggingFile\"\n      class=\"text\"\n    >\n      {{ t('common.system.dropzone.dropHere') }}\n    </div>\n    <div\n      v-else\n      class=\"text\"\n    >\n      {{ t('common.system.dropzone.dropPossibility') }}\n    </div>\n  </div>\n</template>\n\n<style lang=\"scss\">\n$class-name-root: 'a-file-dropzone';\n\n.#{$class-name-root} {\n  outline-offset: -4px;\n  position: relative;\n  text-align: center;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  .text {\n    padding: 6px;\n    pointer-events: none;\n    user-select: none;\n    text-align: center;\n    border-radius: 5px;\n  }\n\n  &--bg {\n    width: 100%;\n  }\n\n  &--fullscreen {\n    inset: 0;\n    position: fixed;\n    z-index: 9999;\n  }\n\n  &--small {\n    min-height: 70px;\n\n    .text {\n      font-size: 0.75rem;\n      line-height: 1.2;\n      padding: 4px;\n    }\n  }\n\n  &--default {\n    min-height: 140px;\n  }\n\n  &--large {\n    min-height: 210px;\n  }\n\n  &--fill {\n    position: absolute !important;\n    inset: 0;\n    min-height: 40px;\n  }\n\n  &--hover-only {\n    display: none;\n  }\n\n  &--hide-text .text,\n  &--disabled .text {\n    display: none;\n  }\n\n  &.#{$class-name-root}--hover-only.#{$class-name-root}--possibility {\n    display: flex;\n  }\n}\n\n.v-theme--light {\n  .#{$class-name-root} {\n    .text {\n      background-color: rgb(212 212 212 / 50%);\n    }\n\n    &--bg {\n      background-color: #d4d4d4;\n    }\n\n    &--possibility:not(&--disabled) {\n      background-color: #e5edf1;\n      outline: 2px dashed #bacfd4;\n    }\n\n    // Must come after `--possibility`, here and under the dark theme. A zone with\n    // a file over it has both classes, and the later rule of equal weight wins.\n    &--over:not(&--disabled) {\n      background-color: #dcedc8;\n      outline: 2px dashed #7cb342;\n    }\n  }\n}\n\n.v-theme--dark {\n  .#{$class-name-root} {\n    .text {\n      background-color: rgb(57 57 57 / 50%);\n    }\n\n    &--bg {\n      background-color: #393939;\n    }\n\n    &--possibility:not(&--disabled) {\n      background-color: #212531;\n      outline: 2px dashed #01579b;\n    }\n\n    &--over:not(&--disabled) {\n      background-color: #283121;\n      outline: 2px dashed #333e28;\n    }\n  }\n}\n</style>\n"],"mappings":""}

package/dist/domains/ui/file/components/AFileDropzone.vue.d.ts

@@ -21,7 +21,7 @@ declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {
     disabled: boolean;
     size: "small" | "default" | "large";
     accept: string;
-    variant: "fill" | "default" | "fullscreen";
+    variant: "default" | "fill" | "fullscreen";
     transparent: boolean;
     maxSizes: Record<string, number>;
     hoverOnly: boolean;

package/dist/domains/ui/file/components/AFileDropzone.vue_vue_type_script_setup_true_lang.js

@@ -1,10 +1,10 @@
-import { isNull as e } from "../../../../shared/utils/common.js";
-import { useDropzoneGlobalDragState as t } from "../composables/dropzone.js";
+import { useDropzoneGlobalDragState as e } from "../composables/dropzone.js";
+import { isNull as t } from "../../../../shared/utils/common.js";
 import { useFormatAndSizeCheck as n } from "../composables/formatAndSizeCheck.js";
 import { createElementBlock as r, defineComponent as i, normalizeClass as a, openBlock as o, ref as s, toDisplayString as c, unref as l, withModifiers as u } from "vue";
 import { useI18n as d } from "vue-i18n";
 import { useDropZone as f } from "@vueuse/core";
-//#region src/domains/ui/file/components/AFileDropzone.vue?vue&type=script&setup=true&lang.ts
+// src/domains/ui/file/components/AFileDropzone.vue?vue&type=script&setup=true&lang.ts
 var p = {
 	key: 0,
 	class: "text"
@@ -41,10 +41,10 @@ var p = {
 	emits: ["drop", "click"],
 	setup(i, { emit: g }) {
 		let _ = i, v = g, y = s(), { checkFormatsAndSizes: b } = n(() => _.accept, () => _.maxSizes);
-		function x(t) {
-			_.disabled || e(t) || t.length === 0 || v("drop", b(t));
+		function x(e) {
+			_.disabled || t(e) || e.length === 0 || v("drop", b(e));
 		}
-		let { isOverDropZone: S } = f(y, x), { isDraggingFile: C } = t(), { t: w } = d();
+		let { isOverDropZone: S } = f(y, x), { isDraggingFile: C } = e(), { t: w } = d();
 		return (e, t) => (o(), r("div", {
 			ref_key: "dropZoneRef",
 			ref: y,
@@ -62,7 +62,6 @@ var p = {
 		}, [i.disabled ? (o(), r("div", p)) : l(C) ? (o(), r("div", m, c(l(w)("common.system.dropzone.dropHere")), 1)) : (o(), r("div", h, c(l(w)("common.system.dropzone.dropPossibility")), 1))], 2));
 	}
 });
-//#endregion
 export { g as default };
 
 //# sourceMappingURL=AFileDropzone.vue_vue_type_script_setup_true_lang.js.map

package/dist/domains/ui/file/components/AFileDropzone.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"AFileDropzone.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeClass","_unref","_withModifiers","_toDisplayString","_hoisted_1","_hoisted_2","_hoisted_3","AFileDropzone_vue_vue_type_script_setup_true_lang_default","__emit","props","__props","emit","dropZoneRef","ref","useFormatAndSizeCheck","onDrop","isNull","files","checkFormatsAndSizes","useDropZone","useDropzoneGlobalDragState","useI18n","openBlock","createElementBlock","normalizeClass","unref","isOverDropZone","isDraggingFile","_cache","withModifiers","toDisplayString","t"],"sources":["../../../../../src/domains/ui/file/components/AFileDropzone.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useDropZone } from '@vueuse/core'\nimport { ref } from 'vue'\nimport { useDropzoneGlobalDragState } from '@/domains/ui/file/composables/dropzone'\nimport { isNull } from '@/shared/utils/common'\nimport { useFormatAndSizeCheck } from '@/domains/ui/file/composables/formatAndSizeCheck'\nimport { useI18n } from 'vue-i18n'\n\n/**\n * For accept and maxSizes check docs {@see useFormatAndSizeCheck}\n */\nconst props = withDefaults(\n  defineProps<{\n    variant?: 'fill' | 'default' | 'fullscreen'\n    accept?: string | undefined\n    maxSizes?: Record<string, number> | undefined\n    disabled?: boolean\n    transparent?: boolean\n    size?: 'small' | 'default' | 'large'\n    hoverOnly?: boolean\n    hideText?: boolean\n  }>(),\n  {\n    variant: 'default',\n    accept: undefined,\n    maxSizes: undefined,\n    disabled: false,\n    transparent: false,\n    size: 'default',\n    hoverOnly: false,\n    hideText: false,\n  }\n)\nconst emit = defineEmits<{\n  (e: 'drop', files: File[]): void\n  (e: 'click'): void\n}>()\n\nconst dropZoneRef = ref<HTMLDivElement>()\n\nconst { checkFormatsAndSizes } = useFormatAndSizeCheck(\n  () => props.accept,\n  () => props.maxSizes\n)\n\nfunction onDrop(files: File[] | null) {\n  if (props.disabled) return\n  if (isNull(files) || files.length === 0) return\n  emit('drop', checkFormatsAndSizes(files))\n}\n\nconst { isOverDropZone } = useDropZone(dropZoneRef, onDrop)\n\nconst { isDraggingFile } = useDropzoneGlobalDragState()\nconst { t } = useI18n()\n</script>\n\n<template>\n  <div\n    ref=\"dropZoneRef\"\n    class=\"a-file-dropzone\"\n    :class=\"{\n      'a-file-dropzone--bg': !transparent,\n      'a-file-dropzone--over': isOverDropZone && isDraggingFile,\n      'a-file-dropzone--possibility': isDraggingFile,\n      'a-file-dropzone--disabled': disabled,\n      [`a-file-dropzone--${variant}`]: true,\n      [`a-file-dropzone--${size}`]: true,\n      [`a-file-dropzone--hover-only`]: hoverOnly,\n      [`a-file-dropzone--hide-text`]: hideText,\n    }\"\n    @click.stop=\"emit('click')\"\n  >\n    <div\n      v-if=\"disabled\"\n      class=\"text\"\n    />\n    <div\n      v-else-if=\"isDraggingFile\"\n      class=\"text\"\n    >\n      {{ t('common.system.dropzone.dropHere') }}\n    </div>\n    <div\n      v-else\n      class=\"text\"\n    >\n      {{ t('common.system.dropzone.dropPossibility') }}\n    </div>\n  </div>\n</template>\n\n<style lang=\"scss\">\n$class-name-root: 'a-file-dropzone';\n\n.#{$class-name-root} {\n  outline-offset: -4px;\n  position: relative;\n  text-align: center;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  .text {\n    padding: 6px;\n    pointer-events: none;\n    user-select: none;\n    text-align: center;\n    border-radius: 5px;\n  }\n\n  &--bg {\n    width: 100%;\n  }\n\n  &--fullscreen {\n    inset: 0;\n    position: fixed;\n    z-index: 9999;\n  }\n\n  &--small {\n    min-height: 70px;\n\n    .text {\n      font-size: 0.75rem;\n      line-height: 1.2;\n      padding: 4px;\n    }\n  }\n\n  &--default {\n    min-height: 140px;\n  }\n\n  &--large {\n    min-height: 210px;\n  }\n\n  &--fill {\n    position: absolute !important;\n    inset: 0;\n    min-height: 40px;\n  }\n\n  &--hover-only {\n    display: none;\n  }\n\n  &--hide-text .text,\n  &--disabled .text {\n    display: none;\n  }\n\n  &.#{$class-name-root}--hover-only.#{$class-name-root}--possibility {\n    display: flex;\n  }\n}\n\n.v-theme--light {\n  .#{$class-name-root} {\n    .text {\n      background-color: rgb(212 212 212 / 50%);\n    }\n\n    &--bg {\n      background-color: #d4d4d4;\n    }\n\n    &--possibility:not(&--disabled) {\n      background-color: #e5edf1;\n      outline: 2px dashed #bacfd4;\n    }\n\n    // After `--possibility`, here and under the dark theme: a zone with the file over it has both classes, and of two\n    // rules of the same weight the later one is drawn.\n    &--over:not(&--disabled) {\n      background-color: #dcedc8;\n      outline: 2px dashed #7cb342;\n    }\n  }\n}\n\n.v-theme--dark {\n  .#{$class-name-root} {\n    .text {\n      background-color: rgb(57 57 57 / 50%);\n    }\n\n    &--bg {\n      background-color: #393939;\n    }\n\n    &--possibility:not(&--disabled) {\n      background-color: #212531;\n      outline: 2px dashed #01579b;\n    }\n\n    &--over:not(&--disabled) {\n      background-color: #283121;\n      outline: 2px dashed #333e28;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAWA,IAAMW,IAAQC,GAsBRC,IAAOH,GAKPI,IAAcC,EAAoB,GAElC,EAAE,4BAAyBC,QACzBL,EAAM,cACNA,EAAM,QACd;EAEA,SAASM,EAAO,GAAsB;GACpC,AAAIN,EAAM,YACNO,EAAOC,CAAK,KAAKA,EAAM,WAAW,KACtCN,EAAK,QAAQO,EAAqBD,CAAK,CAAC;EAC1C;EAEA,IAAM,EAAE,sBAAmBE,EAAYP,GAAaG,CAAM,GAEpD,EAAE,sBAAmBK,EAA2B,GAChD,EAAE,SAAMC,EAAQ;E,kBAIpBvB,EAAA,GAAAC,EA+BM,OAAA;GA9BA,SAAA;GAAJ,KAAIa;GACJ,OAAKZ,EAAA,CAAC,mBAAiB;IACiB,uBAAA,CAAAU,EAAA;IAA4C,yBAAAT,EAAAyB,CAAA,KAAkBzB,EAAA0B,CAAA;IAAsD,gCAAA1B,EAAA0B,CAAA;IAAmD,6BAAAjB,EAAA;KAAqC,oBAAAA,EAAA,YAAO;KAAsC,oBAAAA,EAAA,SAAI;IAAkD,+BAAAA,EAAA;IAAiD,8BAAAA,EAAA;;GAUvY,SAAK,AAAAkB,EAAA,OAAA1B,GAAA,MAAOS,EAAI,OAAA,GAAA,CAAA,MAAA,CAAA;E,IAGTD,EAAA,YADRZ,EAAA,GAAAC,EAGE,OAHFK,CAGE,KAEWH,EAAA0B,CAAA,KADb7B,EAAA,GAAAC,EAKM,OALNM,GAKMF,EADDF,EAAA8B,CAAA,CAAC,CAAA,iCAAA,CAAA,GAAA,CAAA,MAENjC,EAAA,GAAAC,EAKM,OALNO,GAKMH,EADDF,EAAA8B,CAAA,CAAC,CAAA,wCAAA,CAAA,GAAA,CAAA,E"}
+{"version":3,"file":"AFileDropzone.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeClass","_unref","_withModifiers","_toDisplayString","_hoisted_1","_hoisted_2","_hoisted_3","AFileDropzone_vue_vue_type_script_setup_true_lang_default","__emit","props","__props","emit","dropZoneRef","ref","useFormatAndSizeCheck","onDrop","isNull","files","checkFormatsAndSizes","useDropZone","useDropzoneGlobalDragState","useI18n","openBlock","createElementBlock","normalizeClass","unref","isOverDropZone","isDraggingFile","_cache","withModifiers","toDisplayString","t"],"sources":["../../../../../src/domains/ui/file/components/AFileDropzone.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useDropZone } from '@vueuse/core'\nimport { ref } from 'vue'\nimport { useDropzoneGlobalDragState } from '@/domains/ui/file/composables/dropzone'\nimport { isNull } from '@/shared/utils/common'\nimport { useFormatAndSizeCheck } from '@/domains/ui/file/composables/formatAndSizeCheck'\nimport { useI18n } from 'vue-i18n'\n\n/**\n * For accept and maxSizes check docs {@see useFormatAndSizeCheck}\n */\nconst props = withDefaults(\n  defineProps<{\n    variant?: 'fill' | 'default' | 'fullscreen'\n    accept?: string | undefined\n    maxSizes?: Record<string, number> | undefined\n    disabled?: boolean\n    transparent?: boolean\n    size?: 'small' | 'default' | 'large'\n    hoverOnly?: boolean\n    hideText?: boolean\n  }>(),\n  {\n    variant: 'default',\n    accept: undefined,\n    maxSizes: undefined,\n    disabled: false,\n    transparent: false,\n    size: 'default',\n    hoverOnly: false,\n    hideText: false,\n  }\n)\nconst emit = defineEmits<{\n  (e: 'drop', files: File[]): void\n  (e: 'click'): void\n}>()\n\nconst dropZoneRef = ref<HTMLDivElement>()\n\nconst { checkFormatsAndSizes } = useFormatAndSizeCheck(\n  () => props.accept,\n  () => props.maxSizes\n)\n\nfunction onDrop(files: File[] | null) {\n  if (props.disabled) return\n  if (isNull(files) || files.length === 0) return\n  emit('drop', checkFormatsAndSizes(files))\n}\n\nconst { isOverDropZone } = useDropZone(dropZoneRef, onDrop)\n\nconst { isDraggingFile } = useDropzoneGlobalDragState()\nconst { t } = useI18n()\n</script>\n\n<template>\n  <div\n    ref=\"dropZoneRef\"\n    class=\"a-file-dropzone\"\n    :class=\"{\n      'a-file-dropzone--bg': !transparent,\n      'a-file-dropzone--over': isOverDropZone && isDraggingFile,\n      'a-file-dropzone--possibility': isDraggingFile,\n      'a-file-dropzone--disabled': disabled,\n      [`a-file-dropzone--${variant}`]: true,\n      [`a-file-dropzone--${size}`]: true,\n      [`a-file-dropzone--hover-only`]: hoverOnly,\n      [`a-file-dropzone--hide-text`]: hideText,\n    }\"\n    @click.stop=\"emit('click')\"\n  >\n    <div\n      v-if=\"disabled\"\n      class=\"text\"\n    />\n    <div\n      v-else-if=\"isDraggingFile\"\n      class=\"text\"\n    >\n      {{ t('common.system.dropzone.dropHere') }}\n    </div>\n    <div\n      v-else\n      class=\"text\"\n    >\n      {{ t('common.system.dropzone.dropPossibility') }}\n    </div>\n  </div>\n</template>\n\n<style lang=\"scss\">\n$class-name-root: 'a-file-dropzone';\n\n.#{$class-name-root} {\n  outline-offset: -4px;\n  position: relative;\n  text-align: center;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  .text {\n    padding: 6px;\n    pointer-events: none;\n    user-select: none;\n    text-align: center;\n    border-radius: 5px;\n  }\n\n  &--bg {\n    width: 100%;\n  }\n\n  &--fullscreen {\n    inset: 0;\n    position: fixed;\n    z-index: 9999;\n  }\n\n  &--small {\n    min-height: 70px;\n\n    .text {\n      font-size: 0.75rem;\n      line-height: 1.2;\n      padding: 4px;\n    }\n  }\n\n  &--default {\n    min-height: 140px;\n  }\n\n  &--large {\n    min-height: 210px;\n  }\n\n  &--fill {\n    position: absolute !important;\n    inset: 0;\n    min-height: 40px;\n  }\n\n  &--hover-only {\n    display: none;\n  }\n\n  &--hide-text .text,\n  &--disabled .text {\n    display: none;\n  }\n\n  &.#{$class-name-root}--hover-only.#{$class-name-root}--possibility {\n    display: flex;\n  }\n}\n\n.v-theme--light {\n  .#{$class-name-root} {\n    .text {\n      background-color: rgb(212 212 212 / 50%);\n    }\n\n    &--bg {\n      background-color: #d4d4d4;\n    }\n\n    &--possibility:not(&--disabled) {\n      background-color: #e5edf1;\n      outline: 2px dashed #bacfd4;\n    }\n\n    // Must come after `--possibility`, here and under the dark theme. A zone with\n    // a file over it has both classes, and the later rule of equal weight wins.\n    &--over:not(&--disabled) {\n      background-color: #dcedc8;\n      outline: 2px dashed #7cb342;\n    }\n  }\n}\n\n.v-theme--dark {\n  .#{$class-name-root} {\n    .text {\n      background-color: rgb(57 57 57 / 50%);\n    }\n\n    &--bg {\n      background-color: #393939;\n    }\n\n    &--possibility:not(&--disabled) {\n      background-color: #212531;\n      outline: 2px dashed #01579b;\n    }\n\n    &--over:not(&--disabled) {\n      background-color: #283121;\n      outline: 2px dashed #333e28;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAWA,IAAMW,IAAQC,GAsBRC,IAAOH,GAKPI,IAAcC,EAAoB,GAElC,EAAE,4BAAyBC,QACzBL,EAAM,cACNA,EAAM,QACd;EAEA,SAASM,EAAO,GAAsB;GACpC,AAAIN,EAAM,YACNO,EAAOC,CAAK,KAAKA,EAAM,WAAW,KACtCN,EAAK,QAAQO,EAAqBD,CAAK,CAAC;EAC1C;EAEA,IAAM,EAAE,sBAAmBE,EAAYP,GAAaG,CAAM,GAEpD,EAAE,sBAAmBK,EAA2B,GAChD,EAAE,SAAMC,EAAQ;E,kBAIpBvB,EAAA,GAAAC,EA+BM,OAAA;GA9BA,SAAA;GAAJ,KAAIa;GACJ,OAAKZ,EAAA,CAAC,mBAAiB;IACiB,uBAAA,CAAAU,EAAA;IAA4C,yBAAAT,EAAAyB,CAAA,KAAkBzB,EAAA0B,CAAA;IAAsD,gCAAA1B,EAAA0B,CAAA;IAAmD,6BAAAjB,EAAA;KAAqC,oBAAAA,EAAA,YAAO;KAAsC,oBAAAA,EAAA,SAAI;IAAkD,+BAAAA,EAAA;IAAiD,8BAAAA,EAAA;;GAUvY,SAAK,AAAAkB,EAAA,OAAA1B,GAAA,MAAOS,EAAI,OAAA,GAAA,CAAA,MAAA,CAAA;E,IAGTD,EAAA,YADRZ,EAAA,GAAAC,EAGE,OAHFK,CAGE,KAEWH,EAAA0B,CAAA,KADb7B,EAAA,GAAAC,EAKM,OALNM,GAKMF,EADDF,EAAA8B,CAAA,CAAC,CAAA,iCAAA,CAAA,GAAA,CAAA,MAENjC,EAAA,GAAAC,EAKM,OALNO,GAKMH,EADDF,EAAA8B,CAAA,CAAC,CAAA,wCAAA,CAAA,GAAA,CAAA,E"}

package/dist/domains/ui/file/components/AFileInput.js

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

package/dist/domains/ui/file/components/AFileInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"AFileInput.js","names":["_sfc_main","AFileInput_vue_vue_type_script_setup_true_lang_default","AFileInput_default"],"sources":["../../../../../src/domains/ui/file/components/AFileInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, watch, withModifiers } from 'vue'\nimport { isBoolean, isUndefined } from '@/shared/utils/common'\nimport AFileDropzone from '@/domains/ui/file/components/AFileDropzone.vue'\nimport type { InputFileChangeEvent } from '@/shared/types/ChangeEvent'\nimport { useFormatAndSizeCheck } from '@/domains/ui/file/composables/formatAndSizeCheck'\nimport { useAlerts } from '@/domains/system/composables/alerts'\n\n/**\n * For accept and maxSizes check docs {@see useFormatAndSizeCheck}\n */\nconst props = withDefaults(\n  defineProps<{\n    fileInputKey?: number | undefined\n    accept?: string | undefined\n    maxSizes?: Record<string, number> | undefined\n    multiple?: boolean\n    useDropzone?: boolean\n    dropzoneVariant?: 'fill' | 'default' | 'fullscreen'\n    onDropzoneClickCallback?: (() => void) | undefined | false // false for disable, undefined for browse files, otherwise custom callback is used\n    hoverOnly?: boolean\n  }>(),\n  {\n    fileInputKey: undefined,\n    accept: undefined,\n    maxSizes: undefined,\n    multiple: false,\n    useDropzone: false,\n    dropzoneVariant: 'default',\n    onDropzoneClickCallback: undefined,\n    hoverOnly: false,\n  }\n)\n\nconst emit = defineEmits<{\n  (e: 'change', event: InputFileChangeEvent): void\n  (e: 'filesInput', files: File[]): void\n}>()\n\nconst BLOCK_DOUBLE_CLICK_MS = 200\n\nconst inputRef = ref<undefined | HTMLInputElement>(undefined)\n// eslint-disable-next-line vue/no-setup-props-reactivity-loss\nconst fileInputKeyLocal = ref(props.fileInputKey || 0)\nconst blockDoubleClick = ref(false)\n\nconst clickInput = () => {\n  if (blockDoubleClick.value === true) {\n    return\n  }\n  blockDoubleClick.value = true\n  inputRef.value?.click()\n  setTimeout(() => {\n    blockDoubleClick.value = false\n  }, BLOCK_DOUBLE_CLICK_MS)\n}\n\nconst { checkFormatsAndSizes } = useFormatAndSizeCheck(\n  () => props.accept,\n  () => props.maxSizes\n)\nconst { showWarningT } = useAlerts()\n\nconst validateData = (files: File[]) => {\n  if (!props.multiple && files.length > 0) {\n    const checked = checkFormatsAndSizes([files[0]!])\n    emit('filesInput', checked)\n    return\n  }\n  const checked = checkFormatsAndSizes(files)\n  emit('filesInput', checked)\n}\n\nconst onDropzoneDrop = (files: File[]) => {\n  if (props.multiple) {\n    validateData(files)\n    return\n  }\n  // One file is taken: the first the check lets through. Taken before the check, the first dropped lost a file\n  // the check lets through whenever one it refuses was dropped before it.\n  const checked = checkFormatsAndSizes(files)\n  if (checked.length > 1) showWarningT('common.system.upload.onlyOneFile')\n  emit('filesInput', checked.slice(0, 1))\n}\n\nconst onInputFileChange = (payload: Event) => {\n  const event = payload as InputFileChangeEvent\n  emit('change', event)\n  validateData(Array.from(event.target?.files ?? []))\n  // Handed over, or refused with its warning: emptied, the input tells of the same file when it is picked again. With\n  // the value kept it told nothing until its host changed `fileInputKey`, which not every host is given.\n  if (event.target) event.target.value = ''\n}\n\nconst onFileDropzoneClick = () => {\n  if (isBoolean(props.onDropzoneClickCallback)) {\n    return\n  }\n  if (isUndefined(props.onDropzoneClickCallback)) {\n    clickInput()\n    return\n  }\n  props.onDropzoneClickCallback()\n}\n\nwatch(\n  () => props.fileInputKey,\n  (newValue, oldValue) => {\n    if (newValue === oldValue || isUndefined(newValue)) {\n      return\n    }\n    fileInputKeyLocal.value = newValue\n  }\n)\n\ndefineExpose({\n  activate: clickInput,\n})\n</script>\n\n<template>\n  <AFileDropzone\n    v-if=\"useDropzone\"\n    :variant=\"dropzoneVariant\"\n    :hover-only=\"hoverOnly\"\n    @click=\"onFileDropzoneClick\"\n    @drop=\"onDropzoneDrop\"\n  />\n  <slot\n    v-else\n    name=\"activator\"\n    :props=\"{ onClick: withModifiers(() => clickInput(), ['stop']) }\"\n  />\n  <input\n    ref=\"inputRef\"\n    :key=\"fileInputKeyLocal\"\n    :accept=\"accept\"\n    :multiple=\"multiple\"\n    hidden\n    tabindex=\"-1\"\n    type=\"file\"\n    @change=\"onInputFileChange\"\n  />\n</template>\n"],"mappings":""}
+{"version":3,"file":"AFileInput.js","names":["_sfc_main","AFileInput_vue_vue_type_script_setup_true_lang_default","AFileInput_default"],"sources":["../../../../../src/domains/ui/file/components/AFileInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, watch, withModifiers } from 'vue'\nimport { isBoolean, isUndefined } from '@/shared/utils/common'\nimport AFileDropzone from '@/domains/ui/file/components/AFileDropzone.vue'\nimport type { InputFileChangeEvent } from '@/shared/types/ChangeEvent'\nimport { useFormatAndSizeCheck } from '@/domains/ui/file/composables/formatAndSizeCheck'\nimport { useAlerts } from '@/domains/system/composables/alerts'\n\n/**\n * For accept and maxSizes check docs {@see useFormatAndSizeCheck}\n */\nconst props = withDefaults(\n  defineProps<{\n    fileInputKey?: number | undefined\n    accept?: string | undefined\n    maxSizes?: Record<string, number> | undefined\n    multiple?: boolean\n    useDropzone?: boolean\n    dropzoneVariant?: 'fill' | 'default' | 'fullscreen'\n    onDropzoneClickCallback?: (() => void) | undefined | false // false for disable, undefined for browse files, otherwise custom callback is used\n    hoverOnly?: boolean\n  }>(),\n  {\n    fileInputKey: undefined,\n    accept: undefined,\n    maxSizes: undefined,\n    multiple: false,\n    useDropzone: false,\n    dropzoneVariant: 'default',\n    onDropzoneClickCallback: undefined,\n    hoverOnly: false,\n  }\n)\n\nconst emit = defineEmits<{\n  (e: 'change', event: InputFileChangeEvent): void\n  (e: 'filesInput', files: File[]): void\n}>()\n\nconst BLOCK_DOUBLE_CLICK_MS = 200\n\nconst inputRef = ref<undefined | HTMLInputElement>(undefined)\n// eslint-disable-next-line vue/no-setup-props-reactivity-loss\nconst fileInputKeyLocal = ref(props.fileInputKey || 0)\nconst blockDoubleClick = ref(false)\n\nconst clickInput = () => {\n  if (blockDoubleClick.value === true) {\n    return\n  }\n  blockDoubleClick.value = true\n  inputRef.value?.click()\n  setTimeout(() => {\n    blockDoubleClick.value = false\n  }, BLOCK_DOUBLE_CLICK_MS)\n}\n\nconst { checkFormatsAndSizes } = useFormatAndSizeCheck(\n  () => props.accept,\n  () => props.maxSizes\n)\nconst { showWarningT } = useAlerts()\n\nconst validateData = (files: File[]) => {\n  if (!props.multiple && files.length > 0) {\n    const checked = checkFormatsAndSizes([files[0]!])\n    emit('filesInput', checked)\n    return\n  }\n  const checked = checkFormatsAndSizes(files)\n  emit('filesInput', checked)\n}\n\nconst onDropzoneDrop = (files: File[]) => {\n  if (props.multiple) {\n    validateData(files)\n    return\n  }\n  // Take the first file that passes the check. Taking the first dropped\n  // file before the check lost a valid file when a refused one came first.\n  const checked = checkFormatsAndSizes(files)\n  if (checked.length > 1) showWarningT('common.system.upload.onlyOneFile')\n  emit('filesInput', checked.slice(0, 1))\n}\n\nconst onInputFileChange = (payload: Event) => {\n  const event = payload as InputFileChangeEvent\n  emit('change', event)\n  validateData(Array.from(event.target?.files ?? []))\n  // Clear the input after handing over or refusing the file, so picking the same file again fires a change.\n  // Not every host changes `fileInputKey` to reset it.\n  if (event.target) event.target.value = ''\n}\n\nconst onFileDropzoneClick = () => {\n  if (isBoolean(props.onDropzoneClickCallback)) {\n    return\n  }\n  if (isUndefined(props.onDropzoneClickCallback)) {\n    clickInput()\n    return\n  }\n  props.onDropzoneClickCallback()\n}\n\nwatch(\n  () => props.fileInputKey,\n  (newValue, oldValue) => {\n    if (newValue === oldValue || isUndefined(newValue)) {\n      return\n    }\n    fileInputKeyLocal.value = newValue\n  }\n)\n\ndefineExpose({\n  activate: clickInput,\n})\n</script>\n\n<template>\n  <AFileDropzone\n    v-if=\"useDropzone\"\n    :variant=\"dropzoneVariant\"\n    :hover-only=\"hoverOnly\"\n    @click=\"onFileDropzoneClick\"\n    @drop=\"onDropzoneDrop\"\n  />\n  <slot\n    v-else\n    name=\"activator\"\n    :props=\"{ onClick: withModifiers(() => clickInput(), ['stop']) }\"\n  />\n  <input\n    ref=\"inputRef\"\n    :key=\"fileInputKeyLocal\"\n    :accept=\"accept\"\n    :multiple=\"multiple\"\n    hidden\n    tabindex=\"-1\"\n    type=\"file\"\n    @change=\"onInputFileChange\"\n  />\n</template>\n"],"mappings":""}