@anzusystems/common-admin 2.0.0-rc.5 → 2.0.0-rc.7

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

@@ -4,10 +4,12 @@ type __VLS_Props = {
     dataCy?: string | undefined;
     titleClass?: string | undefined;
 };
-declare var __VLS_13: {};
-type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_13) => any;
+declare const __VLS_template: () => {
+    __VLS_Slots: {
+        default?: (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, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     value: string | number | null;
     title: string;

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

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

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

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

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

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

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

@@ -2,11 +2,9 @@ import { UserAndTimeTrackingData, UserAndTimeTrackingUsers } from '../../../shar
 import { CachedItem } from '../../cached/composables/defineCached';
 import { IntegerId } from '../../../shared/types/common';
 /**
- * Created and modified -- when and by whom -- for a detail or an edit form.
- *
- * An admin does not use it directly but through its own component made by
- * `createUserAndTimeTrackingFields`, which supplies its user cache and the route to a user's detail.
- * Without `users` it draws the dates only, as it always has.
+ * Created and modified, when and by whom, for a detail or edit form.
+ * Admins use it through their own component from `createUserAndTimeTrackingFields`, which
+ * supplies the user cache and user detail route. Without `users` it draws only the dates.
  */
 type __VLS_Props = {
     data: UserAndTimeTrackingData;

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/ADatetimePicker.js

@@ -2,7 +2,7 @@ import e from "../../../../_virtual/_plugin-vue_export-helper.js";
 import t from "./ADatetimePicker.vue_vue_type_script_setup_true_lang.js";
 /* empty css                                                                */
 // src/domains/ui/datetime/components/ADatetimePicker.vue
-var n = /*#__PURE__*/ e(t, [["__scopeId", "data-v-9c0882ba"]]);
+var n = /*#__PURE__*/ e(t, [["__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","_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    // 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.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/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.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.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":""}

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

@@ -12,14 +12,16 @@ type __VLS_Props = {
     onDropzoneClickCallback?: (() => void) | undefined | false;
     hoverOnly?: boolean;
 };
-declare var __VLS_9: {
-    props: {
-        onClick: () => void;
+declare const __VLS_template: () => {
+    __VLS_Slots: {
+        activator?: (props: {
+            props: {
+                onClick: () => void;
+            };
+        }) => any;
     };
 };
-type __VLS_Slots = {} & {
-    activator?: (props: typeof __VLS_9) => any;
-};
+type __VLS_Slots = ReturnType<typeof __VLS_template>['__VLS_Slots'];
 declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {
     activate: () => void;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
@@ -35,7 +37,7 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {
     hoverOnly: boolean;
     fileInputKey: number;
     useDropzone: boolean;
-    dropzoneVariant: "fill" | "default" | "fullscreen";
+    dropzoneVariant: "default" | "fill" | "fullscreen";
     onDropzoneClickCallback: false | (() => void);
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -1 +1 @@
-{"version":3,"file":"AFileInput.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_Fragment","_createBlock","AFileDropzone","_renderSlot","AFileDropzone_default","_hoisted_1","BLOCK_DOUBLE_CLICK_MS","AFileInput_vue_vue_type_script_setup_true_lang_default","__expose","__emit","props","__props","emit","inputRef","ref","fileInputKeyLocal","blockDoubleClick","clickInput","useFormatAndSizeCheck","useAlerts","validateData","files","checked","checkFormatsAndSizes","onDropzoneDrop","showWarningT","onInputFileChange","event","payload","onFileDropzoneClick","isBoolean","isUndefined","watch","newValue","oldValue","openBlock","createElementBlock","Fragment","createBlock","renderSlot","_ctx","withModifiers"],"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":";;;;;;A,gCAuCMQ,IAAwB,K;;;;;;;;;;;;;;;;;;;;;;;;;;EA5B9B,IAAMI,IAAQC,GAuBRC,IAAOH,GAOPI,IAAWC,EAAkC,KAAA,CAAS,GAEtDC,IAAoBD,EAAIJ,EAAM,gBAAgB,CAAC,GAC/CM,IAAmBF,EAAI,EAAK,GAE5BG,UAAmB;GACvB,AAAID,EAAiB,UAAU,OAG/B,EAAiB,QAAQ,IACzBH,EAAS,OAAO,MAAM,GACtB,iBAAiB;IACf,EAAiB,QAAQ;GAC3B,GAAGP,CAAqB;EAC1B,GAEM,EAAE,4BAAyBY,QACzBR,EAAM,cACNA,EAAM,QACd,GACM,EAAE,oBAAiBS,EAAU,GAE7BC,KAAgB,MAAkB;GACtC,IAAI,CAACV,EAAM,YAAYW,EAAM,SAAS,GAAG;IACvC,IAAMC,IAAUC,EAAqB,CAACF,EAAM,EAAG,CAAC;IAChD,EAAK,cAAcC,CAAO;IAC1B;GACF;GACA,IAAMA,IAAUC,EAAqBF,CAAK;GAC1C,EAAK,cAAcC,CAAO;EAC5B,GAEME,KAAkB,MAAkB;GACxC,IAAId,EAAM,UAAU;IAClB,EAAaW,CAAK;IAClB;GACF;GAGA,IAAMC,IAAUC,EAAqBF,CAAK;GAE1C,AADIC,EAAQ,SAAS,KAAGG,EAAa,kCAAkC,GACvEb,EAAK,cAAcU,EAAQ,MAAM,GAAG,CAAC,CAAC;EACxC,GAEMI,KAAqB,MAAmB;GAC5C,IAAMC,IAAQC;GAKd,AAJAhB,EAAK,UAAUe,CAAK,GACpBP,EAAa,MAAM,KAAKO,EAAM,QAAQ,SAAS,CAAC,CAAC,CAAC,GAG9CA,EAAM,WAAQ,EAAM,OAAO,QAAQ;EACzC,GAEME,UAA4B;GAChC,AAAIC,EAAUpB,EAAM,uBAAuB,MAGvCqB,EAAYrB,EAAM,uBAAuB,IAC3CO,EAAW,IAGbP,EAAM,wBAAwB;EAChC;E,OAEAsB,QACQtB,EAAM,eACX,GAAU,MAAa;GACtB,AAAIuB,MAAaC,KAAYH,EAAYE,CAAQ,MAGjD,EAAkB,QAAQA;EAC5B,CACF,GAEAzB,EAAa,EACX,UAAUS,EACZ,CAAC,I,2BAKSN,EAAA,eADRb,EAAA,GAAAG,EAMEC,GAAA;;GAJC,SAASS,EAAA;GACT,cAAYA,EAAA;GACZ,SAAOkB;GACP,QAAML;E,0CAETrB,EAIEqC,EAAA,QAAA,aAAA,EADC,OAAK,EAAA,SAAaC,QAAoBxB,EAAU,GAAA,CAAA,MAAA,CAAA,EAAA,E,wBAEnDnB,EAAA,GAAAC,EASE,SAAA;GARI,SAAA;GAAJ,KAAIc;GACH,KAAKE,EAAA;GACL,QAAQJ,EAAA;GACR,UAAUA,EAAA;GACX,QAAA;GACA,UAAS;GACT,MAAK;GACJ,UAAQe"}
+{"version":3,"file":"AFileInput.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_Fragment","_createBlock","AFileDropzone","_renderSlot","AFileDropzone_default","_hoisted_1","BLOCK_DOUBLE_CLICK_MS","AFileInput_vue_vue_type_script_setup_true_lang_default","__expose","__emit","props","__props","emit","inputRef","ref","fileInputKeyLocal","blockDoubleClick","clickInput","useFormatAndSizeCheck","useAlerts","validateData","files","checked","checkFormatsAndSizes","onDropzoneDrop","showWarningT","onInputFileChange","event","payload","onFileDropzoneClick","isBoolean","isUndefined","watch","newValue","oldValue","openBlock","createElementBlock","Fragment","createBlock","renderSlot","_ctx","withModifiers"],"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":";;;;;;A,gCAuCMQ,IAAwB,K;;;;;;;;;;;;;;;;;;;;;;;;;;EA5B9B,IAAMI,IAAQC,GAuBRC,IAAOH,GAOPI,IAAWC,EAAkC,KAAA,CAAS,GAEtDC,IAAoBD,EAAIJ,EAAM,gBAAgB,CAAC,GAC/CM,IAAmBF,EAAI,EAAK,GAE5BG,UAAmB;GACvB,AAAID,EAAiB,UAAU,OAG/B,EAAiB,QAAQ,IACzBH,EAAS,OAAO,MAAM,GACtB,iBAAiB;IACf,EAAiB,QAAQ;GAC3B,GAAGP,CAAqB;EAC1B,GAEM,EAAE,4BAAyBY,QACzBR,EAAM,cACNA,EAAM,QACd,GACM,EAAE,oBAAiBS,EAAU,GAE7BC,KAAgB,MAAkB;GACtC,IAAI,CAACV,EAAM,YAAYW,EAAM,SAAS,GAAG;IACvC,IAAMC,IAAUC,EAAqB,CAACF,EAAM,EAAG,CAAC;IAChD,EAAK,cAAcC,CAAO;IAC1B;GACF;GACA,IAAMA,IAAUC,EAAqBF,CAAK;GAC1C,EAAK,cAAcC,CAAO;EAC5B,GAEME,KAAkB,MAAkB;GACxC,IAAId,EAAM,UAAU;IAClB,EAAaW,CAAK;IAClB;GACF;GAGA,IAAMC,IAAUC,EAAqBF,CAAK;GAE1C,AADIC,EAAQ,SAAS,KAAGG,EAAa,kCAAkC,GACvEb,EAAK,cAAcU,EAAQ,MAAM,GAAG,CAAC,CAAC;EACxC,GAEMI,KAAqB,MAAmB;GAC5C,IAAMC,IAAQC;GAKd,AAJAhB,EAAK,UAAUe,CAAK,GACpBP,EAAa,MAAM,KAAKO,EAAM,QAAQ,SAAS,CAAC,CAAC,CAAC,GAG9CA,EAAM,WAAQ,EAAM,OAAO,QAAQ;EACzC,GAEME,UAA4B;GAChC,AAAIC,EAAUpB,EAAM,uBAAuB,MAGvCqB,EAAYrB,EAAM,uBAAuB,IAC3CO,EAAW,IAGbP,EAAM,wBAAwB;EAChC;E,OAEAsB,QACQtB,EAAM,eACX,GAAU,MAAa;GACtB,AAAIuB,MAAaC,KAAYH,EAAYE,CAAQ,MAGjD,EAAkB,QAAQA;EAC5B,CACF,GAEAzB,EAAa,EACX,UAAUS,EACZ,CAAC,I,2BAKSN,EAAA,eADRb,EAAA,GAAAG,EAMEC,GAAA;;GAJC,SAASS,EAAA;GACT,cAAYA,EAAA;GACZ,SAAOkB;GACP,QAAML;E,0CAETrB,EAIEqC,EAAA,QAAA,aAAA,EADC,OAAK,EAAA,SAAaC,QAAoBxB,EAAU,GAAA,CAAA,MAAA,CAAA,EAAA,E,wBAEnDnB,EAAA,GAAAC,EASE,SAAA;GARI,SAAA;GAAJ,KAAIc;GACH,KAAKE,EAAA;GACL,QAAQJ,EAAA;GACR,UAAUA,EAAA;GACX,QAAA;GACA,UAAS;GACT,MAAK;GACJ,UAAQe"}

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

@@ -1 +1 @@
-{"version":3,"file":"AFileInputDialog.js","names":["_sfc_main","AFileInputDialog_vue_vue_type_script_setup_true_lang_default","AFileInputDialog_default"],"sources":["../../../../../src/domains/ui/file/components/AFileInputDialog.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport ADialogToolbar from '@/domains/ui/components/ADialogToolbar.vue'\nimport { useI18n } from 'vue-i18n'\nimport AFileInput from '@/domains/ui/file/components/AFileInput.vue'\nimport type { VBtn } from 'vuetify/components'\nimport type { InputFileChangeEvent } from '@/shared/types/ChangeEvent'\nimport { nextTick, ref } from 'vue'\nimport ARow from '@/domains/ui/components/ARow.vue'\n\n/**\n * For accept and maxSizes check docs {@see useFormatAndSizeCheck}\n */\nwithDefaults(\n  defineProps<{\n    fileInputKey?: number | undefined\n    accept?: string | undefined\n    maxSizes?: Record<string, number> | undefined\n    multiple?: boolean\n    toolbarT?: string\n  }>(),\n  {\n    fileInputKey: undefined,\n    accept: undefined,\n    maxSizes: undefined,\n    multiple: false,\n    toolbarT: 'common.button.upload',\n  }\n)\n\nconst emit = defineEmits<{\n  (e: 'change', event: InputFileChangeEvent): void\n  (e: 'filesInput', files: File[]): void\n}>()\n\nconst modelValue = defineModel<boolean>({ default: false, required: false })\n\nconst onClose = () => {\n  modelValue.value = false\n}\n\nconst { t } = useI18n()\n\nconst fileInputComponent = ref<InstanceType<typeof AFileInput> | null>(null)\n\nconst onFilesInput = (files: File[]) => {\n  emit('filesInput', files)\n  modelValue.value = false\n}\n\n// Opens the file choice straight away, as a click on the input would. The input lives in the dialog, so the dialog\n// opens first; the choice still comes within the same click, which the browser requires.\nconst activate = async () => {\n  modelValue.value = true\n  await nextTick()\n  fileInputComponent.value?.activate()\n}\n\ndefineExpose({\n  activate,\n})\n</script>\n\n<template>\n  <VDialog\n    :model-value=\"modelValue\"\n    persistent\n    :max-width=\"500\"\n    @update:model-value=\"modelValue = $event\"\n  >\n    <template #activator=\"{ props: dialogProps }\">\n      <slot\n        name=\"activator\"\n        :props=\"dialogProps\"\n      >\n        <VBtn\n          v-bind=\"dialogProps\"\n          :text=\"t('common.button.open')\"\n        />\n      </slot>\n    </template>\n    <VCard\n      v-if=\"modelValue\"\n      data-cy=\"create-panel\"\n    >\n      <ADialogToolbar @cancel=\"onClose\">\n        <slot name=\"title\">\n          {{ t(toolbarT) }}\n        </slot>\n      </ADialogToolbar>\n      <VCardText>\n        <ARow>\n          <AFileInput\n            ref=\"fileInputComponent\"\n            :file-input-key=\"fileInputKey\"\n            :accept=\"accept\"\n            :max-sizes=\"maxSizes\"\n            :multiple=\"multiple\"\n            use-dropzone\n            @files-input=\"onFilesInput\"\n            @change=\"emit('change', $event)\"\n          />\n        </ARow>\n      </VCardText>\n      <VCardActions>\n        <VSpacer />\n        <ABtnTertiary\n          data-cy=\"button-close\"\n          @click.stop=\"onClose\"\n        >\n          {{ t('common.button.close') }}\n        </ABtnTertiary>\n      </VCardActions>\n    </VCard>\n  </VDialog>\n</template>\n"],"mappings":""}
+{"version":3,"file":"AFileInputDialog.js","names":["_sfc_main","AFileInputDialog_vue_vue_type_script_setup_true_lang_default","AFileInputDialog_default"],"sources":["../../../../../src/domains/ui/file/components/AFileInputDialog.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport ADialogToolbar from '@/domains/ui/components/ADialogToolbar.vue'\nimport { useI18n } from 'vue-i18n'\nimport AFileInput from '@/domains/ui/file/components/AFileInput.vue'\nimport type { VBtn } from 'vuetify/components'\nimport type { InputFileChangeEvent } from '@/shared/types/ChangeEvent'\nimport { nextTick, ref } from 'vue'\nimport ARow from '@/domains/ui/components/ARow.vue'\n\n/**\n * For accept and maxSizes check docs {@see useFormatAndSizeCheck}\n */\nwithDefaults(\n  defineProps<{\n    fileInputKey?: number | undefined\n    accept?: string | undefined\n    maxSizes?: Record<string, number> | undefined\n    multiple?: boolean\n    toolbarT?: string\n  }>(),\n  {\n    fileInputKey: undefined,\n    accept: undefined,\n    maxSizes: undefined,\n    multiple: false,\n    toolbarT: 'common.button.upload',\n  }\n)\n\nconst emit = defineEmits<{\n  (e: 'change', event: InputFileChangeEvent): void\n  (e: 'filesInput', files: File[]): void\n}>()\n\nconst modelValue = defineModel<boolean>({ default: false, required: false })\n\nconst onClose = () => {\n  modelValue.value = false\n}\n\nconst { t } = useI18n()\n\nconst fileInputComponent = ref<InstanceType<typeof AFileInput> | null>(null)\n\nconst onFilesInput = (files: File[]) => {\n  emit('filesInput', files)\n  modelValue.value = false\n}\n\n// Opens the file picker like a click on the input. The input lives in the dialog, so the dialog opens first.\n// The picker must still open within the same click, which the browser requires.\nconst activate = async () => {\n  modelValue.value = true\n  await nextTick()\n  fileInputComponent.value?.activate()\n}\n\ndefineExpose({\n  activate,\n})\n</script>\n\n<template>\n  <VDialog\n    :model-value=\"modelValue\"\n    persistent\n    :max-width=\"500\"\n    @update:model-value=\"modelValue = $event\"\n  >\n    <template #activator=\"{ props: dialogProps }\">\n      <slot\n        name=\"activator\"\n        :props=\"dialogProps\"\n      >\n        <VBtn\n          v-bind=\"dialogProps\"\n          :text=\"t('common.button.open')\"\n        />\n      </slot>\n    </template>\n    <VCard\n      v-if=\"modelValue\"\n      data-cy=\"create-panel\"\n    >\n      <ADialogToolbar @cancel=\"onClose\">\n        <slot name=\"title\">\n          {{ t(toolbarT) }}\n        </slot>\n      </ADialogToolbar>\n      <VCardText>\n        <ARow>\n          <AFileInput\n            ref=\"fileInputComponent\"\n            :file-input-key=\"fileInputKey\"\n            :accept=\"accept\"\n            :max-sizes=\"maxSizes\"\n            :multiple=\"multiple\"\n            use-dropzone\n            @files-input=\"onFilesInput\"\n            @change=\"emit('change', $event)\"\n          />\n        </ARow>\n      </VCardText>\n      <VCardActions>\n        <VSpacer />\n        <ABtnTertiary\n          data-cy=\"button-close\"\n          @click.stop=\"onClose\"\n        >\n          {{ t('common.button.close') }}\n        </ABtnTertiary>\n      </VCardActions>\n    </VCard>\n  </VDialog>\n</template>\n"],"mappings":""}