@nextcloud/vue/dist/chunks/NcDateTimePickerNative-DXF3-uR3.mjs.map

Nextcloud vue components

{"version":3,"file":"NcDateTimePickerNative-DXF3-uR3.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 { t } from '../../l10n.ts'\nimport { createElementId } from '../../utils/createElementId.ts'\n\ndefineOptions({ inheritAttrs: false })\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 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\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\n\t\t\tclass=\"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\n\t\t\t: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-element) + 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","_createElementBlock","_normalizeClass","$props","_createElementVNode","hideLabel","id","label","_mergeProps","inputClass","type","$attrs"],"mappings":"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"}