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

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

@@ -0,0 +1,240 @@
+import { isDefined as e, isNull as t, isUndefined as n } from "../../../../shared/utils/common.js";
+import { useValidate as r } from "../../../../shared/validators/vuelidate/useValidate.js";
+import ee from "./TimePicker.js";
+import { applyCalendarDate as i, emptyBaseValue as te, formatDisplay as a, isSameValue as ne, parseModel as o, parseTyped as s, placeholderFor as c, serialize as re, toCalendarDate as ie, todayValue as l } from "../../../../shared/utils/datetimePickerValue.js";
+import { computed as u, createBlock as d, createCommentVNode as f, createElementBlock as p, createElementVNode as m, createSlots as h, createTextVNode as ae, createVNode as g, defineComponent as _, mergeProps as v, nextTick as y, openBlock as b, ref as x, renderSlot as S, toDisplayString as C, toRaw as w, unref as T, useTemplateRef as E, watch as D, withCtx as O, withDirectives as oe, withKeys as k, withModifiers as A } from "vue";
+import { useI18n as se } from "vue-i18n";
+import { VIcon as j } from "vuetify/components/VIcon";
+import { VCard as ce } from "vuetify/components/VCard";
+import { VTextField as le } from "vuetify/components/VTextField";
+import { Tooltip as ue } from "vuetify/directives";
+import { VBtn as de } from "vuetify/components/VBtn";
+import { VMenu as fe } from "vuetify/components/VMenu";
+import pe from "@vuelidate/core";
+import { VDatePicker as me } from "vuetify/components/VDatePicker";
+//#region src/domains/ui/datetime/components/ADatetimePicker.vue?vue&type=script&setup=true&lang.ts
+var M = { class: "d-flex" }, N = { class: "ml-1" }, P = {
+	key: 0,
+	class: "a-required-mark"
+}, F = /*@__PURE__*/ _({
+	__name: "ADatetimePicker",
+	props: {
+		modelValue: {},
+		type: { default: "datetime" },
+		label: { default: "" },
+		hideLabel: {
+			type: Boolean,
+			default: !1
+		},
+		clearable: {
+			type: Boolean,
+			default: !1
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		hideDetails: {
+			type: Boolean,
+			default: !1
+		},
+		required: {
+			type: Boolean,
+			default: !1
+		},
+		hideSetToNow: {
+			type: Boolean,
+			default: !1
+		},
+		placeholder: { default: "" },
+		dataCy: { default: "" },
+		defaultValue: { default: null },
+		errorMessages: { default: void 0 },
+		lastMinuteMoment: {
+			type: Boolean,
+			default: !1
+		},
+		readonly: {
+			type: Boolean,
+			default: void 0
+		}
+	},
+	emits: [
+		"blur",
+		"focus",
+		"update:modelValue",
+		"open",
+		"close",
+		"afterClear"
+	],
+	setup(_, { emit: F }) {
+		let I = _, L = F, R = x(!1), z = x(0), B = x(0), V = E("timePickerInstance"), H = E("inputInstance"), U = E("confirmRefButton"), W = x(""), G = x(null), K = x(null), q = x(null), { t: J } = se(), he = u(() => I.placeholder.length ? I.placeholder : c(I.type)), { requiredIf: ge } = r(), _e = u(() => ({ textFieldValue: { required: ge(I.required) } })), Y = pe(_e, { textFieldValue: W }), X = (e) => {
+			e !== I.modelValue && L("update:modelValue", e);
+		}, ve = (e) => {
+			t(e) || (I.type !== "date" && (t(K.value) || e.hour() !== K.value.hours || e.minute() !== K.value.minutes) && (K.value = {
+				hours: e.hour(),
+				minutes: e.minute()
+			}), (t(G.value) || e.year() !== G.value.getFullYear() || e.month() !== G.value.getMonth() || e.date() !== G.value.getDate()) && (G.value = ie(e, I.type)));
+		};
+		D(() => I.modelValue, (e, t) => {
+			e !== t && (q.value = o(e, I.type, I.lastMinuteMoment));
+		}, { immediate: !0 });
+		let ye = (e, n) => t(e) ? n : i(n, e, I.type), be = (e, n) => t(e) || I.type === "date" ? n : n.set("hour", e.hours).set("minute", e.minutes);
+		D([K, G], ([e, n]) => {
+			let r = null;
+			r = t(q.value) ? o(I.modelValue, I.type, I.lastMinuteMoment) ?? te(I.type, I.lastMinuteMoment) : q.value, r = be(e, r), r = ye(n, r), !r.isSame(w(q.value)) && (q.value = r);
+		}), D(q, (e) => {
+			if (t(e)) {
+				W.value = "", X(null);
+				return;
+			}
+			let n = re(e, I.type);
+			W.value = a(e, I.type), ve(e), X(n);
+		}, { immediate: !0 }), D(R, (e) => {
+			e ? (Z(), t(q.value) && (t(I.defaultValue) || n(I.defaultValue)) && (q.value = l(I.type, I.lastMinuteMoment)), L("open")) : L("close");
+		});
+		let xe = u(() => e(I.errorMessages) ? I.errorMessages : Y.value.textFieldValue.$errors.length ? [Y.value.textFieldValue.$errors.map((e) => e.$message).join(" ")] : []), Z = () => {
+			let e = W.value.replace(/[^\s\d.:]/g, "").trim();
+			if (e.length === 0 && !I.required) {
+				q.value = o(I.defaultValue, I.type, I.lastMinuteMoment), L("blur");
+				return;
+			}
+			let n = o(I.modelValue, I.type, I.lastMinuteMoment)?.second() ?? 0, r = s(e, I.type, n);
+			t(r) ? (t(q.value) || (W.value = a(q.value, I.type)), Y.value.textFieldValue.$touch(), L("blur")) : (ne(r, w(q.value), I.type) ? W.value = a(r, I.type) : q.value = r, Y.value.textFieldValue.$touch(), L("blur"));
+		}, Q = () => {
+			t(I.defaultValue) || n(I.defaultValue) ? (q.value = null, G.value = null, K.value = null, L("afterClear")) : (q.value = o(I.defaultValue, I.type, I.lastMinuteMoment), L("afterClear"));
+		}, $ = () => {
+			R.value = !1, H.value?.focus(), H.value?.blur(), L("close"), L("blur");
+		}, Se = () => {
+			L("focus");
+		}, Ce = () => {
+			R.value = !R.value;
+		}, we = () => {
+			R.value = !1;
+		}, Te = () => {
+			U.value?.focus();
+		}, Ee = () => {
+			I.type === "date" ? y($) : V.value?.focusHour();
+		}, De = () => {
+			q.value = l(I.type, I.lastMinuteMoment), y(() => {
+				z.value++, B.value++;
+			});
+		};
+		return (e, t) => (b(), d(le, {
+			ref_key: "inputInstance",
+			ref: H,
+			modelValue: W.value,
+			"onUpdate:modelValue": t[4] ||= (e) => W.value = e,
+			"error-messages": xe.value,
+			"persistent-placeholder": !0,
+			placeholder: he.value,
+			class: "a-datetime-picker",
+			"hide-details": _.hideDetails ? !0 : "auto",
+			"data-cy": _.dataCy.length ? _.dataCy : void 0,
+			disabled: _.disabled,
+			readonly: _.readonly,
+			autocomplete: "off",
+			onBlur: Z,
+			onFocus: Se,
+			onKeyup: k(Z, ["enter"])
+		}, h({
+			"append-inner": O(() => [
+				_.clearable && !_.readonly && _.defaultValue !== _.modelValue ? (b(), d(j, {
+					key: 0,
+					class: "a-datetime-picker__clearable-icon",
+					icon: "mdi-close-circle",
+					"aria-label": T(J)("common.button.clear"),
+					onClick: A(Q, ["stop"])
+				}, null, 8, ["aria-label"])) : f("", !0),
+				!_.disabled && !_.readonly ? (b(), d(fe, {
+					key: 1,
+					location: "bottom end",
+					origin: "top end",
+					"close-on-content-click": !1,
+					"model-value": R.value,
+					"onUpdate:modelValue": t[3] ||= (e) => R.value = e
+				}, {
+					activator: O(({ props: e }) => [g(j, v({
+						class: "a-datetime-picker__calendar-icon",
+						icon: "mdi-calendar",
+						size: "small",
+						"aria-label": T(J)("$vuetify.datePicker.title")
+					}, e, {
+						onKeydown: k(A(Ce, ["prevent"]), ["enter", "space"]),
+						onKeyup: t[0] ||= k(A(() => {}, ["stop"]), ["enter"])
+					}), null, 16, ["aria-label", "onKeydown"])]),
+					default: O(() => [R.value ? (b(), d(ce, { key: 0 }, {
+						default: O(() => [
+							oe((b(), d(de, {
+								"aria-label": T(J)("common.button.close"),
+								icon: "",
+								variant: "text",
+								width: 36,
+								height: 36,
+								class: "position-absolute top-0 right-0",
+								onClick: A($, ["stop"])
+							}, {
+								default: O(() => [g(j, {
+									icon: "mdi-close",
+									color: "white"
+								})]),
+								_: 1
+							}, 8, ["aria-label"])), [[ue, T(J)("common.button.close")]]),
+							(b(), d(me, v({
+								key: z.value,
+								modelValue: G.value,
+								"onUpdate:modelValue": t[1] ||= (e) => G.value = e,
+								class: "a-datetime-picker-calendar",
+								color: "primary",
+								"show-adjacent-months": ""
+							}, e.$attrs, { "onUpdate:modelValue": Ee }), null, 16, ["modelValue"])),
+							_.type === "date" ? f("", !0) : (b(), d(ee, {
+								ref_key: "timePickerInstance",
+								ref: V,
+								key: B.value,
+								modelValue: K.value,
+								"onUpdate:modelValue": t[2] ||= (e) => K.value = e,
+								onEnterKeyup: we,
+								onFocusConfirm: Te
+							}, null, 8, ["modelValue"])),
+							m("div", M, [_.hideSetToNow ? f("", !0) : (b(), p("button", {
+								key: 0,
+								type: "button",
+								class: "a-datetime-picker__bottom-button",
+								tabindex: "8",
+								onClick: De
+							}, C(_.type === "date" ? T(J)("common.time.today") : T(J)("common.time.now")), 1)), m("button", {
+								ref_key: "confirmRefButton",
+								ref: U,
+								type: "button",
+								class: "a-datetime-picker__bottom-button",
+								tabindex: "7",
+								onClick: A($, ["stop"])
+							}, C(T(J)("common.button.confirm")), 513)])
+						]),
+						_: 1
+					})) : f("", !0)]),
+					_: 1
+				}, 8, ["model-value"])) : f("", !0),
+				m("div", N, [S(e.$slots, "append-inner", {}, void 0, !0)])
+			]),
+			_: 2
+		}, [_.hideLabel ? void 0 : {
+			name: "label",
+			fn: O(() => [ae(C(_.label), 1), _.required ? (b(), p("span", P)) : f("", !0)]),
+			key: "0"
+		}]), 1032, [
+			"modelValue",
+			"error-messages",
+			"placeholder",
+			"hide-details",
+			"data-cy",
+			"disabled",
+			"readonly"
+		]));
+	}
+});
+//#endregion
+export { F as default };
+
+//# sourceMappingURL=ADatetimePicker.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +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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"}

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

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

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

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

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

@@ -0,0 +1,26 @@
+type __VLS_ModelProps = {
+    'modelValue': null | {
+        hours: number;
+        minutes: number;
+    };
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_ModelProps, {
+    focusHour: () => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: {
+        hours: number;
+        minutes: number;
+    } | null) => any;
+} & {
+    enterKeyup: () => any;
+    focusConfirm: () => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: {
+        hours: number;
+        minutes: number;
+    } | null) => any) | undefined;
+    onEnterKeyup?: (() => any) | undefined;
+    onFocusConfirm?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,151 @@
+import { computed as e, createElementBlock as t, createElementVNode as n, createVNode as r, defineComponent as i, mergeModels as a, nextTick as o, openBlock as s, ref as c, unref as l, useModel as u, useTemplateRef as d, vModelText as f, watch as p, withCtx as m, withDirectives as h, withKeys as g } from "vue";
+import { useI18n as _ } from "vue-i18n";
+import { VIcon as v } from "vuetify/components/VIcon";
+import { VBtn as y } from "vuetify/components/VBtn";
+//#region src/domains/ui/datetime/components/TimePicker.vue?vue&type=script&setup=true&lang.ts
+var b = { class: "a-datetime-picker-time" }, x = { class: "a-datetime-picker-time__item a-datetime-picker-time__item" }, S = ["aria-label"], C = { class: "a-datetime-picker-time__arrows" }, w = { class: "a-datetime-picker-time__item" }, T = ["aria-label"], E = { class: "a-datetime-picker-time__arrows" }, D = /*@__PURE__*/ i({
+	__name: "TimePicker",
+	props: {
+		modelValue: { required: !0 },
+		modelModifiers: {}
+	},
+	emits: /*@__PURE__*/ a(["enterKeyup", "focusConfirm"], ["update:modelValue"]),
+	setup(i, { expose: a, emit: D }) {
+		let O = D, k = u(i, "modelValue"), A = c(k.value ? String(k.value.hours).padStart(2, "0") : "12"), j = c(k.value ? String(k.value.minutes).padStart(2, "0") : "00"), M = d("hoursRefInput"), N = d("minutesRefInput"), P = e({
+			get: () => A.value,
+			set: (e) => {
+				let t = String(e).replace(/[^0-9]/g, "");
+				t && parseInt(t) > 23 ? (A.value = "23", o(() => N.value?.focus())) : (t.length > 2 && (t = t.slice(0, 2)), A.value = t, t.length === 2 && o(() => N.value?.focus()));
+			}
+		}), F = e({
+			get: () => j.value,
+			set: (e) => {
+				let t = String(e).replace(/[^0-9]/g, "");
+				t && parseInt(t) > 59 ? (j.value = "59", O("focusConfirm")) : (t.length > 2 && (t = t.slice(0, 2)), j.value = t, t.length === 2 && O("focusConfirm"));
+			}
+		}), I = async (e) => {
+			let t = e.target;
+			await o(), t?.select();
+		}, L = () => {
+			let e = parseInt(A.value || "0");
+			A.value = e >= 0 && e <= 23 ? String(e).padStart(2, "0") : "00";
+		}, R = () => {
+			let e = parseInt(j.value || "0");
+			j.value = e >= 0 && e <= 59 ? String(e).padStart(2, "0") : "00";
+		}, z = () => {
+			L(), O("enterKeyup");
+		}, B = () => {
+			R(), O("enterKeyup");
+		}, V = () => {
+			let e = parseInt(A.value || "0"), t = isNaN(e) ? 1 : (e + 1) % 24;
+			A.value = String(t).padStart(2, "0");
+		}, H = () => {
+			let e = parseInt(A.value || "0"), t = isNaN(e) ? 23 : (e - 1 + 24) % 24;
+			A.value = String(t).padStart(2, "0");
+		}, U = () => {
+			let e = parseInt(j.value || "0"), t = parseInt(A.value || "0");
+			if (isNaN(e)) j.value = "01";
+			else if (e === 59) {
+				j.value = "00";
+				let e = isNaN(t) ? 1 : (t + 1) % 24;
+				A.value = String(e).padStart(2, "0");
+			} else {
+				let t = e + 1;
+				j.value = String(t).padStart(2, "0");
+			}
+		}, W = () => {
+			let e = parseInt(j.value || "0"), t = parseInt(A.value || "0");
+			if (isNaN(e)) j.value = "59";
+			else if (e === 0) {
+				j.value = "59";
+				let e = isNaN(t) ? 23 : (t - 1 + 24) % 24;
+				A.value = String(e).padStart(2, "0");
+			} else {
+				let t = e - 1;
+				j.value = String(t).padStart(2, "0");
+			}
+		};
+		p([A, j], ([e, t], [n, r]) => {
+			if (e === n && t === r) return;
+			let i = parseInt(e ?? (k.value ? k.value.hours.toString() : "12")), a = parseInt(t ?? (k.value ? k.value.minutes.toString() : "0"));
+			i >= 0 && i <= 23 && a >= 0 && a <= 59 && (k.value = {
+				hours: i,
+				minutes: a
+			});
+		}), a({ focusHour: () => {
+			M.value?.focus();
+		} });
+		let { t: G } = _();
+		return (e, i) => (s(), t("div", b, [
+			n("div", x, [h(n("input", {
+				ref_key: "hoursRefInput",
+				ref: M,
+				"onUpdate:modelValue": i[0] ||= (e) => P.value = e,
+				class: "a-datetime-picker-time__input a-datetime-picker-time__input--hours",
+				type: "text",
+				"aria-label": l(G)("$vuetify.timePicker.hour"),
+				tabindex: "1",
+				min: "0",
+				max: "23",
+				onFocus: I,
+				onBlur: L,
+				onKeyup: g(z, ["enter"])
+			}, null, 40, S), [[f, P.value]]), n("div", C, [r(y, {
+				tabindex: "-1",
+				variant: "text",
+				class: "a-datetime-picker-time__arrow-up",
+				"aria-label": l(G)("common.button.increaseHours"),
+				onClick: V
+			}, {
+				default: m(() => [r(v, { icon: "mdi-chevron-up" })]),
+				_: 1
+			}, 8, ["aria-label"]), r(y, {
+				tabindex: "-1",
+				variant: "text",
+				class: "a-datetime-picker-time__arrow-down",
+				"aria-label": l(G)("common.button.decreaseHours"),
+				onClick: H
+			}, {
+				default: m(() => [r(v, { icon: "mdi-chevron-down" })]),
+				_: 1
+			}, 8, ["aria-label"])])]),
+			i[2] ||= n("span", { class: "a-datetime-picker-time__separator" }, ":", -1),
+			n("div", w, [h(n("input", {
+				ref_key: "minutesRefInput",
+				ref: N,
+				"onUpdate:modelValue": i[1] ||= (e) => F.value = e,
+				class: "a-datetime-picker-time__input a-datetime-picker-time__input--minutes",
+				type: "text",
+				"aria-label": l(G)("$vuetify.timePicker.minute"),
+				tabindex: "2",
+				min: "0",
+				max: "59",
+				onFocus: I,
+				onBlur: R,
+				onKeyup: g(B, ["enter"])
+			}, null, 40, T), [[f, F.value]]), n("div", E, [r(y, {
+				tabindex: "-1",
+				variant: "text",
+				class: "a-datetime-picker-time__arrow-up",
+				"aria-label": l(G)("common.button.increaseMinutes"),
+				onClick: U
+			}, {
+				default: m(() => [r(v, { icon: "mdi-chevron-up" })]),
+				_: 1
+			}, 8, ["aria-label"]), r(y, {
+				tabindex: "-1",
+				variant: "text",
+				class: "a-datetime-picker-time__arrow-down",
+				"aria-label": l(G)("common.button.decreaseMinutes"),
+				onClick: W
+			}, {
+				default: m(() => [r(v, { icon: "mdi-chevron-down" })]),
+				_: 1
+			}, 8, ["aria-label"])])])
+		]));
+	}
+});
+//#endregion
+export { D as default };
+
+//# sourceMappingURL=TimePicker.vue_vue_type_script_setup_true_lang.js.map

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

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

