@nextcloud/vue 9.0.0-rc.2 → 9.0.0-rc.4

package/dist/chunks/{NcDateTimePicker-DYNOGc6A.mjs → NcDateTimePicker-CKOTExmB.mjs}

@@ -1,13 +1,15 @@
-import '../assets/NcDateTimePicker-pmbCzZnb.css';
-import { defineComponent, mergeModels, useModel, computed, createBlock, openBlock, unref, mergeProps, createSlots, withCtx, createVNode } from "vue";
-import { c as mdiChevronUp, d as mdiChevronDown, m as mdiChevronRight, e as mdiChevronLeft, f as mdiClock, g as mdiClose, h as mdiCalendarBlank } from "./mdi-CR-3gwdl.mjs";
+import '../assets/NcDateTimePicker-_rRYVngX.css';
+import { defineComponent, mergeModels, useModel, useTemplateRef, computed, createElementBlock, openBlock, createVNode, createBlock, unref, mergeProps, createSlots, withCtx, createTextVNode, toDisplayString, Teleport, createElementVNode } from "vue";
+import { l as mdiChevronUp, n as mdiChevronDown, c as mdiChevronRight, o as mdiChevronLeft, p as mdiClock, q as mdiCalendarBlank, b as mdiClose } from "./mdi-D6fu5i4r.mjs";
 import { getCanonicalLocale, getDayNamesMin, getFirstDay, getDayNames } from "@nextcloud/l10n";
-import { r as register, a as t } from "./_l10n-Bg-fZ9R0.mjs";
+import { r as register, a as t } from "./_l10n-tXci8WM1.mjs";
 import VueDatePicker from "@vuepic/vue-datepicker";
-import { N as NcIconSvgWrapper } from "./NcIconSvgWrapper-BOiCKv0b.mjs";
-import { _ as _sfc_main$1 } from "./NcTimezonePicker.vue_vue_type_script_setup_true_lang-T3gPr-FV.mjs";
+import { N as NcButton } from "./NcButton-yN4vYgXb.mjs";
+import { N as NcIconSvgWrapper } from "./NcIconSvgWrapper-CprKb_SE.mjs";
+import { _ as _sfc_main$1 } from "./NcTimezonePicker.vue_vue_type_script_setup_true_lang-BoH1Njbp.mjs";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
 register();
