@nextcloud/vue
Version:
Nextcloud vue components
396 lines (395 loc) • 14.2 kB
JavaScript
import '../assets/NcDateTimePicker-4Zw7r2r4.css';
import { getFirstDay, getDayNamesMin, getDayNamesShort, getDayNames, getMonthNamesShort, getMonthNames } from "@nextcloud/l10n";
import DatePicker from "vue2-datepicker";
import { n as normalizeComponent } from "../chunks/_plugin-vue2_normalizer-DU4iP6Vu.mjs";
import { u as useModelMigration } from "../chunks/useModelMigration-EhAWvqDD.mjs";
import { r as register, K as t38, a as t } from "../chunks/_l10n-BEfeU7gr.mjs";
import { G as GenRandomId } from "../chunks/GenRandomId-F5ebeBB_.mjs";
import { l as logger } from "../chunks/logger-D3RVzcfQ.mjs";
import { N as NcPopover } from "../chunks/NcPopover-DMUA5d7U.mjs";
import { N as NcTimezonePicker } from "../chunks/NcTimezonePicker-Cu1FrSIX.mjs";
import { S as ScopeComponent } from "../chunks/ScopeComponent-305QOaqN.mjs";
const _sfc_main$2 = {
name: "CalendarBlankIcon",
emits: ["click"],
props: {
title: {
type: String
},
fillColor: {
type: String,
default: "currentColor"
},
size: {
type: Number,
default: 24
}
}
};
var _sfc_render$2 = function render() {
var _vm = this, _c = _vm._self._c;
return _c("span", _vm._b({ staticClass: "material-design-icon calendar-blank-icon", attrs: { "aria-hidden": _vm.title ? null : "true", "aria-label": _vm.title, "role": "img" }, on: { "click": function($event) {
return _vm.$emit("click", $event);
} } }, "span", _vm.$attrs, false), [_c("svg", { staticClass: "material-design-icon__svg", attrs: { "fill": _vm.fillColor, "width": _vm.size, "height": _vm.size, "viewBox": "0 0 24 24" } }, [_c("path", { attrs: { "d": "M19,19H5V8H19M16,1V3H8V1H6V3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3H18V1" } }, [_vm.title ? _c("title", [_vm._v(_vm._s(_vm.title))]) : _vm._e()])])]);
};
var _sfc_staticRenderFns$2 = [];
var __component__$2 = /* @__PURE__ */ normalizeComponent(
_sfc_main$2,
_sfc_render$2,
_sfc_staticRenderFns$2,
false,
null,
null
);
const CalendarBlank = __component__$2.exports;
const _sfc_main$1 = {
name: "WebIcon",
emits: ["click"],
props: {
title: {
type: String
},
fillColor: {
type: String,
default: "currentColor"
},
size: {
type: Number,
default: 24
}
}
};
var _sfc_render$1 = function render2() {
var _vm = this, _c = _vm._self._c;
return _c("span", _vm._b({ staticClass: "material-design-icon web-icon", attrs: { "aria-hidden": _vm.title ? null : "true", "aria-label": _vm.title, "role": "img" }, on: { "click": function($event) {
return _vm.$emit("click", $event);
} } }, "span", _vm.$attrs, false), [_c("svg", { staticClass: "material-design-icon__svg", attrs: { "fill": _vm.fillColor, "width": _vm.size, "height": _vm.size, "viewBox": "0 0 24 24" } }, [_c("path", { attrs: { "d": "M16.36,14C16.44,13.34 16.5,12.68 16.5,12C16.5,11.32 16.44,10.66 16.36,10H19.74C19.9,10.64 20,11.31 20,12C20,12.69 19.9,13.36 19.74,14M14.59,19.56C15.19,18.45 15.65,17.25 15.97,16H18.92C17.96,17.65 16.43,18.93 14.59,19.56M14.34,14H9.66C9.56,13.34 9.5,12.68 9.5,12C9.5,11.32 9.56,10.65 9.66,10H14.34C14.43,10.65 14.5,11.32 14.5,12C14.5,12.68 14.43,13.34 14.34,14M12,19.96C11.17,18.76 10.5,17.43 10.09,16H13.91C13.5,17.43 12.83,18.76 12,19.96M8,8H5.08C6.03,6.34 7.57,5.06 9.4,4.44C8.8,5.55 8.35,6.75 8,8M5.08,16H8C8.35,17.25 8.8,18.45 9.4,19.56C7.57,18.93 6.03,17.65 5.08,16M4.26,14C4.1,13.36 4,12.69 4,12C4,11.31 4.1,10.64 4.26,10H7.64C7.56,10.66 7.5,11.32 7.5,12C7.5,12.68 7.56,13.34 7.64,14M12,4.03C12.83,5.23 13.5,6.57 13.91,8H10.09C10.5,6.57 11.17,5.23 12,4.03M18.92,8H15.97C15.65,6.75 15.19,5.55 14.59,4.44C16.43,5.07 17.96,6.34 18.92,8M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" } }, [_vm.title ? _c("title", [_vm._v(_vm._s(_vm.title))]) : _vm._e()])])]);
};
var _sfc_staticRenderFns$1 = [];
var __component__$1 = /* @__PURE__ */ normalizeComponent(
_sfc_main$1,
_sfc_render$1,
_sfc_staticRenderFns$1,
false,
null,
null
);
const Web = __component__$1.exports;
register(t38);
const formatMap = {
date: "YYYY-MM-DD",
datetime: "YYYY-MM-DD H:mm:ss",
year: "YYYY",
month: "YYYY-MM",
time: "H:mm:ss",
week: "w"
};
const _sfc_main = {
name: "NcDateTimePicker",
components: {
CalendarBlank,
DatePicker,
NcPopover,
NcTimezonePicker,
Web
},
inheritAttrs: false,
model: {
prop: "modelValue",
event: "update:modelValue"
},
props: {
/**
* Allow to clear the input.
*/
clearable: {
type: Boolean,
default: false
},
/**
* Default increment step for minutes in the time picker.
*/
minuteStep: {
type: Number,
default: 10
},
/**
* Since 8.25.0: Support 'date-range', 'time-range' and 'datetime-range' values.
*/
type: {
type: String,
default: "date",
validator: (type) => ["date", "time", "datetime", "week", "month", "year", "date-range", "time-range", "datetime-range"].includes(type)
},
/**
* Either `moment.js` formatting tokens or a function taking a Date object and returning a string.
* Warning: In v9 this will change the accepted token format to standardized Unicode tokens instead!
*/
format: {
type: [String, Function],
default: null
},
/**
* @deprecated use `format` instead
*/
formatter: {
type: Object,
default: null
},
/**
* The locale to use for formatting the shown dates.
* By default the users current Nextcloud locale is used.
*/
lang: {
type: Object,
default: null
},
/**
* Removed in v9 - use `modelValue` (`v-model`) instead
*
* @deprecated
*/
// eslint-disable-next-line
value: {
default: void 0
},
/**
* The value to initialize, but also two-way bind the selected date. The date is – like the `Date` object in
* JavaScript – tied to UTC. The selected time zone does not have an influence of the selected time and date
* value. You have to translate the time yourself when you want to factor in time zones.
*/
// eslint-disable-next-line
modelValue: {
default: () => /* @__PURE__ */ new Date()
},
/**
* The preselected IANA time zone ID for the time zone picker, only relevant in combination with `:show-timezone-select="true"`. Example: `Europe/Berlin`. The prop supports two-way binding through the .sync modifier.
*/
timezoneId: {
type: String,
default: "UTC"
},
/**
* Include a timezone picker within the menu.
* Please note that the dates are still bound to the locale timezone
* and any conversion needs to be done by the app itself.
*/
showTimezoneSelect: {
type: Boolean,
default: false
},
/**
* If set to true the timezone select icon will be highlighted.
*/
highlightTimezone: {
type: Boolean,
default: false
},
/**
* If set to true the menu will be placed on the `<body>`
* instead of default placement on the picker.
*/
appendToBody: {
type: Boolean,
default: false
},
/**
* Show the ISO week numbers within the calendar.
*/
showWeekNumber: {
type: Boolean,
default: false
},
/**
* Optional custom placeholder for the input box.
*/
placeholder: {
type: String,
default: null
},
/**
* @deprecated use the 'date-range' or 'datetime-range' type instead.
*/
range: {
type: Boolean,
default: false
}
},
emits: [
/**
* Removed in v9 - use `update:modelValue` (`v-model`) instead
*
* @deprecated
*/
"update:value",
"update:modelValue",
/** Same as update:modelValue for Vue 2 compatibility */
"update:model-value",
"update:timezone-id"
],
setup() {
const model = useModelMigration("value", "update:value");
return {
model,
timezoneDialogHeaderId: `timezone-dialog-header-${GenRandomId()}`
};
},
data() {
return {
showTimezonePopover: false,
tzVal: this.timezoneId
};
},
computed: {
realType() {
return this.type.split("-")[0];
},
/**
* Datepicker language
* https://github.com/mengxiong10/vue2-datepicker/blob/master/locale.md
*
* @return {object}
*/
defaultLang() {
return {
formatLocale: {
months: getMonthNames(),
monthsShort: getMonthNamesShort(),
weekdays: getDayNames(),
weekdaysShort: getDayNamesShort(),
weekdaysMin: getDayNamesMin(),
// 0 = sunday, 1 = monday
firstDayOfWeek: getFirstDay()
},
monthFormat: "MMMM"
};
},
/**
* Translated placeholder
*
* @return {string}
*/
defaultPlaceholder() {
if (this.realType === "time") {
return t("Pick a time");
}
if (this.realType === "month") {
return t("Pick a month");
}
if (this.realType === "year") {
return t("Pick a year");
}
if (this.realType === "week") {
return t("Pick a week");
}
if (this.realType === "date") {
return t("Pick a date");
}
return t("Pick a date and a time");
},
/**
* Is the range picker enabled
*/
internalRange() {
return this.range || this.type.endsWith("-range");
},
internalFormat() {
if (this.format && typeof this.format === "string") {
return this.format;
}
return formatMap[this.realType] || formatMap.date;
},
/**
* The formatter used for the vue-datepicker to fix nextcloud-libraries/nextcloud-vue#5044
*/
internalFormatter() {
const getWeek = (date) => {
const firstThursday = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));
firstThursday.setUTCDate(firstThursday.getUTCDate() + 4 - (firstThursday.getUTCDay() || 7));
const yearStart = new Date(Date.UTC(firstThursday.getUTCFullYear(), 0, 1));
return Math.ceil(((firstThursday - yearStart) / 864e5 + 1) / 7);
};
return {
getWeek,
// wrape the format if it is a function
...typeof this.format === "function" ? { stringify: this.format } : {},
// allow to override it by users using the `formatter` prop
...this.formatter ?? {}
};
}
},
methods: {
t,
handleSelectYear(year) {
const value = this.$refs.datepicker.currentValue;
if (value) {
try {
const date = new Date(new Date(value).setFullYear(year));
this.$refs.datepicker.selectDate(date);
} catch {
logger.error("Invalid value", value, year);
}
}
},
handleSelectMonth(month) {
const value = this.$refs.datepicker.currentValue;
if (value) {
try {
const date = new Date(new Date(value).setMonth(month));
this.$refs.datepicker.selectDate(date);
} catch {
logger.error("Invalid value", value, month);
}
}
},
/**
* Toggles the visibility of the time zone popover
*/
toggleTimezonePopover() {
if (!this.showTimezoneSelect) {
return;
}
this.showTimezonePopover = !this.showTimezonePopover;
}
}
};
var _sfc_render = function render3() {
var _vm = this, _c = _vm._self._c;
return _c("DatePicker", _vm._g(_vm._b({ ref: "datepicker", attrs: { "append-to-body": _vm.appendToBody, "clearable": _vm.clearable, "format": _vm.internalFormat, "formatter": _vm.internalFormatter, "lang": _vm.lang ? _vm.lang : _vm.defaultLang, "minute-step": _vm.minuteStep, "placeholder": _vm.placeholder ? _vm.placeholder : _vm.defaultPlaceholder, "popup-class": { "show-week-number": _vm.showWeekNumber }, "range": _vm.internalRange, "show-week-number": _vm.showWeekNumber, "type": _vm.realType, "value": _vm.model }, on: { "select-year": _vm.handleSelectYear, "select-month": _vm.handleSelectMonth, "input": function($event) {
_vm.model = $event;
} }, scopedSlots: _vm._u([{ key: "icon-calendar", fn: function() {
return [_vm.showTimezoneSelect ? _c("NcPopover", { attrs: { "popup-role": "dialog", "shown": _vm.showTimezonePopover, "popover-base-class": "timezone-select__popper" }, on: { "update:shown": function($event) {
_vm.showTimezonePopover = $event;
} }, scopedSlots: _vm._u([{ key: "trigger", fn: function({ attrs }) {
return [_c("button", _vm._b({ staticClass: "datetime-picker-inline-icon", class: { "datetime-picker-inline-icon--highlighted": _vm.highlightTimezone }, on: { "mousedown": function($event) {
$event.stopPropagation();
$event.preventDefault();
return (() => {
}).apply(null, arguments);
} } }, "button", attrs, false), [_c("Web", { attrs: { "size": 20 } })], 1)];
} }], null, false, 3026992387) }, [_c("div", { attrs: { "role": "dialog", "aria-labelledby": _vm.timezoneDialogHeaderId } }, [_c("div", { staticClass: "timezone-popover-wrapper__label" }, [_c("strong", { attrs: { "id": _vm.timezoneDialogHeaderId } }, [_vm._v(" " + _vm._s(_vm.t("Please select a time zone:")) + " ")])]), _c("NcTimezonePicker", { staticClass: "timezone-popover-wrapper__timezone-select", on: { "input": function($event) {
return _vm.$emit("update:timezone-id", arguments[0]);
} }, model: { value: _vm.tzVal, callback: function($$v) {
_vm.tzVal = $$v;
}, expression: "tzVal" } })], 1)]) : _c("CalendarBlank", { attrs: { "size": 20 } })];
}, proxy: true }, _vm._l(_vm.$scopedSlots, function(_, slot) {
return { key: slot, fn: function(scope) {
return [_vm._t(slot, null, null, scope)];
} };
})], null, true) }, "DatePicker", _vm.$attrs, false), _vm.$listeners));
};
var _sfc_staticRenderFns = [];
var __component__ = /* @__PURE__ */ normalizeComponent(
_sfc_main,
_sfc_render,
_sfc_staticRenderFns,
false,
null,
"02dc6799"
);
const NcDateTimePicker = __component__.exports;
ScopeComponent(NcDateTimePicker);
export {
NcDateTimePicker as default
};
//# sourceMappingURL=NcDateTimePicker.mjs.map