@nextcloud/vue 9.0.0-alpha.7 → 9.0.0-rc.0

package/dist/chunks/NcDateTimePicker-CDFvxL3U.mjs

@@ -0,0 +1,299 @@
+import '../assets/NcDateTimePicker-pmbCzZnb.css';
+import { defineComponent, mergeModels, useModel, computed, createBlock, openBlock, unref, mergeProps, createSlots, withCtx, createVNode } from "vue";
+import { m as mdiChevronUp, a as mdiChevronDown, b as mdiChevronRight, c as mdiChevronLeft, d as mdiClock, e as mdiClose, f as mdiCalendarBlank } from "./mdi-zYpVOORa.mjs";
+import { getCanonicalLocale, getDayNamesMin, getFirstDay, getDayNames } from "@nextcloud/l10n";
+import { r as register, a as t } from "./_l10n-BNGeEX3W.mjs";
+import VueDatePicker from "@vuepic/vue-datepicker";
+import { N as NcIconSvgWrapper } from "./NcIconSvgWrapper-Bc3ogp8T.mjs";
+import { _ as _sfc_main$1 } from "./NcTimezonePicker.vue_vue_type_script_setup_true_lang-DxoB-jLa.mjs";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
+register();
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "NcDateTimePicker",
+  props: /* @__PURE__ */ mergeModels({
+    appendToBody: { type: Boolean },
+    ariaLabel: { default: t("Datepicker input") },
+    ariaLabelMenu: { default: t("Datepicker menu") },
+    clearable: { type: Boolean },
+    confirm: { type: Boolean },
+    format: { type: [String, Function], default: void 0 },
+    locale: { default: getCanonicalLocale() },
+    minuteStep: { default: 10 },
+    modelValue: { default: void 0 },
+    placeholder: { default: void 0 },
+    showTimezoneSelect: { type: Boolean },
+    showWeekNumber: { type: Boolean },
+    type: { default: "date" }
+  }, {
+    "timezoneId": { default: "UTC" },
+    "timezoneIdModifiers": {}
+  }),
+  emits: /* @__PURE__ */ mergeModels(["update:modelValue", "update:timezoneId"], ["update:timezoneId"]),
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const timezoneId = useModel(__props, "timezoneId");
+    const emit = __emit;
+    const value = computed(() => {
+      if (props.modelValue === void 0 && props.clearable) {
+        return null;
+      }
+      if (props.type === "week") {
+        const date = props.modelValue instanceof Date ? props.modelValue : /* @__PURE__ */ new Date();
+        const end = new Date(date);
+        end.setUTCDate(date.getUTCDate() + 6);
+        return [date, end];
+      } else if (props.type === "year") {
+        const date = props.modelValue instanceof Date ? props.modelValue : /* @__PURE__ */ new Date();
+        return date.getUTCFullYear();
+      } else if (props.type === "month") {
+        const date = props.modelValue instanceof Date ? props.modelValue : /* @__PURE__ */ new Date();
+        return { year: date.getUTCFullYear(), month: date.getUTCMonth() };
+      } else if (props.type === "time" || props.type === "time-range") {
+        const time = [props.modelValue ?? (props.type === "time-range" ? [/* @__PURE__ */ new Date(), /* @__PURE__ */ new Date()] : /* @__PURE__ */ new Date())].flat();
+        if (props.modelValue === void 0 && props.type === "time-range") {
+          time[1].setHours(time[1].getHours() + 1);
+        }
+        const timeValue = time.map((date) => ({
+          hours: date.getHours(),
+          minutes: date.getMinutes(),
+          seconds: date.getSeconds()
+        }));
+        return props.type === "time" ? timeValue[0] : timeValue;
+      } else if (props.type.endsWith("-range")) {
+        if (props.modelValue === void 0) {
+          const start = /* @__PURE__ */ new Date();
+          const end = new Date(start);
+          end.setUTCDate(start.getUTCDate() + 7);
+          return [start, end];
+        }
+        return props.modelValue;
+      }
+      return props.modelValue ?? /* @__PURE__ */ new Date();
+    });
+    const placeholderFallback = computed(() => {
+      if (props.type === "date") {
+        return t("Select date");
+      } else if (props.type === "time") {
+        return t("Select time");
+      } else if (props.type === "datetime") {
+        return t("Select date and time");
+      } else if (props.type === "week") {
+        return t("Select week");
+      } else if (props.type === "month") {
+        return t("Select month");
+      } else if (props.type === "year") {
+        return t("Select year");
+      } else if (props.type.endsWith("-range")) {
+        return t("Select time range");
+      }
+      return t("Select date and time");
+    });
+    const realFormat = computed(() => {
+      if (props.format) {
+        return props.format;
+      } else if (props.type === "week") {
+        return "RR-II";
+      }
+      let formatter;
+      if (props.type === "date" || props.type === "date-range") {
+        formatter = new Intl.DateTimeFormat(getCanonicalLocale(), { dateStyle: "medium" });
+      } else if (props.type === "time" || props.type === "time-range") {
+        formatter = new Intl.DateTimeFormat(getCanonicalLocale(), { timeStyle: "short" });
+      } else if (props.type === "datetime" || props.type === "datetime-range") {
+        formatter = new Intl.DateTimeFormat(getCanonicalLocale(), { dateStyle: "medium", timeStyle: "short" });
+      } else if (props.type === "month") {
+        formatter = new Intl.DateTimeFormat(getCanonicalLocale(), { year: "numeric", month: "2-digit" });
+      } else if (props.type === "year") {
+        formatter = new Intl.DateTimeFormat(getCanonicalLocale(), { year: "numeric" });
+      }
+      if (formatter) {
+        return (input) => Array.isArray(input) ? formatter.formatRange(input[0], input[1]) : formatter.format(input);
+      }
+      return void 0;
+    });
+    const pickerType = computed(() => ({
+      timePicker: props.type === "time" || props.type === "time-range",
+      yearPicker: props.type === "year",
+      monthPicker: props.type === "month",
+      weekPicker: props.type === "week",
+      range: props.type.endsWith("-range") && {
+        // do not use partial ranges (meaning after selecting the start [Date, null] will be emitted)
+        // if this is needed someday we can enable it,
+        // but its not covered by our component interface (props / events) documentation so just disabled for now.
+        partialRange: false
+      },
+      enableTimePicker: !(props.type === "date" || props.type === "date-range"),
+      flow: props.type === "datetime" ? ["calendar", "time"] : void 0
+    }));
+    function onUpdateModelValue(value2) {
+      if (value2 === null) {
+        return emit("update:modelValue", null);
+      }
+      if (props.type === "time") {
+        emit("update:modelValue", formatLibraryTime(value2));
+      } else if (props.type === "time-range") {
+        const start = formatLibraryTime(value2[0]);
+        const end = formatLibraryTime(value2[1]);
+        if (end.getTime() < start.getTime()) {
+          end.setDate(end.getDate() + 1);
+        }
+        emit("update:modelValue", [start, end]);
+      } else if (props.type === "month") {
+        const data = value2;
+        emit("update:modelValue", new Date(data.year, data.month, 1));
+      } else if (props.type === "year") {
+        emit("update:modelValue", new Date(value2, 0));
+      } else if (props.type === "week") {
+        emit("update:modelValue", value2[0]);
+      } else {
+        emit("update:modelValue", value2);
+      }
+    }
+    function formatLibraryTime(time) {
+      const date = /* @__PURE__ */ new Date();
+      date.setHours(time.hours);
+      date.setMinutes(time.minutes);
+      date.setSeconds(time.seconds);
+      return date;
+    }
+    const dayNames = getDayNamesMin();
+    const weekStart = getFirstDay();
+    const weekNumName = t("W");
+    const ariaLabels = computed(() => ({
+      toggleOverlay: t("Toggle overlay"),
+      menu: props.ariaLabelMenu,
+      input: props.ariaLabel,
+      openTimePicker: t("Open time picker"),
+      closeTimePicker: t("Close time Picker"),
+      incrementValue: (type) => {
+        if (type === "hours") {
+          return t("Increment hours");
+        } else if (type === "minutes") {
+          return t("Increment minutes");
+        }
+        return t("Increment seconds");
+      },
+      decrementValue: (type) => {
+        if (type === "hours") {
+          return t("Decrement hours");
+        } else if (type === "minutes") {
+          return t("Decrement minutes");
+        }
+        return t("Decrement seconds");
+      },
+      openTpOverlay: (type) => {
+        if (type === "hours") {
+          return t("Open hours overlay");
+        } else if (type === "minutes") {
+          return t("Open minutes overlay");
+        }
+        return t("Open seconds overlay");
+      },
+      amPmButton: t("Switch AM/PM mode"),
+      openYearsOverlay: t("Open years overlay"),
+      openMonthsOverlay: t("Open months overlay"),
+      nextMonth: t("Next month"),
+      prevMonth: t("Previous month"),
+      nextYear: t("Next year"),
+      prevYear: t("Previous year"),
+      weekDay: (day) => getDayNames()[day],
+      clearInput: t("Clear value"),
+      calendarIcon: t("Calendar icon"),
+      timePicker: t("Time picker"),
+      monthPicker: (overlay) => overlay ? t("Month picker overlay") : t("Month picker"),
+      yearPicker: (overlay) => overlay ? t("Year picker overlay") : t("Year picker")
+    }));
+    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"])
+          ]),
+          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"]);
+    };
+  }
+});
+const NcDateTimePicker = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-629e70a5"]]);
+export {
+  NcDateTimePicker as N
+};
+//# sourceMappingURL=NcDateTimePicker-CDFvxL3U.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NcDateTimePicker-CDFvxL3U.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 } from 'vue'\nimport { t } from '../../l10n.js'\n\nimport VueDatePicker from '@vuepic/vue-datepicker'\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]\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: undefined,\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 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 === undefined && 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</script>\n\n<template>\n\t<VueDatePicker :aria-labels\n\t\t:auto-apply=\"!confirm\"\n\t\tclass=\"vue-date-time-picker\"\n\t\t:cancel-text=\"t('Cancel')\"\n\t\t:clearable\n\t\t:day-names\n\t\t:placeholder=\"placeholder ?? placeholderFallback\"\n\t\t:format=\"realFormat\"\n\t\t:locale\n\t\t:minutes-increment=\"minuteStep\"\n\t\t:model-value=\"value\"\n\t\t:now-button-label=\"t('Now')\"\n\t\t:select-text=\"t('Pick')\"\n\t\tsix-weeks=\"fair\"\n\t\t:teleport=\"appendToBody || undefined\"\n\t\ttext-input\n\t\t:week-num-name\n\t\t:week-numbers=\"showWeekNumber ? { type: 'iso' } : undefined\"\n\t\t:week-start\n\t\tv-bind=\"pickerType\"\n\t\t@update:model-value=\"onUpdateModelValue\">\n\t\t<template #input-icon>\n\t\t\t<NcIconSvgWrapper :path=\"mdiCalendarBlank\" :size=\"20\" />\n\t\t</template>\n\t\t<template #clear-icon>\n\t\t\t<NcIconSvgWrapper inline :path=\"mdiClose\" :size=\"20\" />\n\t\t</template>\n\t\t<template #clock-icon>\n\t\t\t<NcIconSvgWrapper inline :path=\"mdiClock\" :size=\"20\" />\n\t\t</template>\n\t\t<template #arrow-left>\n\t\t\t<NcIconSvgWrapper inline :path=\"mdiChevronLeft\" :size=\"20\" />\n\t\t</template>\n\t\t<template #arrow-right>\n\t\t\t<NcIconSvgWrapper inline :path=\"mdiChevronRight\" :size=\"20\" />\n\t\t</template>\n\t\t<template #arrow-down>\n\t\t\t<NcIconSvgWrapper inline :path=\"mdiChevronDown\" :size=\"20\" />\n\t\t</template>\n\t\t<template #arrow-up>\n\t\t\t<NcIconSvgWrapper inline :path=\"mdiChevronUp\" :size=\"20\" />\n\t\t</template>\n\t\t<template v-if=\"showTimezoneSelect\" #action-extra>\n\t\t\t<NcTimezonePicker v-model=\"timezoneId\"\n\t\t\t\tclass=\"vue-date-time-picker__timezone\"\n\t\t\t\t:append-to-body=\"false\"\n\t\t\t\t:input-label=\"t('Timezone')\" />\n\t\t</template>\n\t</VueDatePicker>\n</template>\n\n<style scoped lang=\"scss\">\n@import '@vuepic/vue-datepicker/dist/main.css';\n\n.vue-date-time-picker {\n\t--dp-border-radius: var(--border-radius-element);\n\t--dp-input-icon-padding: var(--default-clickable-area);\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\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\tpadding: calc((var(--default-clickable-area) - 20px) / 2);\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// 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-color: var(--color-background-hover);\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&.dp__theme_dark,\n\t&.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-background-hover);\n\t\t--dp-hover-text-color: var(--color-main-text);\n\t\t--dp-hover-icon-color: var(--color-main-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-Dbc6pBXk.mjs → NcDateTimePickerNative-BRuMK89z.mjs}