+const _hoisted_1 = { class: "vue-date-time-picker__wrapper" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "NcDateTimePicker",
   props: /* @__PURE__ */ mergeModels({
@@ -19,7 +21,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     format: { type: [String, Function], default: void 0 },
     locale: { default: getCanonicalLocale() },
     minuteStep: { default: 10 },
-    modelValue: { default: void 0 },
+    modelValue: { default: null },
     placeholder: { default: void 0 },
     showTimezoneSelect: { type: Boolean },
     showWeekNumber: { type: Boolean },
@@ -32,9 +34,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   setup(__props, { emit: __emit }) {
     const props = __props;
     const timezoneId = useModel(__props, "timezoneId");
+    const target = useTemplateRef("target");
+    const picker = useTemplateRef("picker");
     const emit = __emit;
     const value = computed(() => {
-      if (props.modelValue === void 0 && props.clearable) {
+      if (props.modelValue === null && props.clearable) {
         return null;
       }
       if (props.type === "week") {
@@ -203,97 +207,148 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       monthPicker: (overlay) => overlay ? t("Month picker overlay") : t("Month picker"),
       yearPicker: (overlay) => overlay ? t("Year picker overlay") : t("Year picker")
     }));
+    function selectDate() {
+      picker.value.selectDate();
+    }
+    function cancelSelection() {
+      picker.value.closeMenu();
+    }
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(VueDatePicker), mergeProps({
-        "aria-labels": ariaLabels.value,
-        "auto-apply": !_ctx.confirm,
-        class: "vue-date-time-picker",
-        "cancel-text": unref(t)("Cancel"),
-        clearable: _ctx.clearable,
-        "day-names": unref(dayNames),
-        placeholder: _ctx.placeholder ?? placeholderFallback.value,
-        format: realFormat.value,
-        locale: _ctx.locale,
-        "minutes-increment": _ctx.minuteStep,
-        "model-value": value.value,
-        "now-button-label": unref(t)("Now"),
-        "select-text": unref(t)("Pick"),
-        "six-weeks": "fair",
-        teleport: _ctx.appendToBody || void 0,
-        "text-input": "",
-        "week-num-name": unref(weekNumName),
-        "week-numbers": _ctx.showWeekNumber ? { type: "iso" } : void 0,
-        "week-start": unref(weekStart)
-      }, pickerType.value, { "onUpdate:modelValue": onUpdateModelValue }), createSlots({
-        "input-icon": withCtx(() => [
-          createVNode(NcIconSvgWrapper, {
-            path: unref(mdiCalendarBlank),
-            size: 20
-          }, null, 8, ["path"])
-        ]),
-        "clear-icon": withCtx(() => [
-          createVNode(NcIconSvgWrapper, {
-            inline: "",
-            path: unref(mdiClose),
-            size: 20
-          }, null, 8, ["path"])
-        ]),
-        "clock-icon": withCtx(() => [
-          createVNode(NcIconSvgWrapper, {
-            inline: "",
-            path: unref(mdiClock),
-            size: 20
-          }, null, 8, ["path"])
-        ]),
-        "arrow-left": withCtx(() => [
-          createVNode(NcIconSvgWrapper, {
-            inline: "",
-            path: unref(mdiChevronLeft),
-            size: 20
-          }, null, 8, ["path"])
-        ]),
-        "arrow-right": withCtx(() => [
-          createVNode(NcIconSvgWrapper, {
-            inline: "",
-            path: unref(mdiChevronRight),
-            size: 20
-          }, null, 8, ["path"])
-        ]),
-        "arrow-down": withCtx(() => [
-          createVNode(NcIconSvgWrapper, {
-            inline: "",
-            path: unref(mdiChevronDown),
-            size: 20
-          }, null, 8, ["path"])
-        ]),
-        "arrow-up": withCtx(() => [
-          createVNode(NcIconSvgWrapper, {
-            inline: "",
-            path: unref(mdiChevronUp),
-            size: 20
-          }, null, 8, ["path"])
-        ]),
-        _: 2
-      }, [
-        _ctx.showTimezoneSelect ? {
-          name: "action-extra",
-          fn: withCtx(() => [
-            createVNode(_sfc_main$1, {
-              modelValue: timezoneId.value,
-              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => timezoneId.value = $event),
-              class: "vue-date-time-picker__timezone",
-              "append-to-body": false,
-              "input-label": unref(t)("Timezone")
-            }, null, 8, ["modelValue", "input-label"])
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createVNode(unref(VueDatePicker), mergeProps({
+          ref_key: "picker",
+          ref: picker,
+          "aria-labels": ariaLabels.value,
+          "auto-apply": !_ctx.confirm,
+          class: "vue-date-time-picker",
+          "cancel-text": unref(t)("Cancel"),
+          clearable: _ctx.clearable,
+          "day-names": unref(dayNames),
+          placeholder: _ctx.placeholder ?? placeholderFallback.value,
+          format: realFormat.value,
+          locale: _ctx.locale,
+          "minutes-increment": _ctx.minuteStep,
+          "model-value": value.value,
+          "now-button-label": unref(t)("Now"),
+          "select-text": unref(t)("Pick"),
+          "six-weeks": "fair",
+          teleport: _ctx.appendToBody ? unref(target) || void 0 : false,
+          "text-input": "",
+          "week-num-name": unref(weekNumName),
+          "week-numbers": _ctx.showWeekNumber ? { type: "iso" } : void 0,
+          "week-start": unref(weekStart)
+        }, pickerType.value, { "onUpdate:modelValue": onUpdateModelValue }), createSlots({
+          "action-buttons": withCtx(() => [
+            createVNode(unref(NcButton), {
+              size: "small",
+              variant: "tertiary",
+              onClick: cancelSelection
+            }, {
+              default: withCtx(() => [
+                createTextVNode(toDisplayString(unref(t)("Cancel")), 1)
+              ]),
+              _: 1
+            }),
+            createVNode(unref(NcButton), {
+              size: "small",
+              variant: "primary",
+              onClick: selectDate
+            }, {
+              default: withCtx(() => [
+                createTextVNode(toDisplayString(unref(t)("Pick")), 1)
+              ]),
+              _: 1
+            })
+          ]),
+          "clear-icon": withCtx(({ clear }) => [
+            createVNode(unref(NcButton), {
+              "aria-label": unref(t)("Clear value"),
+              variant: "tertiary-no-background",
+              onClick: clear
+            }, {
+              icon: withCtx(() => [
+                createVNode(NcIconSvgWrapper, {
+                  inline: "",
+                  path: unref(mdiClose),
+                  size: 20
+                }, null, 8, ["path"])
+              ]),
+              _: 2
+            }, 1032, ["aria-label", "onClick"])
+          ]),
+          "input-icon": withCtx(() => [
+            createVNode(NcIconSvgWrapper, {
+              path: unref(mdiCalendarBlank),
+              size: 20
+            }, null, 8, ["path"])
+          ]),
+          "clock-icon": withCtx(() => [
+            createVNode(NcIconSvgWrapper, {
+              inline: "",
+              path: unref(mdiClock),
+              size: 20
+            }, null, 8, ["path"])
+          ]),
+          "arrow-left": withCtx(() => [
+            createVNode(NcIconSvgWrapper, {
+              inline: "",
+              path: unref(mdiChevronLeft),
+              size: 20
+            }, null, 8, ["path"])
+          ]),
+          "arrow-right": withCtx(() => [
+            createVNode(NcIconSvgWrapper, {
+              inline: "",
+              path: unref(mdiChevronRight),
+              size: 20
+            }, null, 8, ["path"])
+          ]),
+          "arrow-down": withCtx(() => [
+            createVNode(NcIconSvgWrapper, {
+              inline: "",
+              path: unref(mdiChevronDown),
+              size: 20
+            }, null, 8, ["path"])
+          ]),
+          "arrow-up": withCtx(() => [
+            createVNode(NcIconSvgWrapper, {
+              inline: "",
+              path: unref(mdiChevronUp),
+              size: 20
+            }, null, 8, ["path"])
           ]),
-          key: "0"
-        } : void 0
-      ]), 1040, ["aria-labels", "auto-apply", "cancel-text", "clearable", "day-names", "placeholder", "format", "locale", "minutes-increment", "model-value", "now-button-label", "select-text", "teleport", "week-num-name", "week-numbers", "week-start"]);
+          _: 2
+        }, [
+          _ctx.showTimezoneSelect ? {
+            name: "action-extra",
+            fn: withCtx(() => [
+              createVNode(_sfc_main$1, {
+                modelValue: timezoneId.value,
+                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => timezoneId.value = $event),
+                class: "vue-date-time-picker__timezone",
+                "append-to-body": false,
+                "input-label": unref(t)("Timezone")
+              }, null, 8, ["modelValue", "input-label"])
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1040, ["aria-labels", "auto-apply", "cancel-text", "clearable", "day-names", "placeholder", "format", "locale", "minutes-increment", "model-value", "now-button-label", "select-text", "teleport", "week-num-name", "week-numbers", "week-start"]),
+        (openBlock(), createBlock(Teleport, {
+          to: "body",
+          disabled: !_ctx.appendToBody
+        }, [
+          createElementVNode("div", {
+            ref_key: "target",
+            ref: target,
+            class: "vue-date-time-picker__wrapper"
+          }, null, 512)
+        ], 8, ["disabled"]))
+      ]);
     };
   }
 });
-const NcDateTimePicker = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-629e70a5"]]);
+const NcDateTimePicker = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-5223cded"]]);
 export {
   NcDateTimePicker as N
 };
-//# sourceMappingURL=NcDateTimePicker-DYNOGc6A.mjs.map
+//# sourceMappingURL=NcDateTimePicker-CKOTExmB.mjs.map

package/dist/chunks/NcDateTimePicker-CKOTExmB.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcDateTimePicker-CKOTExmB.mjs","sources":["../../src/components/NcDateTimePicker/NcDateTimePicker.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\nIn general it is recommended to use the native date picker (see `NcDateTimePickerNative` which is based on `<input type=\"date\">`).\nBut some use cases are not covered by the native date selector, like selecting ranges or selecting a timezone.\nFor those cases this component can be used.\n\n### General examples\n```vue\n<template>\n\t<div class=\"wrapper\">\n\t\t<fieldset class=\"type-select\">\n\t\t\t<legend>Picker mode</legend>\n\t\t\t<NcCheckboxRadioSwitch v-model=\"type\" type=\"radio\" value=\"date\">Date</NcCheckboxRadioSwitch>\n\t\t\t<NcCheckboxRadioSwitch v-model=\"type\" type=\"radio\" value=\"datetime\">Date and time</NcCheckboxRadioSwitch>\n\t\t\t<NcCheckboxRadioSwitch v-model=\"type\" type=\"radio\" value=\"week\">Week</NcCheckboxRadioSwitch>\n\t\t\t<NcCheckboxRadioSwitch v-model=\"type\" type=\"radio\" value=\"month\">Month</NcCheckboxRadioSwitch>\n\t\t\t<NcCheckboxRadioSwitch v-model=\"type\" type=\"radio\" value=\"year\">Year</NcCheckboxRadioSwitch>\n\t\t</fieldset>\n\t\t<NcDateTimePicker\n\t\t\tv-model=\"time\"\n\t\t\t:type />\n\t\t<span>{{ time }}</span>\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\ttype: 'date',\n\t\t\ttime: new Date('2022-10-10 10:10:10'),\n\t\t}\n\t},\n}\n</script>\n<style scoped>\n.wrapper {\n\tdisplay: flex;\n\tflex-direction: column;\n}\n\n.type-select {\n\tdisplay: flex;\n\tflex-direction: row;\n\tflex-wrap: wrap;\n}\n</style>\n```\n\n### Example with confirm button\n\nBy default the date is applied as soon as you select the day in the calendar.\nSometimes - especially when selecting date and time - it is required to only emit the selected date when the flow is finished.\nFor this the `confirm` prop can be used, this will add a confirmation button to the selector.\n\n```vue\n<template>\n\t<span>\n\t\t<NcDateTimePicker\n\t\t\tv-model=\"time\"\n\t\t\ttype=\"datetime\"\n\t\t\tconfirm />\n\t\t{{ time }}\n\t</span>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\ttime: null,\n\t\t\t}\n\t\t},\n\t}\n</script>\n```\n\n### Range picker\n\nThe most common use case for the `NcDateTimePicker` is picking a range, as this is not supported by the native date picker.\n\nWhen selecting the range picker type, the model value type will change from `Date` to `[Date, Date]`.\nMeaning an array with two dates is used, the first date is the range start and the second date is the range end.\n\n```vue\n<template>\n\t<div>\n\t\t<fieldset class=\"type-select\">\n\t\t\t<legend>Picker mode</legend>\n\t\t\t<NcCheckboxRadioSwitch v-model=\"type\" type=\"radio\" value=\"date-range\">Date</NcCheckboxRadioSwitch>\n\t\t\t<NcCheckboxRadioSwitch v-model=\"type\" type=\"radio\" value=\"time-range\">Time</NcCheckboxRadioSwitch>\n\t\t\t<NcCheckboxRadioSwitch v-model=\"type\" type=\"radio\" value=\"datetime-range\">Date and time</NcCheckboxRadioSwitch>\n\t\t</fieldset>\n\n\t\t<NcDateTimePicker\n\t\t\t:key=\"type\"\n\t\t\tv-model=\"time\"\n\t\t\t:type />\n\t\t<div>\n\t\t\t<div>Start: {{ formatDate(time[0]) }}</div>\n\t\t\t<div>End: {{ formatDate(time[1]) }}</div>\n\t\t</div>\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\ttime: [new Date(2025, 3, 18, 12, 30), new Date(2025, 3, 21, 13, 30)],\n\t\t\ttype: 'date-range',\n\t\t}\n\t},\n\tmethods: {\n\t\tformatDate(date) {\n\t\t\tconst dateString = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`\n\t\t\tconst timeString = `${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`\n\t\t\tif (this.type === 'date-range') {\n\t\t\t\treturn dateString\n\t\t\t} else if (this.type === 'time-range') {\n\t\t\t\treturn timeString\n\t\t\t}\n\t\t\treturn `${dateString} ${timeString}`\n\t\t},\n\t},\n}\n</script>\n\n<style scoped>\n.type-select {\n\tdisplay: flex;\n\tflex-direction: row;\n\tflex-wrap: wrap;\n}\n</style>\n```\n\n### Time zone aware date picker\n\nThe datepicker can optionally include a picker for the preferred time zone. The selected time does not factor in the\npicked time zone, but you will have to convert it yourself when necessary.\n\n```vue\n<template>\n\t<span>\n\t\t<NcDateTimePicker\n\t\t\tv-model=\"time\"\n\t\t\ttype=\"datetime\"\n\t\t\tshow-timezone-select\n\t\t\tv-model:timezone-id=\"tz\" /><br>\n\t\t{{ time }} | {{ tz }}\n\t</span>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\ttime: undefined,\n\t\t\ttz: 'Europe/Berlin',\n\t\t}\n\t},\n}\n</script>\n```\n</docs>\n\n<script setup lang=\"ts\">\nimport type {\n\t// The emitted object for time picker\n\tTimeObj as LibraryTimeObject,\n\t// The accepted model value\n\tModelValue as LibraryModelValue,\n\tVueDatePickerProps,\n} from '@vuepic/vue-datepicker'\n\nimport {\n\tmdiCalendarBlank,\n\tmdiChevronDown,\n\tmdiChevronLeft,\n\tmdiChevronRight,\n\tmdiChevronUp,\n\tmdiClock,\n\tmdiClose,\n} from '@mdi/js'\nimport {\n\tgetFirstDay,\n\tgetDayNames,\n\tgetDayNamesMin,\n\tgetCanonicalLocale,\n} from '@nextcloud/l10n'\nimport { computed, useTemplateRef } from 'vue'\nimport { t } from '../../l10n.js'\n\nimport VueDatePicker from '@vuepic/vue-datepicker'\nimport NcButton from '../NcButton/index.ts'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'\nimport NcTimezonePicker from '../NcTimezonePicker/NcTimezonePicker.vue'\n\ntype LibraryFormatOptions = VueDatePickerProps['format']\n\nconst props = withDefaults(defineProps<{\n\t/**\n\t * If set to true the menu will be placed on the `<body>`\n\t * instead of default placement on the picker.\n\t */\n\tappendToBody?: boolean\n\n\t/**\n\t * Aria label for the input box.\n\t *\n\t * @default 'Datepicker input'\n\t */\n\tariaLabel?: string\n\n\t/**\n\t * Aria label for the date picker menu.\n\t *\n\t * @default 'Datepicker menu'\n\t */\n\tariaLabelMenu?: string\n\n\t/**\n\t * Allow to clear the input.\n\t *\n\t * @default false\n\t */\n\tclearable?: boolean\n\n\t/**\n\t * Do not auto-apply the date but require clicking the confirmation button.\n\t * @default false\n\t */\n\tconfirm?: boolean\n\n\t/**\n\t * Preview format for the picker input field.\n\t * Can either be a string of Unicode tokens or a function that takes a Date object\n\t * or for range picker an array of two dates, and returns the formatted date as string.\n\t *\n\t * @default Intl.DateTimeFormat is used to format dates and times\n\t * @see https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table\n\t */\n\tformat?: string | ((date: Date) => string) | ((dates: [Date, Date]) => string)\n\n\t/**\n\t * The locale to use for formatting the shown dates.\n\t * By default the users current Nextcloud locale is used.\n\t */\n\tlocale?: string\n\n\t/**\n\t * Default increment step for minutes in the time picker.\n\t * @default 10\n\t */\n\tminuteStep?: number\n\n\t/**\n\t * The value to initialize, but also two-way bind the selected date. The date is – like the `Date` object in\n\t * JavaScript – tied to UTC. The selected time zone does not have an influence of the selected time and date\n\t * value. You have to translate the time yourself when you want to factor in time zones.\n\t *\n\t * When using the range picker then an array containing the start and end date needs to be passed.\n\t */\n\tmodelValue?: Date | [Date, Date] | null\n\n\t/**\n\t * Optional custom placeholder for the input box.\n\t */\n\tplaceholder?: string\n\n\t/**\n\t * Include a timezone picker within the menu.\n\t * Please note that the dates are still bound to the locale timezone\n\t * and any conversion needs to be done by the app itself.\n\t *\n\t * @default false\n\t */\n\tshowTimezoneSelect?: boolean\n\n\t/**\n\t * Show the ISO week numbers within the calendar.\n\t *\n\t * @default false\n\t */\n\tshowWeekNumber?: boolean\n\n\t/**\n\t * Type of the picker.\n\t * There is some special handling for ranges as those types require a `[Date, Date]` model value.\n\t * - The 'date-range' type will enable a range picker for dates\n\t * - The 'time-range' allows picking a time range.\n\t * - The 'datetime-range' allows picking dates with times assigned.\n\t *\n\t * @default 'date'\n\t */\n\ttype?: 'date' | 'datetime' | 'time' | 'week' | 'month' | 'year' | 'date-range' | 'time-range' | 'datetime-range'\n}>(), {\n\tariaLabel: t('Datepicker input'),\n\tariaLabelMenu: t('Datepicker menu'),\n\tformat: undefined,\n\tlocale: getCanonicalLocale(),\n\tminuteStep: 10,\n\ttimezoneId: 'UTC',\n\tmodelValue: null,\n\t// set by fallbackPlaceholder\n\tplaceholder: undefined,\n\ttype: 'date',\n})\n\n/**\n * The preselected IANA time zone ID for the time zone picker,\n * only relevant in combination with `show-timezone-select`.\n * The prop supports two-way binding through v-model directive.\n *\n * @example `Europe/Berlin`\n * @default 'UTC'\n */\nconst timezoneId = defineModel<string>('timezoneId', { default: 'UTC' })\n\nconst target = useTemplateRef('target')\nconst picker = useTemplateRef('picker')\n\nconst emit = defineEmits<{\n\t/**\n\t * If range picker is enabled then an array containing start and end date are emitted.\n\t * Otherwise the selected date is emitted.\n\t * `null` is emitted if `clearable` is set to `true` and the value was cleared.\n\t */\n\t'update:modelValue': [Date | [Date, Date] | null]\n\t'update:timezoneId': [string]\n}>()\n\n/**\n * Mapping of the model-value prop to the format expected by the library.\n * We do not directly pass the prop and adjust the interface to not transparently wrap the library.\n * This has show as beeing a pain in the past when we need to switch underlying libraries.\n */\nconst value = computed<LibraryModelValue>(() => {\n\tif (props.modelValue === null && props.clearable) {\n\t\treturn null\n\t}\n\n\tif (props.type === 'week') {\n\t\tconst date = props.modelValue instanceof Date ? props.modelValue : new Date()\n\t\tconst end = new Date(date)\n\t\tend.setUTCDate(date.getUTCDate() + 6)\n\t\treturn [date, end]\n\t} else if (props.type === 'year') {\n\t\tconst date = props.modelValue instanceof Date ? props.modelValue : new Date()\n\t\treturn date.getUTCFullYear()\n\t} else if (props.type === 'month') {\n\t\tconst date = props.modelValue instanceof Date ? props.modelValue : new Date()\n\t\treturn { year: date.getUTCFullYear(), month: date.getUTCMonth() }\n\t} else if (props.type === 'time' || props.type === 'time-range') {\n\t\tconst time = [props.modelValue ?? (props.type === 'time-range' ? [new Date(), new Date()] : new Date())].flat()\n\t\t// default time range is 1 hour\n\t\tif (props.modelValue === undefined && props.type === 'time-range') {\n\t\t\ttime[1].setHours(time[1].getHours() + 1)\n\t\t}\n\t\tconst timeValue = time.map((date) => ({\n\t\t\thours: date.getHours(),\n\t\t\tminutes: date.getMinutes(),\n\t\t\tseconds: date.getSeconds(),\n\t\t} as LibraryTimeObject))\n\t\treturn props.type === 'time' ? timeValue[0] : timeValue\n\t} else if (props.type.endsWith('-range')) {\n\t\tif (props.modelValue === undefined) {\n\t\t\tconst start = new Date()\n\t\t\tconst end = new Date(start)\n\t\t\tend.setUTCDate(start.getUTCDate() + 7)\n\t\t\treturn [start, end]\n\t\t}\n\t\treturn props.modelValue\n\t}\n\n\t// no special handling for other types needed\n\treturn props.modelValue ?? new Date()\n})\n\nconst placeholderFallback = computed(() => {\n\tif (props.type === 'date') {\n\t\treturn t('Select date')\n\t} else if (props.type === 'time') {\n\t\treturn t('Select time')\n\t} else if (props.type === 'datetime') {\n\t\treturn t('Select date and time')\n\t} else if (props.type === 'week') {\n\t\treturn t('Select week')\n\t} else if (props.type === 'month') {\n\t\treturn t('Select month')\n\t} else if (props.type === 'year') {\n\t\treturn t('Select year')\n\t} else if (props.type.endsWith('-range')) {\n\t\treturn t('Select time range')\n\t}\n\t// should not be reached\n\treturn t('Select date and time')\n})\n\n/**\n * The date (time) formatting to be used by the library.\n * We use the provided format if possible, otherwise we provide a formatting function\n * which uses the browsers Intl API to format the date / time in the current users locale.\n */\nconst realFormat = computed<LibraryFormatOptions>(() => {\n\tif (props.format) {\n\t\t// we can cast the type here as in this case its either string\n\t\t// function `(Date) => string` or `([Date, Date]) => string` where we cast to `(Date[]) => string` here.\n\t\treturn props.format as LibraryFormatOptions\n\t} else if (props.type === 'week') {\n\t\t// cannot format weeks with Intl.\n\t\treturn 'RR-II'\n\t}\n\n\tlet formatter: Intl.DateTimeFormat | undefined\n\tif (props.type === 'date' || props.type === 'date-range') {\n\t\tformatter = new Intl.DateTimeFormat(getCanonicalLocale(), { dateStyle: 'medium' })\n\t} else if (props.type === 'time' || props.type === 'time-range') {\n\t\tformatter = new Intl.DateTimeFormat(getCanonicalLocale(), { timeStyle: 'short' })\n\t} else if (props.type === 'datetime' || props.type === 'datetime-range') {\n\t\tformatter = new Intl.DateTimeFormat(getCanonicalLocale(), { dateStyle: 'medium', timeStyle: 'short' })\n\t} else if (props.type === 'month') {\n\t\tformatter = new Intl.DateTimeFormat(getCanonicalLocale(), { year: 'numeric', month: '2-digit' })\n\t} else if (props.type === 'year') {\n\t\tformatter = new Intl.DateTimeFormat(getCanonicalLocale(), { year: 'numeric' })\n\t}\n\n\tif (formatter) {\n\t\treturn (input: Date | [Date, Date]) => Array.isArray(input)\n\t\t\t? formatter.formatRange(input[0], input[1])\n\t\t\t: formatter.format(input)\n\t}\n\n\t// fallback to default formatting\n\treturn undefined\n})\n\nconst pickerType = computed(() => ({\n\ttimePicker: props.type === 'time' || props.type === 'time-range',\n\tyearPicker: props.type === 'year',\n\tmonthPicker: props.type === 'month',\n\tweekPicker: props.type === 'week',\n\trange: props.type.endsWith('-range') && {\n\t\t// do not use partial ranges (meaning after selecting the start [Date, null] will be emitted)\n\t\t// if this is needed someday we can enable it,\n\t\t// but its not covered by our component interface (props / events) documentation so just disabled for now.\n\t\tpartialRange: false,\n\t},\n\tenableTimePicker: !(props.type === 'date' || props.type === 'date-range'),\n\tflow: props.type === 'datetime'\n\t\t? ['calendar', 'time'] as ['calendar', 'time']\n\t\t: undefined,\n}))\n\n/**\n * Called on model value update of the library.\n * @param value The value emitted from the underlying library\n */\nfunction onUpdateModelValue(value: LibraryModelValue): void {\n\tif (value === null) {\n\t\treturn emit('update:modelValue', null)\n\t}\n\n\tif (props.type === 'time') {\n\t\t// time is provided as an object\n\t\temit('update:modelValue', formatLibraryTime(value as LibraryTimeObject))\n\t} else if (props.type === 'time-range') {\n\t\t// same as time but as an array with two elements\n\t\tconst start = formatLibraryTime(value[0])\n\t\tconst end = formatLibraryTime(value[1])\n\t\t// ensure end is beyond the start\n\t\tif (end.getTime() < start.getTime()) {\n\t\t\tend.setDate(end.getDate() + 1)\n\t\t}\n\t\temit('update:modelValue', [start, end])\n\t} else if (props.type === 'month') {\n\t\t// month is emitted as an object with month and year attribute\n\t\tconst data = value as { month: number, year: number }\n\t\temit('update:modelValue', new Date(data.year, data.month, 1))\n\t} else if (props.type === 'year') {\n\t\t// Years are emitted as the numeric year e.g. 2022\n\t\temit('update:modelValue', new Date(value as number, 0))\n\t} else if (props.type === 'week') {\n\t\t// weeks are emitted as [Date, Date]\n\t\temit('update:modelValue', value[0])\n\t} else {\n\t\t// otherwise it already emits the correct format\n\t\temit('update:modelValue', value as Date | [Date, Date])\n\t}\n}\n\n/**\n * Format a vuepick time object to native JS Date object.\n *\n * @param time - The library time value object\n */\nfunction formatLibraryTime(time: LibraryTimeObject): Date {\n\tconst date = new Date()\n\tdate.setHours(time.hours)\n\tdate.setMinutes(time.minutes)\n\tdate.setSeconds(time.seconds)\n\treturn date\n}\n\n// Localization\n\nconst dayNames = getDayNamesMin()\n\nconst weekStart = getFirstDay()\n\n// TRANSLATORS: A very short abbrevation used as a heading for \"week number\"\nconst weekNumName = t('W')\n\nconst ariaLabels = computed(() => ({\n\ttoggleOverlay: t('Toggle overlay'),\n\tmenu: props.ariaLabelMenu,\n\tinput: props.ariaLabel,\n\topenTimePicker: t('Open time picker'),\n\tcloseTimePicker: t('Close time Picker'),\n\tincrementValue: (type: 'hours' | 'minutes' | 'seconds') => {\n\t\tif (type === 'hours') {\n\t\t\treturn t('Increment hours')\n\t\t} else if (type === 'minutes') {\n\t\t\treturn t('Increment minutes')\n\t\t}\n\t\treturn t('Increment seconds')\n\t},\n\tdecrementValue: (type: 'hours' | 'minutes' | 'seconds') => {\n\t\tif (type === 'hours') {\n\t\t\treturn t('Decrement hours')\n\t\t} else if (type === 'minutes') {\n\t\t\treturn t('Decrement minutes')\n\t\t}\n\t\treturn t('Decrement seconds')\n\t},\n\topenTpOverlay: (type: 'hours' | 'minutes' | 'seconds') => {\n\t\tif (type === 'hours') {\n\t\t\treturn t('Open hours overlay')\n\t\t} else if (type === 'minutes') {\n\t\t\treturn t('Open minutes overlay')\n\t\t}\n\t\treturn t('Open seconds overlay')\n\t},\n\tamPmButton: t('Switch AM/PM mode'),\n\topenYearsOverlay: t('Open years overlay'),\n\topenMonthsOverlay: t('Open months overlay'),\n\tnextMonth: t('Next month'),\n\tprevMonth: t('Previous month'),\n\tnextYear: t('Next year'),\n\tprevYear: t('Previous year'),\n\tweekDay: (day: number) => getDayNames()[day],\n\tclearInput: t('Clear value'),\n\tcalendarIcon: t('Calendar icon'),\n\ttimePicker: t('Time picker'),\n\tmonthPicker: (overlay: boolean) => overlay ? t('Month picker overlay') : t('Month picker'),\n\tyearPicker: (overlay: boolean) => overlay ? t('Year picker overlay') : t('Year picker'),\n}))\n\n/**\n * Select the current value.\n * This is used by the confirmation button if `confirmation` was set.\n */\nfunction selectDate() {\n\tpicker.value!.selectDate()\n}\n\n/**\n * Cancel the current selection by closing the overlay.\n * This is used by the confirmation button if `confirmation` was set.\n */\nfunction cancelSelection() {\n\tpicker.value!.closeMenu()\n}\n</script>\n\n<template>\n\t<div class=\"vue-date-time-picker__wrapper\">\n\t\t<VueDatePicker ref=\"picker\"\n\t\t\t:aria-labels\n\t\t\t:auto-apply=\"!confirm\"\n\t\t\tclass=\"vue-date-time-picker\"\n\t\t\t:cancel-text=\"t('Cancel')\"\n\t\t\t:clearable\n\t\t\t:day-names\n\t\t\t:placeholder=\"placeholder ?? placeholderFallback\"\n\t\t\t:format=\"realFormat\"\n\t\t\t:locale\n\t\t\t:minutes-increment=\"minuteStep\"\n\t\t\t:model-value=\"value\"\n\t\t\t:now-button-label=\"t('Now')\"\n\t\t\t:select-text=\"t('Pick')\"\n\t\t\tsix-weeks=\"fair\"\n\t\t\t:teleport=\"appendToBody ? (target || undefined) : false\"\n\t\t\ttext-input\n\t\t\t:week-num-name\n\t\t\t:week-numbers=\"showWeekNumber ? { type: 'iso' } : undefined\"\n\t\t\t:week-start\n\t\t\tv-bind=\"pickerType\"\n\t\t\t@update:model-value=\"onUpdateModelValue\">\n\t\t\t<template #action-buttons>\n\t\t\t\t<NcButton size=\"small\" variant=\"tertiary\" @click=\"cancelSelection\">\n\t\t\t\t\t{{ t('Cancel') }}\n\t\t\t\t</NcButton>\n\t\t\t\t<NcButton size=\"small\" variant=\"primary\" @click=\"selectDate\">\n\t\t\t\t\t{{ t('Pick') }}\n\t\t\t\t</NcButton>\n\t\t\t</template>\n\t\t\t<template #clear-icon=\"{ clear }\">\n\t\t\t\t<NcButton :aria-label=\"t('Clear value')\"\n\t\t\t\t\tvariant=\"tertiary-no-background\"\n\t\t\t\t\t@click=\"clear\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<NcIconSvgWrapper inline :path=\"mdiClose\" :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcButton>\n\t\t\t</template>\n\t\t\t<template #input-icon>\n\t\t\t\t<NcIconSvgWrapper :path=\"mdiCalendarBlank\" :size=\"20\" />\n\t\t\t</template>\n\t\t\t<template #clock-icon>\n\t\t\t\t<NcIconSvgWrapper inline :path=\"mdiClock\" :size=\"20\" />\n\t\t\t</template>\n\t\t\t<template #arrow-left>\n\t\t\t\t<NcIconSvgWrapper inline :path=\"mdiChevronLeft\" :size=\"20\" />\n\t\t\t</template>\n\t\t\t<template #arrow-right>\n\t\t\t\t<NcIconSvgWrapper inline :path=\"mdiChevronRight\" :size=\"20\" />\n\t\t\t</template>\n\t\t\t<template #arrow-down>\n\t\t\t\t<NcIconSvgWrapper inline :path=\"mdiChevronDown\" :size=\"20\" />\n\t\t\t</template>\n\t\t\t<template #arrow-up>\n\t\t\t\t<NcIconSvgWrapper inline :path=\"mdiChevronUp\" :size=\"20\" />\n\t\t\t</template>\n\t\t\t<template v-if=\"showTimezoneSelect\" #action-extra>\n\t\t\t\t<NcTimezonePicker v-model=\"timezoneId\"\n\t\t\t\t\tclass=\"vue-date-time-picker__timezone\"\n\t\t\t\t\t:append-to-body=\"false\"\n\t\t\t\t\t:input-label=\"t('Timezone')\" />\n\t\t\t</template>\n\t\t</VueDatePicker>\n\t\t<Teleport to=\"body\" :disabled=\"!appendToBody\">\n\t\t\t<div ref=\"target\" class=\"vue-date-time-picker__wrapper\" />\n\t\t</Teleport>\n\t</div>\n</template>\n\n<style scoped lang=\"scss\">\n@use \"sass:meta\";\n\n.vue-date-time-picker__wrapper {\n\t// This is under :root in @vuepic/vue-datepicker/dist/main.css, so importing it scoped won't work\n\t--dp-common-transition: all var(--animation-quick) ease-in;\n\t--dp-menu-padding: 6px 8px;\n\t--dp-animation-duration: var(--animation-quick);\n\t--dp-menu-appear-transition-timing: cubic-bezier(.4, 0, 1, 1);\n\t--dp-transition-timing: ease-out;\n\t--dp-action-row-transtion: all 0.2s ease-in;\n\t--dp-font-family: var(--font-face);\n\t--dp-border-radius: var(--border-radius-element);\n\t--dp-cell-border-radius: var(--border-radius-small);\n\t--dp-transition-length: 22px;\n\t--dp-transition-timing-general: var(--animation-quick);\n\t--dp-button-height: var(--default-clickable-area);\n\t--dp-month-year-row-height: var(--default-clickable-area);\n\t--dp-month-year-row-button-size: var(--clickable-area-small);\n\t--dp-button-icon-height: 20px;\n\t--dp-calendar-wrap-padding: 0 5px;\n\t--dp-cell-size: var(--default-clickable-area);\n\t--dp-cell-padding: 5px;\n\t--dp-common-padding: 10px;\n\t--dp-input-icon-padding: var(--default-clickable-area);\n\t--dp-input-padding: 6px 30px 6px 12px;\n\t--dp-menu-min-width: 260px;\n\t--dp-action-buttons-padding: 1px 6px;\n\t--dp-row-margin: 5px 0;\n\t--dp-calendar-header-cell-padding: 0.5rem;\n\t--dp-multi-calendars-spacing: 10px;\n\t--dp-overlay-col-padding: 3px;\n\t--dp-time-inc-dec-button-size: var(--default-clickable-area);\n\t--dp-font-size: 1rem;\n\t--dp-preview-font-size: var(--font-size-small);\n\t--dp-time-font-size: 2rem;\n\t--dp-action-button-height: var(--clickable-area-small);\n\t--dp-action-row-padding: 8px;\n\t--dp-direction: ltr;\n\n\t// We need to import the vuepic styles, but at least scoped to our class and scope\n\t// plain @import does not work as this will scope all styles imported.\n\t:deep() {\n\t\t@include meta.load-css('@vuepic/vue-datepicker/dist/main.css');\n\t}\n\n\t.vue-date-time-picker__timezone {\n\t\tmin-width: unset;\n\t\twidth: 100%;\n\t}\n\n\t:deep(.icon-vue) {\n\t\t// we enforce full opacity to not create a11y issues with contrast\n\t\topacity: 1 !important;\n\t}\n\n\t// time selector button should have consistent padding\n\t:deep(.dp--tp-wrap),\n\t:deep(.dp__action_extra) {\n\t\tpadding: var(--dp-menu-padding);\n\t\tpadding-top: 0;\n\t}\n\n\t:deep(.dp__overlay.dp--overlay-absolute) {\n\t\tpadding: var(--dp-menu-padding);\n\n\t\t.dp__btn.dp__button.dp__button_bottom {\n\t\t\tinset-block-end: 6px;\n\t\t}\n\t}\n\n\t:deep(.dp__btn.dp__button.dp__button_bottom),\n\t:deep(.dp--tp-wrap .dp__button) {\n\t\twidth: 100%;\n\t}\n\n\t:deep(.dp__btn.dp__button.dp__overlay_action) {\n\t\twidth: calc(100% - 16px);\n\t}\n\n\t// fix issues caused by Nextcloud server styles\n\t:deep(input) {\n\t\tpadding-inline-start: var(--dp-input-icon-padding) !important;\n\t}\n\t:deep(.dp__btn) {\n\t\tmargin: 0;\n\t}\n\t:deep(.dp__inner_nav) {\n\t\theight: fit-content;\n\t\twidth: fit-content;\n\t}\n\n\t// make the bottom page toggle stand out better\n\t:deep(.dp__btn.dp__button.dp__button_bottom) {\n\t\tcolor: var(--color-primary-element-light);\n\t\tbackground-color: var(--color-primary-element-light);\n\t}\n\n\t// Fix server styles causing buttons to be primary colored\n\t:deep(.dp--header-wrap .dp__btn:not(.dp__button_bottom)),\n\t:deep(.dp__time_col .dp__btn) {\n\t\tbackground-color: var(--color-main-background);\n\n\t\t&:hover {\n\t\t\tbackground: var(--dp-hover-color);\n\t\t\tcolor: var(--dp-hover-icon-color);\n\t\t}\n\t}\n\n\t// Server styles cause the month and year to be fit-content -> fixing it to be max size.\n\t:deep(.dp__month_year_select) {\n\t\tflex: 1;\n\t}\n\t:deep(.dp--time-overlay-btn) {\n\t\tfont-size: calc(2 * var(--default-font-size)) !important;\n\t}\n\n\t// Adjust padding to prevent horizontal scrolling in time selection\n\t:deep(.dp__time_input .dp__time_col_reg_block) {\n\t\tpadding: 0 calc(4 * var(--default-grid-baseline));\n\t}\n\n\t.vue-date-time-picker.dp__theme_dark,\n\t.vue-date-time-picker.dp__theme_light,\n\t:deep(.dp__theme_dark),\n\t:deep(.dp__theme_light) {\n\t\t--dp-background-color: var(--color-main-background);\n\t\t--dp-text-color: var(--color-main-text);\n\t\t--dp-hover-color: var(--color-primary-element-light-hover);\n\t\t--dp-hover-text-color: var(--color-primary-element-light-text);\n\t\t--dp-hover-icon-color: var(--color-primary-element-light-text);\n\t\t--dp-primary-color: var(--color-primary-element);\n\t\t--dp-primary-disabled-color: var(--color-primary-element-hover);\n\t\t--dp-primary-text-color: var(--color-primary-element-text);\n\t\t--dp-secondary-color: var(--color-text-maxcontrast); // this is used for \"disabled\" dates\n\t\t--dp-border-color: var(--color-border);\n\t\t--dp-menu-border-color: var(--color-border-dark);\n\t\t--dp-border-color-hover: var(--color-border-maxcontrast);\n\t\t--dp-border-color-focus: var(--color-border-maxcontrast);\n\t\t--dp-disabled-color: var(--color-background-dark);\n\t\t--dp-disabled-color-text: var(--color-text-maxcontrast);\n\t\t--dp-scroll-bar-background: var(--color-scrollbar);\n\t\t--dp-scroll-bar-color: var(--color-scrollbar);\n\t\t--dp-success-color: var(--color-success);\n\t\t--dp-success-color-disabled: var(--color-success-hover);\n\t\t--dp-icon-color: var(--color-main-text);\n\t\t--dp-danger-color: var(--color-error);\n\t\t--dp-marker-color: var(--color-error);\n\t\t--dp-tooltip-color: var(--color-main-text);\n\t\t--dp-highlight-color: var(--color-main-text);\n\t}\n}\n</style>\n"],"names":["_useModel","value"],"mappings":"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"}

package/dist/chunks/NcDateTimePickerNative-NVYPDSmf.mjs

@@ -0,0 +1,100 @@
+import '../assets/NcDateTimePickerNative-BizATZfE.css';
+import { defineComponent, mergeModels, useModel, computed, createElementBlock, openBlock, normalizeClass, createElementVNode, toDisplayString, mergeProps } from "vue";
+import { c as createElementId } from "./createElementId-DhjFt1I9.mjs";
+import { r as register, a as t } from "./_l10n-tXci8WM1.mjs";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
+register();
+const _hoisted_1 = ["for"];
+const _hoisted_2 = ["id", "type", "value", "min", "max"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{ inheritAttrs: false },
+  __name: "NcDateTimePickerNative",
+  props: /* @__PURE__ */ mergeModels({
+    class: { default: void 0 },
+    id: { default: () => createElementId() },
+    inputClass: { default: "" },
+    type: { default: "date" },
+    label: { default: () => t("Please choose a date") },
+    min: { default: null },
+    max: { default: null },
+    hideLabel: { type: Boolean }
+  }, {
+    "modelValue": { default: null },
+    "modelModifiers": {}
+  }),
+  emits: ["update:modelValue"],
+  setup(__props) {
+    const props = __props;
+    const modelValue = useModel(__props, "modelValue");
+    const formattedValue = computed(() => modelValue.value ? formatValue(modelValue.value) : "");
+    const formattedMax = computed(() => props.max ? formatValue(props.max) : void 0);
+    const formattedMin = computed(() => props.min ? formatValue(props.min) : void 0);
+    function getReadableDate(value) {
+      const yyyy = value.getFullYear().toString().padStart(4, "0");
+      const MM = (value.getMonth() + 1).toString().padStart(2, "0");
+      const dd = value.getDate().toString().padStart(2, "0");
+      const hh = value.getHours().toString().padStart(2, "0");
+      const mm = value.getMinutes().toString().padStart(2, "0");
+      return { yyyy, MM, dd, hh, mm };
+    }
+    function formatValue(value) {
+      const { yyyy, MM, dd, hh, mm } = getReadableDate(value);
+      if (props.type === "datetime-local") {
+        return `${yyyy}-${MM}-${dd}T${hh}:${mm}`;
+      } else if (props.type === "date") {
+        return `${yyyy}-${MM}-${dd}`;
+      } else if (props.type === "month") {
+        return `${yyyy}-${MM}`;
+      } else if (props.type === "time") {
+        return `${hh}:${mm}`;
+      } else if (props.type === "week") {
+        const startDate = new Date(Number.parseInt(yyyy), 0, 1);
+        const daysSinceBeginningOfYear = Math.floor((value.getTime() - startDate.getTime()) / (24 * 60 * 60 * 1e3));
+        const weekNumber = Math.ceil(daysSinceBeginningOfYear / 7);
+        return `${yyyy}-W${weekNumber}`;
+      }
+      return "";
+    }
+    function onInput(event) {
+      const input = event.target;
+      if (!input || isNaN(input.valueAsNumber)) {
+        modelValue.value = null;
+      } else if (props.type === "time") {
+        const time = input.value;
+        const { yyyy, MM, dd } = getReadableDate(modelValue.value || /* @__PURE__ */ new Date());
+        modelValue.value = /* @__PURE__ */ new Date(`${yyyy}-${MM}-${dd}T${time}`);
+      } else if (props.type === "month") {
+        const MM = (new Date(input.value).getMonth() + 1).toString().padStart(2, "0");
+        const { yyyy, dd, hh, mm } = getReadableDate(modelValue.value || /* @__PURE__ */ new Date());
+        modelValue.value = /* @__PURE__ */ new Date(`${yyyy}-${MM}-${dd}T${hh}:${mm}`);
+      } else {
+        const timezoneOffsetSeconds = new Date(input.valueAsNumber).getTimezoneOffset() * 1e3 * 60;
+        const inputDateWithTimezone = input.valueAsNumber + timezoneOffsetSeconds;
+        modelValue.value = new Date(inputDateWithTimezone);
+      }
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["native-datetime-picker", _ctx.$props.class])
+      }, [
+        createElementVNode("label", {
+          class: normalizeClass(["native-datetime-picker__label", { "hidden-visually": _ctx.hideLabel }]),
+          for: _ctx.id
+        }, toDisplayString(_ctx.label), 11, _hoisted_1),
+        createElementVNode("input", mergeProps({
+          id: _ctx.id,
+          class: ["native-datetime-picker__input", _ctx.inputClass],
+          type: _ctx.type,
+          value: formattedValue.value,
+          min: formattedMin.value,
+          max: formattedMax.value
+        }, _ctx.$attrs, { onInput }), null, 16, _hoisted_2)
+      ], 2);
+    };
+  }
+});
+const NcDateTimePickerNative = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-5815f485"]]);
+export {
+  NcDateTimePickerNative as N
+};
+//# sourceMappingURL=NcDateTimePickerNative-NVYPDSmf.mjs.map