package/dist/domains/ui/datetime/composables/remainingTime.d.ts

@@ -0,0 +1,4 @@
+export declare function useRemainingTime(): {
+    remainingTimeShort: (seconds: number) => string;
+    remainingTimeLong: (seconds: number) => string;
+};

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

@@ -0,0 +1,17 @@
+import { useI18n as e } from "vue-i18n";
+//#region src/domains/ui/datetime/composables/remainingTime.ts
+var t = 60, n = 3600, r = 86400;
+function i() {
+	let { t: i } = e(), a = (e, a) => {
+		let o = a ? "common.time.short." : "common.time.long.";
+		return e > r ? i(o + "remainingDays", { value: Math.floor(e / r) }) : e > n ? i(o + "remainingHours", { value: Math.floor(e / n) }) : e > t ? i(o + "remainingMinutes", { value: Math.floor(e / t) }) : i(o + "remainingSeconds", { value: e });
+	};
+	return {
+		remainingTimeShort: (e) => a(e, !0),
+		remainingTimeLong: (e) => a(e, !1)
+	};
+}
+//#endregion
+export { i as useRemainingTime };
+
+//# sourceMappingURL=remainingTime.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"remainingTime.js","names":["MINUTE_IN_SECONDS","HOUR_IN_SECONDS","DAY_IN_SECONDS","useRemainingTime","useI18n","remainingTime","prefix","short","seconds","t"],"sources":["../../../../../src/domains/ui/datetime/composables/remainingTime.ts"],"sourcesContent":["import { useI18n } from 'vue-i18n'\n\nconst MINUTE_IN_SECONDS = 60\nconst HOUR_IN_SECONDS = 3600\nconst DAY_IN_SECONDS = 86400\n\nexport function useRemainingTime() {\n  const { t } = useI18n()\n\n  const remainingTime = (seconds: number, short: boolean): string => {\n    const prefix = short ? 'common.time.short.' : 'common.time.long.'\n    if (seconds > DAY_IN_SECONDS) {\n      return t(prefix + 'remainingDays', { value: Math.floor(seconds / DAY_IN_SECONDS) })\n    }\n    if (seconds > HOUR_IN_SECONDS) {\n      return t(prefix + 'remainingHours', { value: Math.floor(seconds / HOUR_IN_SECONDS) })\n    }\n    if (seconds > MINUTE_IN_SECONDS) {\n      return t(prefix + 'remainingMinutes', { value: Math.floor(seconds / MINUTE_IN_SECONDS) })\n    }\n    return t(prefix + 'remainingSeconds', { value: seconds })\n  }\n\n  const remainingTimeShort = (seconds: number): string => {\n    return remainingTime(seconds, true)\n  }\n\n  const remainingTimeLong = (seconds: number): string => {\n    return remainingTime(seconds, false)\n  }\n\n  return {\n    remainingTimeShort,\n    remainingTimeLong,\n  }\n}\n"],"mappings":";;AAEA,IAAMA,IAAoB,IACpBC,IAAkB,MAClBC,IAAiB;AAEvB,SAAgBC,IAAmB;CACjC,IAAM,EAAE,SAAMC,EAAQ,GAEhBC,KAAiB,GAAiB,MAA2B;EACjE,IAAMC,IAASC,IAAQ,uBAAuB;EAU9C,OATIC,IAAUN,IACLO,EAAEH,IAAS,iBAAiB,EAAE,OAAO,KAAK,MAAME,IAAUN,CAAc,EAAE,CAAC,IAEhFM,IAAUP,IACLQ,EAAEH,IAAS,kBAAkB,EAAE,OAAO,KAAK,MAAME,IAAUP,CAAe,EAAE,CAAC,IAElFO,IAAUR,IACLS,EAAEH,IAAS,oBAAoB,EAAE,OAAO,KAAK,MAAME,IAAUR,CAAiB,EAAE,CAAC,IAEnFS,EAAEH,IAAS,oBAAoB,EAAE,OAAOE,EAAQ,CAAC;CAC1D;CAUA,OAAO;EACL,qBAT0B,MACnBH,EAAcG,GAAS,EAAI;EASlC,oBANyB,MAClBH,EAAcG,GAAS,EAAK;CAMrC;AACF"}

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

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

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

@@ -0,0 +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":""}

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

@@ -0,0 +1,31 @@
+/**
+ * For accept and maxSizes check docs {@see useFormatAndSizeCheck}
+ */
+type __VLS_Props = {
+    variant?: 'fill' | 'default' | 'fullscreen';
+    accept?: string | undefined;
+    maxSizes?: Record<string, number> | undefined;
+    disabled?: boolean;
+    transparent?: boolean;
+    size?: 'small' | 'default' | 'large';
+    hoverOnly?: boolean;
+    hideText?: boolean;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    click: () => any;
+    drop: (files: File[]) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClick?: (() => any) | undefined;
+    onDrop?: ((files: File[]) => any) | undefined;
+}>, {
+    disabled: boolean;
+    size: "small" | "default" | "large";
+    accept: string;
+    variant: "fill" | "default" | "fullscreen";
+    transparent: boolean;
+    maxSizes: Record<string, number>;
+    hoverOnly: boolean;
+    hideText: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;