@@ -1,6 +1,6 @@
-import '../assets/NcDateTimePickerNative-pbWtBuzt.css';
-import { S as ScopeComponent } from "./ScopeComponent-DgRMJomt.mjs";
-import { G as GenRandomId } from "./GenRandomId-CMooMQt0.mjs";
+import '../assets/NcDateTimePickerNative-CdHLvH4A.css';
+import { c as createElementId } from "./createElementId-DhjFt1I9.mjs";
+import { S as ScopeComponent } from "./ScopeComponent-BIpNSmeE.mjs";
 import { createElementBlock, openBlock, createElementVNode, normalizeClass, toDisplayString, mergeProps } from "vue";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
 const inputDateTypes = ["date", "datetime-local", "month", "time", "week"];
@@ -23,7 +23,7 @@ const _sfc_main = ScopeComponent({
      */
     id: {
       type: String,
-      default: () => "date-time-picker-" + GenRandomId(),
+      default: () => createElementId(),
       validator: (id) => id.trim() !== ""
     },
     /**
@@ -196,7 +196,8 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     }), null, 16, _hoisted_3)
   ]);
 }
-const NcDateTimePickerNative = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-5b5add33"]]);
+const NcDateTimePickerNative = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-2a805ea7"]]);
 export {
   NcDateTimePickerNative as N
 };
+//# sourceMappingURL=NcDateTimePickerNative-BRuMK89z.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NcDateTimePickerNative-BRuMK89z.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<template>\n\t<div class=\"native-datetime-picker\">\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=\"id\"\n\t\t\tclass=\"native-datetime-picker--input\"\n\t\t\t:class=\"inputClass\"\n\t\t\t:type=\"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<script>\nimport { createElementId } from '../../utils/createElementId.js'\nimport ScopeComponent from '../../utils/ScopeComponent.js'\n\nconst inputDateTypes = ['date', 'datetime-local', 'month', 'time', 'week']\n\nexport default ScopeComponent({\n\tname: 'NcDateTimePickerNative',\n\tinheritAttrs: false,\n\n\tprops: {\n\t\t/**\n\t\t * The date is – like the `Date` object in JavaScript – tied to UTC.\n\t\t * The selected time zone does not have an influence of the selected time and date value.\n\t\t * You have to translate the time yourself when you want to factor in time zones.\n\t\t * Pass null to clear the input field.\n\t\t */\n\t\tmodelValue: {\n\t\t\ttype: Date,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * id attribute of the input field\n\t\t */\n\t\tid: {\n\t\t\ttype: String,\n\t\t\tdefault: () => createElementId(),\n\t\t\tvalidator: id => id.trim() !== '',\n\t\t},\n\t\t/**\n\t\t * type attribute of the input field\n\t\t * default type: String\n\t\t * The type of the input element, it can be `date`, `datetime-local`, `month`, `time`, `week`\n\t\t */\n\t\ttype: {\n\t\t\ttype: String,\n\t\t\tdefault: 'date',\n\t\t\tvalidate: (name) => inputDateTypes.includes(name),\n\t\t},\n\t\t/**\n\t\t * text inside the label element\n\t\t * default type: String\n\t\t */\n\t\tlabel: {\n\t\t\ttype: String,\n\t\t\tdefault: 'Please choose a date',\n\t\t},\n\t\t/**\n\t\t * min attribute of the input field\n\t\t * default type: null\n\t\t */\n\t\tmin: {\n\t\t\ttype: [Date, Boolean],\n\t\t\tdefault: null,\n\t\t},\n\t\t/**\n\t\t * max attribute of the input field\n\t\t * default type: null\n\t\t */\n\t\tmax: {\n\t\t\ttype: [Date, Boolean],\n\t\t\tdefault: null,\n\t\t},\n\t\t/**\n\t\t * Flag to hide the label\n\t\t * default type: String\n\t\t * The hidden input label for accessibility purposes.\n\t\t */\n\t\thideLabel: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Class to add to the input field.\n\t\t * Necessary to use NcDateTimePickerNative in the NcActionInput component.\n\t\t */\n\t\tinputClass: {\n\t\t\ttype: [Object, String],\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\temits: [\n\t\t'update:modelValue',\n\t],\n\n\tcomputed: {\n\t\tformattedValue() {\n\t\t\treturn this.formatValue(this.modelValue)\n\t\t},\n\t\tformattedMin() {\n\t\t\tif (this.min) {\n\t\t\t\treturn this.formatValue(this.min)\n\t\t\t}\n\t\t\treturn false\n\t\t},\n\t\tformattedMax() {\n\t\t\tif (this.max) {\n\t\t\t\treturn this.formatValue(this.max)\n\t\t\t}\n\t\t\treturn false\n\t\t},\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Handle the input event\n\t\t *\n\t\t * @param {InputEvent} $event input event payload\n\t\t * @return {Date|null} new chosen Date() or null\n\t\t */\n\t\tonInput($event) {\n\t\t\tif (isNaN($event.target.valueAsNumber)) {\n\t\t\t\t/**\n\t\t\t\t * Emitted when the input value changes\n\t\t\t\t *\n\t\t\t\t * @return {null} null value\n\t\t\t\t */\n\t\t\t\treturn this.$emit('update:modelValue', null)\n\t\t\t}\n\t\t\tif (this.type === 'time') {\n\t\t\t\tconst time = $event.target.value\n\t\t\t\tif (this.modelValue === '' || this.modelValue === null) {\n\t\t\t\t\t// this case is because of Chrome bug\n\t\t\t\t\tconst { yyyy, MM, dd } = this.getReadableDate(new Date())\n\t\t\t\t\t/**\n\t\t\t\t\t * Emitted when the input value changes\n\t\t\t\t\t *\n\t\t\t\t\t * @return {Date} new chosen Date()\n\t\t\t\t\t */\n\t\t\t\t\treturn this.$emit('update:modelValue', new Date(`${yyyy}-${MM}-${dd}T${time}`))\n\t\t\t\t}\n\t\t\t\tconst { yyyy, MM, dd } = this.getReadableDate(this.modelValue)\n\t\t\t\t/**\n\t\t\t\t * Emitted when the input value changes\n\t\t\t\t *\n\t\t\t\t * @return {Date} new chosen Date()\n\t\t\t\t */\n\t\t\t\treturn this.$emit('update:modelValue', new Date(`${yyyy}-${MM}-${dd}T${time}`))\n\t\t\t} else if (this.type === 'month') {\n\t\t\t\tconst MM = (new Date($event.target.value).getMonth() + 1).toString().padStart(2, '0')\n\t\t\t\tif (this.modelValue === '' || this.modelValue === null) {\n\t\t\t\t\tconst { yyyy, dd, hh, mm } = this.getReadableDate(new Date())\n\t\t\t\t\t/**\n\t\t\t\t\t * Emitted when the input value changes\n\t\t\t\t\t *\n\t\t\t\t\t * @return {Date} new chosen Date()\n\t\t\t\t\t */\n\t\t\t\t\treturn this.$emit('update:modelValue', new Date(`${yyyy}-${MM}-${dd}T${hh}:${mm}`))\n\t\t\t\t}\n\t\t\t\tconst { yyyy, dd, hh, mm } = this.getReadableDate(this.modelValue)\n\t\t\t\t/**\n\t\t\t\t * Emitted when the input value changes\n\t\t\t\t *\n\t\t\t\t * @return {Date} new chosen Date()\n\t\t\t\t */\n\t\t\t\treturn this.$emit('update:modelValue', new Date(`${yyyy}-${MM}-${dd}T${hh}:${mm}`))\n\t\t\t}\n\t\t\tconst timezoneOffsetSeconds = new Date($event.target.valueAsNumber).getTimezoneOffset() * 1000 * 60\n\t\t\tconst inputDateWithTimezone = $event.target.valueAsNumber + timezoneOffsetSeconds\n\t\t\t/**\n\t\t\t * Emitted when the input value changes\n\t\t\t *\n\t\t\t * @return {Date} new chosen Date()\n\t\t\t */\n\t\t\treturn this.$emit('update:modelValue', new Date(inputDateWithTimezone))\n\t\t},\n\t\t/**\n\t\t * Returns Object with string values of a Date\n\t\t *\n\t\t * @param {Date} value The selected value\n\t\t * @return {object|undefined}\n\t\t */\n\t\tgetReadableDate(value) {\n\t\t\tif (value instanceof Date) {\n\t\t\t\tconst yyyy = value.getFullYear().toString().padStart(4, '0')\n\t\t\t\tconst MM = (value.getMonth() + 1).toString().padStart(2, '0')\n\t\t\t\tconst dd = value.getDate().toString().padStart(2, '0')\n\t\t\t\tconst hh = value.getHours().toString().padStart(2, '0')\n\t\t\t\tconst mm = value.getMinutes().toString().padStart(2, '0')\n\n\t\t\t\treturn { yyyy, MM, dd, hh, mm }\n\t\t\t}\n\t\t},\n\t\t/**\n\t\t * Returns preformatted value for the input field\n\t\t *\n\t\t * @param {Date} value The selected value\n\t\t * @return {string|undefined}\n\t\t */\n\t\tformatValue(value) {\n\t\t\tif (value instanceof Date) {\n\t\t\t\tconst { yyyy, MM, dd, hh, mm } = this.getReadableDate(value)\n\t\t\t\tif (this.type === 'datetime-local') {\n\t\t\t\t\treturn `${yyyy}-${MM}-${dd}T${hh}:${mm}`\n\t\t\t\t} else if (this.type === 'date') {\n\t\t\t\t\treturn `${yyyy}-${MM}-${dd}`\n\t\t\t\t} else if (this.type === 'month') {\n\t\t\t\t\treturn `${yyyy}-${MM}`\n\t\t\t\t} else if (this.type === 'time') {\n\t\t\t\t\treturn `${hh}:${mm}`\n\t\t\t\t} else if (this.type === 'week') {\n\t\t\t\t\tconst startDate = new Date(yyyy, 0, 1)\n\t\t\t\t\tconst daysSinceBeginningOfYear = Math.floor((value - startDate)\n\t\t\t\t\t\t/ (24 * 60 * 60 * 1000))\n\t\t\t\t\tconst weekNumber = Math.ceil(daysSinceBeginningOfYear / 7)\n\t\t\t\t\treturn `${yyyy}-W${weekNumber}`\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\treturn ''\n\t\t\t}\n\t\t},\n\t},\n})\n</script>\n\n<style lang=\"scss\" scoped>\n\t.native-datetime-picker {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t}\n\n\t.native-datetime-picker .native-datetime-picker--label {\n\t\tmargin-block-end: 2px;\n\t}\n\n\t.native-datetime-picker .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\t[data-theme-light],\n\t[data-themes*=light] {\n\t\t.native-datetime-picker--input {\n\t\t\tcolor-scheme: light;\n\t\t}\n\t}\n\n\t[data-theme-dark],\n\t[data-themes*=dark] {\n\t\t.native-datetime-picker--input {\n\t\t\tcolor-scheme: dark;\n\t\t}\n\t}\n\n\t[data-theme-default],\n\t[data-themes*=default] {\n\t\t@media (prefers-color-scheme: light) {\n\t\t\t.native-datetime-picker--input {\n\t\t\t\tcolor-scheme: light;\n\t\t\t}\n\t\t}\n\t\t@media (prefers-color-scheme: dark) {\n\t\t\t.native-datetime-picker--input {\n\t\t\t\tcolor-scheme: dark;\n\t\t\t}\n\t\t}\n\t}\n</style>\n"],"names":["yyyy","MM","dd","hh","mm","_openBlock","_createElementBlock","_createElementVNode","_normalizeClass","_toDisplayString","_mergeProps"],"mappings":"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"}

package/dist/chunks/{NcDialog-B81mllwn.mjs → NcDialog-BX0IET9Y.mjs}

@@ -1,9 +1,9 @@
-import '../assets/NcDialog-DL7A_udP.css';
+import '../assets/NcDialog-bP7Jt0ZE.css';
 import { useElementSize } from "@vueuse/core";
 import { defineComponent, ref, computed, resolveComponent, createBlock, createCommentVNode, openBlock, mergeProps, withCtx, createElementVNode, toDisplayString, resolveDynamicComponent, toHandlers, normalizeClass, createElementBlock, renderSlot, Fragment, renderList } from "vue";
 import NcModal from "../components/NcModal/index.mjs";
-import { _ as _sfc_main$1 } from "./NcDialogButton.vue_vue_type_script_setup_true_lang-DgWqkSL7.mjs";
-import { G as GenRandomId } from "./GenRandomId-CMooMQt0.mjs";
+import { _ as _sfc_main$1 } from "./NcDialogButton.vue_vue_type_script_setup_true_lang-DbzPc_gW.mjs";
+import { c as createElementId } from "./createElementId-DhjFt1I9.mjs";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
 const _sfc_main = defineComponent({
   name: "NcDialog",
@@ -73,16 +73,16 @@ const _sfc_main = defineComponent({
       }
     },
     /**
-     * Set to false to no show a close button on the dialog
-     * @default true
+     * Do not show the close button for the dialog.
+     * @default false
      */
-    canClose: {
+    noClose: {
       type: Boolean,
-      default: true
+      default: false
     },
     /**
      * Close the dialog if the user clicked outside of the dialog
-     * Only relevant if `canClose` is set to true.
+     * Only relevant if `noClose` is not set.
      */
     closeOnClickOutside: {
       type: Boolean,
@@ -166,13 +166,13 @@ const _sfc_main = defineComponent({
       default: ""
     }
   },
-  emits: ["closing", "update:open", "submit"],
+  emits: ["closing", "update:open", "reset", "submit"],
   setup(props, { emit, slots }) {
     const wrapper = ref();
     const { width: dialogWidth } = useElementSize(wrapper, { width: 900, height: 0 });
     const isNavigationCollapsed = computed(() => dialogWidth.value < 876);
     const hasNavigation = computed(() => slots?.navigation !== void 0);
-    const navigationId = GenRandomId();
+    const navigationId = createElementId();
     const navigationAriaLabelAttr = computed(() => props.navigationAriaLabel || void 0);
     const navigationAriaLabelledbyAttr = computed(() => {
       if (props.navigationAriaLabel) {
@@ -208,16 +208,16 @@ const _sfc_main = defineComponent({
       handleClosing(result);
       window.setTimeout(() => handleClosed(), 300);
     }
-    const handleClosing = (result) => {
+    function handleClosing(result) {
       showModal.value = false;
       emit("closing", result);
-    };
+    }
     const handleClosed = () => {
       showModal.value = true;
       emit("update:open", false);
     };
     const modalProps = computed(() => ({
-      canClose: props.canClose,
+      noClose: props.noClose,
       container: props.container === void 0 ? "body" : props.container,
       // we do not pass the name as we already have the name as the headline
       // name: props.name,
@@ -312,7 +312,8 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3
   }, 16, ["onClose"])) : createCommentVNode("", true);
 }
-const NcDialog = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-5728e3fd"]]);
+const NcDialog = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-3709d2d3"]]);
 export {
   NcDialog as N
 };
+//# sourceMappingURL=NcDialog-BX0IET9Y.mjs.map

package/dist/chunks/NcDialog-BX0IET9Y.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcDialog-BX0IET9Y.mjs","sources":["../../src/components/NcDialog/NcDialog.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### General description\n\nThis component uses the `NcModal` under the hood for allowing users to create generic dialogs.\n\n### Basic example\n```vue\n<template>\n\t<div>\n\t\t<NcButton @click=\"showDialog = true\">Show dialog</NcButton>\n\t\t<NcDialog v-model:open=\"showDialog\" name=\"Confirmation\" message=\"Are you sure to proceed?\" :buttons=\"buttons\" />\n\t\t<p>Last response: {{ lastResponse }}</p>\n\t</div>\n</template>\n<script>\nimport IconCancel from '@mdi/svg/svg/cancel.svg?raw'\nimport IconCheck from '@mdi/svg/svg/check.svg?raw'\n\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tshowDialog: false,\n\t\t\tlastResponse: 'None',\n\t\t\tbuttons: [\n\t\t\t\t{\n\t\t\t\t\tlabel: 'Cancel',\n\t\t\t\t\ticon: IconCancel,\n\t\t\t\t\tcallback: () => { this.lastResponse = 'Pressed \"Cancel\"' },\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tlabel: 'Ok',\n\t\t\t\t\ttype: 'primary',\n\t\t\t\t\ticon: IconCheck,\n\t\t\t\t\tcallback: () => { this.lastResponse = 'Pressed \"Ok\"' },\n\t\t\t\t}\n\t\t\t]\n\t\t}\n\t},\n}\n</script>\n```\n\n### Use custom actions and content\nInstead of using the buttons property, you can also inject your custom actions using a named slot.\nYou can also use the default slot to inject custom content.\n\n```vue\n<template>\n\t<div style=\"display: flex; gap: 12px;\">\n\t\t<NcButton @click=\"showDialog = true\">Show dialog</NcButton>\n\t\t<NcButton @click=\"showLongDialog = true\">Show long dialog</NcButton>\n\t\t<NcDialog v-if=\"showDialog\" name=\"Warning\" no-close>\n\t\t\t<template #actions>\n\t\t\t\t<NcButton @click=\"showDialog = false\">Ok</NcButton>\n\t\t\t</template>\n\t\t\t<div style=\"color: red; font-weight: bold;\">This is serious</div>\n\t\t</NcDialog>\n\t\t<NcDialog v-model:open=\"showLongDialog\" name=\"Lorem Ipsum\">\n\t\t\t<p v-for=\"i in new Array(63)\" :key=\"i\">Lorem ipsum dolor sit amet.</p>\n\t\t</NcDialog>\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tshowDialog: false,\n\t\t\tshowLongDialog: false,\n\t\t}\n\t},\n}\n</script>\n```\n\n### Form example\nIt is also possible to use the dialog for small forms.\nThis can be used when asking for a password, a name or similar to have native form validation.\n\nTo make the dialog a form the `is-form` prop needs to be set.\nWhen using the form variant you can also pass buttons with `nativeType` prop to add a native `submit` button.\n\nNote that this is not possible if the dialog contains a navigation!\n\n```vue\n<template>\n\t<div>\n\t\t<NcButton @click=\"showDialog = true\">Show dialog</NcButton>\n\t\t<NcDialog is-form\n\t\t\t:buttons=\"buttons\"\n\t\t\tname=\"Choose a name\"\n\t\t\tv-model:open=\"showDialog\"\n\t\t\t@submit=\"currentName = newName\"\n\t\t\t@reset=\"newName = ''\"\n\t\t\t@closing=\"newName = ''\">\n\t\t\t<NcTextField v-model=\"newName\"\n\t\t\t\tlabel=\"New name\"\n\t\t\t\tminlength=\"6\"\n\t\t\t\tplaceholder=\"Min. 6 characters\"\n\t\t\t\trequired />\n\t\t</NcDialog>\n\t\t<p>New name: {{ currentName }}</p>\n\t</div>\n</template>\n<script>\nimport IconCheck from '@mdi/svg/svg/check.svg?raw'\n\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tshowDialog: false,\n\t\t\tnewName: '',\n\t\t\tcurrentName: 'none yet.',\n\t\t\tbuttons: [\n\t\t\t\t{\n\t\t\t\t\tlabel: 'Reset',\n\t\t\t\t\tnativeType: 'reset',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tlabel: 'Submit',\n\t\t\t\t\ttype: 'primary',\n\t\t\t\t\tnativeType: 'submit',\n\t\t\t\t\ticon: IconCheck,\n\t\t\t\t}\n\t\t\t]\n\t\t}\n\t},\n}\n</script>\n```\n\n### Loading buttons\nSometimes a dialog ends with a request and this request might fail due to server-side-validation.\nIn this case it is often desired to keep the dialog open, this can be done by returning `false` from the button callback,\nto not block this callback should return a `Promise<false>`.\n\nIt is also possible to get the result of the callback from the dialog, as the result is passed as the payload of the `closing` event.\n\nWhile the promise is awaited the button will have a loading state,\nthis means, as long as no custom `icon`-slot is used, a loading icon will be shown.\nPlease note that the **button will not be disabled or accessibility reasons**,\nbecause disabled elements cannot be focused and so the loading state could not be communicated e.g. via screen readers.\n\n```vue\n<template>\n\t<div>\n\t\t<NcButton @click=\"openDialog\">Show dialog</NcButton>\n\t\t<NcDialog :buttons=\"buttons\"\n\t\t\tname=\"Create user\"\n\t\t\t:message=\"message\"\n\t\t\t:open.sync=\"showDialog\"\n\t\t\t@closing=\"response = $event\"\n\t\t\t@update:open=\"clickClosesDialog = false\" />\n\t\t<div style=\"margin-top: 8px;\">Dialog response: {{ response }}</div>\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tshowDialog: false,\n\t\t\tclickClosesDialog: false,\n\t\t\tresponse: 'none',\n\t\t}\n\t},\n\n\tmethods: {\n\t\tasync callback() {\n\t\t\t// wait 3 seconds\n\t\t\tawait new Promise((resolve) => window.setTimeout(resolve, 3000))\n\t\t\tthis.clickClosesDialog = !this.clickClosesDialog\n\t\t\t// Do not close the dialog on first and then every second button click\n\t\t\tif (this.clickClosesDialog) {\n\t\t\t\t// return false means the dialog stays open\n\t\t\t\treturn false\n\t\t\t}\n\t\t\treturn '✅'\n\t\t},\n\n\t\topenDialog() {\n\t\t\tthis.response = 'none'\n\t\t\tthis.showDialog = true\n\t\t},\n\t},\n\n\tcomputed: {\n\t\tbuttons() {\n\t\t\treturn [\n\t\t\t\t{\n\t\t\t\t\tlabel: 'Create user',\n\t\t\t\t\ttype: 'primary',\n\t\t\t\t\tcallback: this.callback,\n\t\t\t\t}\n\t\t\t]\n\t\t},\n\t\tmessage() {\n\t\t\tif (this.clickClosesDialog) {\n\t\t\t\treturn 'Next button click will work and close the dialog.'\n\t\t\t} else {\n\t\t\t\treturn 'Clicking the button will load but not close the dialog.'\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n```\n</docs>\n\n<template>\n\t<NcModal v-if=\"open\"\n\t\tclass=\"dialog__modal\"\n\t\t:enable-slideshow=\"false\"\n\t\tdisable-swipe\n\t\tv-bind=\"modalProps\"\n\t\t@close=\"handleClosed\"\n\t\t@update:show=\"handleClosing()\">\n\t\t<!-- The dialog name / header -->\n\t\t<h2 :id=\"navigationId\" class=\"dialog__name\" v-text=\"name\" />\n\t\t<component :is=\"dialogTagName\"\n\t\t\tref=\"dialogElement\"\n\t\t\tclass=\"dialog\"\n\t\t\t:class=\"dialogClasses\"\n\t\t\tv-on=\"dialogListeners\">\n\t\t\t<div ref=\"wrapper\" :class=\"['dialog__wrapper', { 'dialog__wrapper--collapsed': isNavigationCollapsed }]\">\n\t\t\t\t<!-- When the navigation is collapsed (too small dialog) it is displayed above the main content, otherwise on the inline start -->\n\t\t\t\t<nav v-if=\"hasNavigation\"\n\t\t\t\t\tclass=\"dialog__navigation\"\n\t\t\t\t\t:class=\"navigationClasses\"\n\t\t\t\t\t:aria-label=\"navigationAriaLabelAttr\"\n\t\t\t\t\t:aria-labelledby=\"navigationAriaLabelledbyAttr\">\n\t\t\t\t\t<slot name=\"navigation\" :is-collapsed=\"isNavigationCollapsed\" />\n\t\t\t\t</nav>\n\t\t\t\t<!-- Main dialog content -->\n\t\t\t\t<div class=\"dialog__content\" :class=\"contentClasses\">\n\t\t\t\t\t<slot>\n\t\t\t\t\t\t<p class=\"dialog__text\">\n\t\t\t\t\t\t\t{{ message }}\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</slot>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<!-- The dialog actions aka the buttons -->\n\t\t\t<div class=\"dialog__actions\">\n\t\t\t\t<slot name=\"actions\">\n\t\t\t\t\t<NcDialogButton v-for=\"(button, idx) in buttons\"\n\t\t\t\t\t\t:key=\"idx\"\n\t\t\t\t\t\tv-bind=\"button\"\n\t\t\t\t\t\t@click=\"(_, result) => handleButtonClose(button, result)\" />\n\t\t\t\t</slot>\n\t\t\t</div>\n\t\t</component>\n\t</NcModal>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport type { ComponentProps } from '../../utils/VueTypes.ts'\n\nimport { useElementSize } from '@vueuse/core'\nimport { computed, defineComponent, ref } from 'vue'\n\nimport NcModal from '../NcModal/index.js'\nimport NcDialogButton from '../NcDialogButton/index.js'\n\nimport { createElementId } from '../../utils/createElementId.ts'\n\ntype NcDialogButtonProps = ComponentProps<typeof NcDialogButton>\n\nexport default defineComponent({\n\tname: 'NcDialog',\n\n\tcomponents: {\n\t\tNcDialogButton,\n\t\tNcModal,\n\t},\n\n\tprops: {\n\t\t/** Name of the dialog (the heading) */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/** Text of the dialog */\n\t\tmessage: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/** Additional elements to add to the focus trap */\n\t\tadditionalTrapElements: {\n\t\t\ttype: Array as PropType<(string|HTMLElement)[]>,\n\t\t\tvalidator: (arr: unknown) => {\n\t\t\t\treturn (\n\t\t\t\t\tArray.isArray(arr) && arr.every(\n\t\t\t\t\t\t(element) =>\n\t\t\t\t\t\t\ttypeof element === 'string' || element instanceof HTMLElement,\n\t\t\t\t\t)\n\t\t\t\t)\n\t\t\t},\n\t\t\tdefault: () => ([]),\n\t\t},\n\n\t\t/**\n\t\t * The element where to mount the dialog, if `null` is passed the dialog is mounted in place\n\t\t * @default 'body'\n\t\t */\n\t\tcontainer: {\n\t\t\ttype: String,\n\t\t\trequired: false,\n\t\t\tdefault: 'body',\n\t\t},\n\n\t\t/**\n\t\t * Whether the dialog should be shown\n\t\t * @default true\n\t\t */\n\t\topen: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/**\n\t\t * Size of the underlying NcModal\n\t\t * @default 'small'\n\t\t * @type {'small'|'normal'|'large'|'full'}\n\t\t */\n\t\tsize: {\n\t\t\ttype: String as PropType<'small'|'normal'|'large'|'full'>,\n\t\t\trequired: false,\n\t\t\tdefault: 'small',\n\t\t\tvalidator: (value: string) => ['small', 'normal', 'large', 'full'].includes(value),\n\t\t},\n\n\t\t/**\n\t\t * Buttons to display\n\t\t * @default []\n\t\t */\n\t\tbuttons: {\n\t\t\ttype: Array as PropType<NcDialogButtonProps[]>,\n\t\t\trequired: false,\n\t\t\tdefault: () => ([]),\n\t\t\tvalidator(value: unknown[]) {\n\t\t\t\treturn Array.isArray(value)\n\t\t\t\t\t&& value.every((element) => typeof element === 'object')\n\t\t\t},\n\t\t},\n\n\t\t/**\n\t\t * Do not show the close button for the dialog.\n\t\t * @default false\n\t\t */\n\t\tnoClose: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Close the dialog if the user clicked outside of the dialog\n\t\t * Only relevant if `noClose` is not set.\n\t\t */\n\t\tcloseOnClickOutside: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Make the dialog wrapper a HTML form element.\n\t\t * The buttons will be wrapped within the form so they can be used as submit / reset buttons.\n\t\t * Please note that when using the property the `navigation` should not be used.\n\t\t */\n\t\tisForm: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Declare if hiding the modal should be animated\n\t\t * @default false\n\t\t */\n\t\toutTransition: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Optionally pass additional classes which will be set on the navigation for custom styling\n\t\t * @default ''\n\t\t * @example\n\t\t * ```html\n\t\t * <DialogBase :navigation-classes=\"['mydialog-navigation']\"><!-- --></DialogBase>\n\t\t * <!-- ... -->\n\t\t * <style lang=\"scss\">\n\t\t * :deep(.mydialog-navigation) {\n\t\t *     flex-direction: row-reverse;\n\t\t * }\n\t\t * </style>\n\t\t * ```\n\t\t */\n\t\tnavigationClasses: {\n\t\t\ttype: [String, Array, Object],\n\t\t\trequired: false,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * aria-label for the dialog navigation.\n\t\t * Use it when you want to provide a more meaningful label than the dialog name.\n\t\t *\n\t\t * By default, navigation is labeled by the dialog name.\n\t\t */\n\t\tnavigationAriaLabel: {\n\t\t\ttype: String,\n\t\t\trequired: false,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * aria-labelledby for the dialog navigation.\n\t\t * Use it when you have an implicit navigation label (e.g. a heading).\n\t\t *\n\t\t * By default, navigation is labeled by the dialog name.\n\t\t */\n\t\tnavigationAriaLabelledby: {\n\t\t\ttype: String,\n\t\t\trequired: false,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Optionally pass additional classes which will be set on the content wrapper for custom styling\n\t\t * @default ''\n\t\t */\n\t\tcontentClasses: {\n\t\t\ttype: [String, Array, Object],\n\t\t\trequired: false,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Optionally pass additional classes which will be set on the dialog itself\n\t\t * (the default `class` attribute will be set on the modal wrapper)\n\t\t * @default ''\n\t\t */\n\t\tdialogClasses: {\n\t\t\ttype: [String, Array, Object],\n\t\t\trequired: false,\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\temits: ['closing', 'update:open', 'reset', 'submit'],\n\n\tsetup(props, { emit, slots }) {\n\t\t/**\n\t\t * The dialog wrapper element\n\t\t */\n\t\tconst wrapper = ref<HTMLDivElement>()\n\n\t\t/**\n\t\t * We use the dialog width to decide if we collapse the navigation (flex direction row)\n\t\t */\n\t\tconst { width: dialogWidth } = useElementSize(wrapper, { width: 900, height: 0 })\n\n\t\t/**\n\t\t * Whether the navigation is collapsed due to dialog and window size\n\t\t * (collapses when modal is below: 900px modal width - 2x 12px margin)\n\t\t */\n\t\tconst isNavigationCollapsed = computed(() => dialogWidth.value < 876)\n\n\t\t/**\n\t\t * Whether a navigation was passed and the element should be displayed\n\t\t */\n\t\tconst hasNavigation = computed(() => slots?.navigation !== undefined)\n\n\t\t/**\n\t\t * The unique id of the nav element\n\t\t */\n\t\tconst navigationId = createElementId()\n\n\t\t/**\n\t\t * aria-label attribute for the nav element\n\t\t */\n\t\tconst navigationAriaLabelAttr = computed(() => props.navigationAriaLabel || undefined)\n\n\t\t/**\n\t\t * aria-labelledby attribute for the nav element\n\t\t */\n\t\tconst navigationAriaLabelledbyAttr = computed(() => {\n\t\t\tif (props.navigationAriaLabel) {\n\t\t\t\t// Not needed, already labelled by aria-label\n\t\t\t\treturn undefined\n\t\t\t}\n\t\t\t// Use dialog name as a fallback label for navigation\n\t\t\treturn props.navigationAriaLabelledby || navigationId\n\t\t})\n\n\t\t/**\n\t\t * @type {import('vue').Ref<HTMLFormElement|undefined>}\n\t\t */\n\t\tconst dialogElement = ref()\n\t\t/**\n\t\t * The HTML element to use for the dialog wrapper - either form or plain div\n\t\t */\n\t\tconst dialogTagName = computed(() => props.isForm && !hasNavigation.value ? 'form' : 'div')\n\t\t/**\n\t\t * Listener to assign to the dialog element\n\t\t * This only sets the `@submit` listener if the dialog element is a form\n\t\t */\n\t\tconst dialogListeners = computed(() => dialogTagName.value === 'form'\n\t\t\t? {\n\t\t\t\t/**\n\t\t\t\t * @param {SubmitEvent} event Form submit event\n\t\t\t\t */\n\t\t\t\tsubmit(event) {\n\t\t\t\t\tevent.preventDefault()\n\t\t\t\t\t/** Forwarded HTMLFormElement submit event (only if `is-form` is set) */\n\t\t\t\t\temit('submit', event)\n\t\t\t\t},\n\t\t\t\t/**\n\t\t\t\t * @param {Event} event Form submit event\n\t\t\t\t */\n\t\t\t\treset(event) {\n\t\t\t\t\tevent.preventDefault()\n\t\t\t\t\t/**\n\t\t\t\t\t * Forwarded HTMLFormElement reset event (only if `is-form` is set).\n\t\t\t\t\t */\n\t\t\t\t\temit('reset', event)\n\t\t\t\t},\n\t\t\t}\n\t\t\t: {},\n\t\t)\n\n\t\t/**\n\t\t * If the underlying modal is shown\n\t\t */\n\t\tconst showModal = ref(true)\n\n\t\t// Because NcModal does not emit `close` when show prop is changed\n\t\t/**\n\t\t * Handle clicking a dialog button -> should close\n\t\t * @param {MouseEvent} button The button that was clicked\n\t\t * @param {unknown} result Result of the callback function\n\t\t */\n\t\tfunction handleButtonClose(button, result) {\n\t\t\t// Skip close on submit if invalid dialog\n\t\t\tif (button.nativeType === 'submit'\n\t\t\t\t&& dialogTagName.value === 'form'\n\t\t\t\t&& !dialogElement.value.reportValidity()) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\thandleClosing(result)\n\t\t\twindow.setTimeout(() => handleClosed(), 300)\n\t\t}\n\n\t\t/**\n\t\t * Handle closing the dialog, optional out transition did not run yet\n\t\t * @param result - The result of the callback\n\t\t */\n\t\tfunction handleClosing(result?: unknown): void {\n\t\t\tshowModal.value = false\n\t\t\t/**\n\t\t\t * Emitted when the dialog is closing, so the out transition did not finish yet.\n\t\t\t *\n\t\t\t * @param result - The result of the button callback (`undefined` if closing because of clicking the 'close'-button)\n\t\t\t */\n\t\t\temit('closing', result)\n\t\t}\n\n\t\t/**\n\t\t * Handle dialog closed (out transition finished)\n\t\t */\n\t\tconst handleClosed = () => {\n\t\t\tshowModal.value = true\n\t\t\t/**\n\t\t\t * Emitted then the dialog is fully closed and the out transition run\n\t\t\t */\n\t\t\temit('update:open', false)\n\t\t}\n\n\t\t/**\n\t\t * Properties to pass to the underlying NcModal\n\t\t */\n\t\tconst modalProps = computed(() => ({\n\t\t\tnoClose: props.noClose,\n\t\t\tcontainer: props.container === undefined ? 'body' : props.container,\n\t\t\t// we do not pass the name as we already have the name as the headline\n\t\t\t// name: props.name,\n\t\t\t// But we need to set the correct label id so the dialog is labelled\n\t\t\tlabelId: navigationId,\n\t\t\tsize: props.size,\n\t\t\tshow: props.open && showModal.value,\n\t\t\toutTransition: props.outTransition,\n\t\t\tcloseOnClickOutside: props.closeOnClickOutside,\n\t\t\tadditionalTrapElements: props.additionalTrapElements,\n\t\t}))\n\n\t\treturn {\n\t\t\tdialogElement,\n\t\t\tdialogListeners,\n\t\t\tdialogTagName,\n\t\t\thandleButtonClose,\n\t\t\thandleClosing,\n\t\t\thandleClosed,\n\t\t\thasNavigation,\n\t\t\tnavigationId,\n\t\t\tnavigationAriaLabelAttr,\n\t\t\tnavigationAriaLabelledbyAttr,\n\t\t\tisNavigationCollapsed,\n\t\t\tmodalProps,\n\t\t\twrapper,\n\t\t}\n\t},\n})\n</script>\n\n<style lang=\"scss\">\n/** When having the small dialog style we override the modal styling so dialogs look more dialog like */\n@media only screen and (max-width: $breakpoint-small-mobile) {\n\t.dialog__modal .modal-wrapper--small .modal-container {\n\t\twidth: fit-content;\n\t\theight: unset;\n\t\tmax-height: 90%;\n\t\tposition: relative;\n\t\ttop: unset;\n\t\tborder-radius: var(--border-radius-large);\n\t}\n}\n</style>\n\n<style lang=\"scss\" scoped>\n.dialog {\n\theight: 100%;\n\twidth: 100%;\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: space-between;\n\toverflow: hidden;\n\n\t&__modal {\n\t\t:deep(.modal-wrapper .modal-container) {\n\t\t\tdisplay: flex !important;\n\t\t\tpadding-block: 4px 0; // 4px to align with close button, 0 block-end to make overflowing content on scroll look nice\n\t\t\tpadding-inline: 12px 0; // Same as with padding-block, we need the actions to have a margin of 4px for the button outline\n\t\t}\n\t\t:deep(.modal-wrapper .modal-container__content) {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t\toverflow: hidden; // Only overflow on the .dialog__content\n\t\t}\n\t}\n\n\t&__wrapper {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\t// Auto scale to fit\n\t\tflex: 1;\n\t\tmin-height: 0;\n\t\toverflow: hidden;\n\n\t\t&--collapsed {\n\t\t\tflex-direction: column;\n\t\t}\n\t}\n\n\t&__navigation {\n\t\tdisplay: flex;\n\t\tflex-shrink: 0;\n\t}\n\n\t// Navigation styling when side-by-side with content\n\t&__wrapper:not(&__wrapper--collapsed) &__navigation {\n\t\tflex-direction: column;\n\n\t\toverflow: hidden auto;\n\t\theight: 100%;\n\t\tmin-width: 200px;\n\t\tmargin-inline-end: 20px;\n\t}\n\n\t// Navigation styling when on top of content\n\t&__wrapper#{&}__wrapper--collapsed &__navigation {\n\t\tflex-direction: row;\n\t\tjustify-content: space-between;\n\n\t\toverflow: auto hidden;\n\t\twidth: 100%;\n\t\tmin-width: 100%;\n\t}\n\n\t&__name {\n\t\tfont-size: 21px;\n\n\t\ttext-align: center;\n\t\theight: fit-content;\n\t\tmin-height: var(--default-clickable-area);\n\t\tline-height: var(--default-clickable-area);\n\t\toverflow-wrap: break-word;\n\t\tmargin-block: 0 12px;\n\t}\n\n\t&__content {\n\t\t// Auto fit\n\t\tflex: 1;\n\t\tmin-height: 0;\n\t\toverflow: auto;\n\t\t// see .dialog__modal, we can not set the padding there to prevent floating scroll bars\n\t\tpadding-inline-end: 12px;\n\t}\n\n\t// In case only text content is show\n\t&__text {\n\t\t// Also add padding to the bottom to make it more readable\n\t\tpadding-block-end: 6px;\n\t}\n\n\t&__actions {\n\t\tdisplay: flex;\n\t\tgap: 6px;\n\t\talign-content: center;\n\t\tjustify-content: end;\n\n\t\twidth: 100%;\n\t\tmax-width: 100%;\n\t\tpadding-inline: 0 12px; // 12px to align with the overall modal padding\n\t\tmargin-inline: 0;\n\t\tmargin-block: 0;\n\n\t\t&:not(:empty) {\n\t\t\tmargin-block: 6px 12px; // only if there are actions, we add margin so if it is empty scroll content looks nice\n\t\t}\n\t}\n}\n\n@media only screen and (max-width: $breakpoint-small-mobile) {\n\t// Ensure the dialog name does not interfere with the close button\n\t.dialog__name {\n\t\ttext-align: start;\n\t\tmargin-inline-end: var(--default-clickable-area);\n\t}\n}\n</style>\n"],"names":["NcDialogButton","_resolveComponent","_openBlock","_createBlock","_mergeProps","handleClosed","navigationId","_toDisplayString","dialogClasses","_toHandlers","_withCtx","_createElementVNode","hasNavigation","_createElementBlock","navigationAriaLabelledbyAttr","_renderSlot","_createCommentVNode","_normalizeClass","_Fragment","_renderList"],"mappings":"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"}