package/dist/chunks/NcDateTimePickerNative-NVYPDSmf.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcDateTimePickerNative-NVYPDSmf.mjs","sources":["../../src/components/NcDateTimePickerNative/NcDateTimePickerNative.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n\n### General description\n\nThis components provides a wrapper around the native browser datetime picker. <br>\nThis is an input with some type of date e.g. https://html.spec.whatwg.org/multipage/input.html#local-date-and-time-state-(type=datetime-local). <br>\nAll available types are: 'date', 'datetime-local', 'month', 'time' and 'week', please check them here: https://html.spec.whatwg.org/multipage/input.html#  <br>\n\n### Examples\n\n```vue\n<template>\n\t<div>\n\t\t<span>Picked date: {{ value || 'null' }}</span>\n\t\t<hr/>\n\t\t<div class=\"flex\">\n\t\t\t<NcSelect v-bind=\"props\" v-model=\"type\" />\n\t\t\t<NcDateTimePickerNative\n\t\t\t\tv-model=\"value\"\n\t\t\t\t:label=\"label\"\n\t\t\t\t:type=\"type\" />\n\t\t</div>\n\t</div>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tprops: {\n\t\t\t\t\tclearable: false,\n\t\t\t\t\tinputLabel: 'Picker type',\n\t\t\t\t\toptions: [\n\t\t\t\t\t\t'date',\n\t\t\t\t\t\t'datetime-local',\n\t\t\t\t\t\t'month',\n\t\t\t\t\t\t'time',\n\t\t\t\t\t\t'week',\n\t\t\t\t\t],\n\t\t\t\t},\n\t\t\t\ttype: 'datetime-local',\n\t\t\t\tvalue: new Date(),\n\t\t\t\tlabel: 'Select a new date or time',\n\t\t\t}\n\t\t},\n\t}\n</script>\n<style scoped>\n.flex {\n\tdisplay: flex;\n\tgap: 4px;\n}\n</style>\n```\n\n#### Usage: type='datetime-local' with min date and max date\n```vue\n<template>\n\t<div>\n\t\t<span>Picked date: {{ value || 'null' }}</span>\n\t\t<NcDateTimePickerNative\n\t\t\tv-model=\"value\"\n\t\t\t:min=\"yesterdayDate\"\n\t\t\t:max=\"someDate\"\n\t\t\t:label=\"label\"\n\t\t\ttype=\"datetime-local\" />\n\t</div>\n</template>\n\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tvalue: new Date(),\n\t\t\t\tlabel: 'Please select a new date',\n\t\t\t\tyesterdayDate: new Date(new Date().setDate(new Date().getDate() - 1)),\n\t\t\t\tsomeDate: new Date(new Date().setDate(new Date().getDate() + 7)),\n\t\t\t}\n\t\t},\n\t}\n</script>\n```\n\n</docs>\n\n<script setup lang=\"ts\">\nimport type { VueClassType } from '../../utils/VueTypes.ts'\n\nimport { computed } from 'vue'\nimport { createElementId } from '../../utils/createElementId.ts'\nimport { t } from '../../l10n.js'\n\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<{\n\t/**\n\t * HTML class of the element\n\t */\n\tclass?: VueClassType\n\n\t/**\n\t * ID of the input element\n\t */\n\tid?: string\n\n\t/**\n\t * Class to add to the input field.\n\t * Necessary to use NcDateTimePickerNative in the NcActionInput component.\n\t */\n\tinputClass?: VueClassType\n\n\t/**\n\t * type attribute of the input field\n\t * default type: String\n\t * The type of the input element, it can be `date`, `datetime-local`, `month`, `time`, `week`\n\t */\n\ttype?: 'date' | 'datetime-local' | 'month' | 'time' | 'week'\n\n\t/**\n\t * Visual label of the input\n\t */\n\tlabel?: string\n\n\t/**\n\t * min attribute of the input field\n\t */\n\tmin?: Date | null\n\n\t/**\n\t * max attribute of the input field\n\t */\n\tmax?: Date | null\n\n\t/**\n\t * Flag to hide the label.\n\t * The hidden input label for accessibility purposes.\n\t */\n\thideLabel?: boolean\n}>(), {\n\tclass: undefined,\n\tid: () => createElementId(),\n\tinputClass: '',\n\tlabel: () => t('Please choose a date'),\n\tmax: null,\n\tmin: null,\n\tmodelValue: null,\n\ttype: 'date',\n})\n\n/**\n * The date is – like the `Date` object in JavaScript – tied to UTC.\n * The selected time zone does not have an influence of the selected time and date value.\n * You have to translate the time yourself when you want to factor in time zones.\n * Pass null to clear the input field.\n */\nconst modelValue = defineModel<Date | null>({ default: null })\n\nconst formattedValue = computed(() => modelValue.value ? formatValue(modelValue.value) : '')\nconst formattedMax = computed(() => props.max ? formatValue(props.max) : undefined)\nconst formattedMin = computed(() => props.min ? formatValue(props.min) : undefined)\n\n/**\n * Returns Object with string values of a Date\n *\n * @param value - The selected value\n */\nfunction getReadableDate(value: Date) {\n\tconst yyyy = value.getFullYear().toString().padStart(4, '0')\n\tconst MM = (value.getMonth() + 1).toString().padStart(2, '0')\n\tconst dd = value.getDate().toString().padStart(2, '0')\n\tconst hh = value.getHours().toString().padStart(2, '0')\n\tconst mm = value.getMinutes().toString().padStart(2, '0')\n\n\treturn { yyyy, MM, dd, hh, mm }\n}\n\n/**\n * Returns preformatted value for the input field\n *\n * @param value - The selected value\n */\nfunction formatValue(value: Date): string {\n\tconst { yyyy, MM, dd, hh, mm } = getReadableDate(value)\n\tif (props.type === 'datetime-local') {\n\t\treturn `${yyyy}-${MM}-${dd}T${hh}:${mm}`\n\t} else if (props.type === 'date') {\n\t\treturn `${yyyy}-${MM}-${dd}`\n\t} else if (props.type === 'month') {\n\t\treturn `${yyyy}-${MM}`\n\t} else if (props.type === 'time') {\n\t\treturn `${hh}:${mm}`\n\t} else if (props.type === 'week') {\n\t\tconst startDate = new Date(Number.parseInt(yyyy), 0, 1)\n\t\tconst daysSinceBeginningOfYear = Math.floor((value.getTime() - startDate.getTime())\n\t\t\t/ (24 * 60 * 60 * 1000))\n\t\tconst weekNumber = Math.ceil(daysSinceBeginningOfYear / 7)\n\t\treturn `${yyyy}-W${weekNumber}`\n\t}\n\treturn ''\n}\n\n/**\n * Handle the input event\n *\n * @param event - The input event payload\n */\nfunction onInput(event: Event): void {\n\tconst input = event.target as HTMLInputElement\n\tif (!input || isNaN(input.valueAsNumber)) {\n\t\tmodelValue.value = null\n\t} else if (props.type === 'time') {\n\t\tconst time = input.value\n\n\t\tconst { yyyy, MM, dd } = getReadableDate(modelValue.value || new Date())\n\t\tmodelValue.value = new Date(`${yyyy}-${MM}-${dd}T${time}`)\n\t} else if (props.type === 'month') {\n\t\tconst MM = (new Date(input.value).getMonth() + 1).toString().padStart(2, '0')\n\t\tconst { yyyy, dd, hh, mm } = getReadableDate(modelValue.value || new Date())\n\t\tmodelValue.value = new Date(`${yyyy}-${MM}-${dd}T${hh}:${mm}`)\n\t} else {\n\t\tconst timezoneOffsetSeconds = new Date(input.valueAsNumber).getTimezoneOffset() * 1000 * 60\n\t\tconst inputDateWithTimezone = input.valueAsNumber + timezoneOffsetSeconds\n\t\tmodelValue.value = new Date(inputDateWithTimezone)\n\t}\n}\n</script>\n\n<template>\n\t<div class=\"native-datetime-picker\" :class=\"$props.class\">\n\t\t<label class=\"native-datetime-picker__label\"\n\t\t\t:class=\"{ 'hidden-visually': hideLabel }\"\n\t\t\t:for=\"id\">\n\t\t\t{{ label }}\n\t\t</label>\n\t\t<input :id\n\t\t\tclass=\"native-datetime-picker__input\"\n\t\t\t:class=\"inputClass\"\n\t\t\t:type\n\t\t\t:value=\"formattedValue\"\n\t\t\t:min=\"formattedMin\"\n\t\t\t:max=\"formattedMax\"\n\t\t\tv-bind=\"$attrs\"\n\t\t\t@input=\"onInput\">\n\t</div>\n</template>\n\n<style lang=\"scss\" scoped>\n.native-datetime-picker {\n\tdisplay: flex;\n\tflex-direction: column;\n\n\t.native-datetime-picker__label {\n\t\tmargin-block-end: 2px;\n\t}\n\n\t.native-datetime-picker__input {\n\t\t// If border width differs between focused and unfocused we need to compensate to prevent jumping\n\t\t--input-border-width-offset: calc(var(--border-width-input-focused, 2px) - var(--border-width-input, 2px));\n\t\twidth: 100%;\n\t\tflex: 0 0 auto;\n\t\tmargin: 0;\n\t\tpadding-inline-start: calc(var(--border-radius-large) + var(--input-border-width-offset));\n\t\tpadding-inline-end: calc(var(--default-grid-baseline) + var(--input-border-width-offset));\n\t\tborder: var(--border-width-input, 2px) solid var(--color-border-maxcontrast);\n\n\t\t&:active:not([disabled]),\n\t\t&:hover:not([disabled]),\n\t\t&:focus:not([disabled]),\n\t\t&:focus-within:not([disabled]) {\n\t\t\tborder-color: var(--color-main-text);\n\t\t\tborder-width: var(--border-width-input-focused, 2px);\n\t\t\tbox-shadow: 0 0 0 2px var(--color-main-background) !important;\n\t\t\t// Reset padding offset when focused\n\t\t\t--input-border-width-offset: 0px;\n\t\t}\n\t}\n}\n\n[data-theme-light],\n[data-themes*=light] {\n\t.native-datetime-picker__input {\n\t\tcolor-scheme: light;\n\t}\n}\n\n[data-theme-dark],\n[data-themes*=dark] {\n\t.native-datetime-picker__input {\n\t\tcolor-scheme: dark;\n\t}\n}\n\n[data-theme-default],\n[data-themes*=default] {\n\t@media (prefers-color-scheme: light) {\n\t\t.native-datetime-picker__input {\n\t\t\tcolor-scheme: light;\n\t\t}\n\t}\n\t@media (prefers-color-scheme: dark) {\n\t\t.native-datetime-picker__input {\n\t\t\tcolor-scheme: dark;\n\t\t}\n\t}\n}\n</style>\n"],"names":["_useModel"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAkGA,UAAM,QAAQ;AA6DR,UAAA,aAAaA,SAA0C,SAAA,YAAA;AAEvD,UAAA,iBAAiB,SAAS,MAAM,WAAW,QAAQ,YAAY,WAAW,KAAK,IAAI,EAAE;AACrF,UAAA,eAAe,SAAS,MAAM,MAAM,MAAM,YAAY,MAAM,GAAG,IAAI,MAAS;AAC5E,UAAA,eAAe,SAAS,MAAM,MAAM,MAAM,YAAY,MAAM,GAAG,IAAI,MAAS;AAOlF,aAAS,gBAAgB,OAAa;AAC/B,YAAA,OAAO,MAAM,YAAY,EAAE,WAAW,SAAS,GAAG,GAAG;AACrD,YAAA,MAAM,MAAM,SAAS,IAAI,GAAG,WAAW,SAAS,GAAG,GAAG;AACtD,YAAA,KAAK,MAAM,QAAQ,EAAE,WAAW,SAAS,GAAG,GAAG;AAC/C,YAAA,KAAK,MAAM,SAAS,EAAE,WAAW,SAAS,GAAG,GAAG;AAChD,YAAA,KAAK,MAAM,WAAW,EAAE,WAAW,SAAS,GAAG,GAAG;AAExD,aAAO,EAAE,MAAM,IAAI,IAAI,IAAI,GAAG;AAAA,IAAA;AAQ/B,aAAS,YAAY,OAAqB;AACnC,YAAA,EAAE,MAAM,IAAI,IAAI,IAAI,GAAG,IAAI,gBAAgB,KAAK;AAClD,UAAA,MAAM,SAAS,kBAAkB;AAC7B,eAAA,GAAG,IAAI,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE;AAAA,MAAA,WAC5B,MAAM,SAAS,QAAQ;AACjC,eAAO,GAAG,IAAI,IAAI,EAAE,IAAI,EAAE;AAAA,MAAA,WAChB,MAAM,SAAS,SAAS;AAC3B,eAAA,GAAG,IAAI,IAAI,EAAE;AAAA,MAAA,WACV,MAAM,SAAS,QAAQ;AAC1B,eAAA,GAAG,EAAE,IAAI,EAAE;AAAA,MAAA,WACR,MAAM,SAAS,QAAQ;AAC3B,cAAA,YAAY,IAAI,KAAK,OAAO,SAAS,IAAI,GAAG,GAAG,CAAC;AACtD,cAAM,2BAA2B,KAAK,OAAO,MAAM,QAAQ,IAAI,UAAU,QACrE,MAAA,KAAK,KAAK,KAAK,IAAK;AACxB,cAAM,aAAa,KAAK,KAAK,2BAA2B,CAAC;AAClD,eAAA,GAAG,IAAI,KAAK,UAAU;AAAA,MAAA;AAEvB,aAAA;AAAA,IAAA;AAQR,aAAS,QAAQ,OAAoB;AACpC,YAAM,QAAQ,MAAM;AACpB,UAAI,CAAC,SAAS,MAAM,MAAM,aAAa,GAAG;AACzC,mBAAW,QAAQ;AAAA,MAAA,WACT,MAAM,SAAS,QAAQ;AACjC,cAAM,OAAO,MAAM;AAEb,cAAA,EAAE,MAAM,IAAI,GAAG,IAAI,gBAAgB,WAAW,SAAa,oBAAA,MAAM;AAC5D,mBAAA,QAAY,oBAAA,KAAK,GAAG,IAAI,IAAI,EAAE,IAAI,EAAE,IAAI,IAAI,EAAE;AAAA,MAAA,WAC/C,MAAM,SAAS,SAAS;AAClC,cAAM,MAAM,IAAI,KAAK,MAAM,KAAK,EAAE,SAAS,IAAI,GAAG,SAAA,EAAW,SAAS,GAAG,GAAG;AACtE,cAAA,EAAE,MAAM,IAAI,IAAI,GAAA,IAAO,gBAAgB,WAAW,SAAa,oBAAA,MAAM;AAC3E,mBAAW,QAAQ,oBAAI,KAAK,GAAG,IAAI,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE;AAAA,MAAA,OACvD;AACA,cAAA,wBAAwB,IAAI,KAAK,MAAM,aAAa,EAAE,kBAAA,IAAsB,MAAO;AACnF,cAAA,wBAAwB,MAAM,gBAAgB;AACzC,mBAAA,QAAQ,IAAI,KAAK,qBAAqB;AAAA,MAAA;AAAA,IAClD;;;;;;;;;;;;;;;;;;;;;;"}