@nextcloud/vue
Version:
Nextcloud vue components
235 lines (234 loc) • 7.57 kB
JavaScript
import '../assets/NcDateTimePickerNative-ZqMiOh_m.css';
import { u as useModelMigration } from "../chunks/useModelMigration-EhAWvqDD.mjs";
import { G as GenRandomId } from "../chunks/GenRandomId-F5ebeBB_.mjs";
import { n as normalizeComponent } from "../chunks/_plugin-vue2_normalizer-DU4iP6Vu.mjs";
import { S as ScopeComponent } from "../chunks/ScopeComponent-305QOaqN.mjs";
const inputDateTypes = ["date", "datetime-local", "month", "time", "week"];
const _sfc_main = {
name: "NcDateTimePickerNative",
inheritAttrs: false,
model: {
prop: "modelValue",
event: "update:modelValue"
},
props: {
/**
* Removed in v9 - use `modelValue` (`v-model`) instead
*
* @deprecated
*/
value: {
type: Date,
default: void 0
},
/**
* 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.
* Pass null to clear the input field.
*/
modelValue: {
type: Date,
default: null
},
/**
* id attribute of the input field
*/
id: {
type: String,
default: () => "date-time-picker-" + GenRandomId(),
validator: (id) => id.trim() !== ""
},
/**
* type attribute of the input field
* default type: String
* The type of the input element, it can be `date`, `datetime-local`, `month`, `time`, `week`
*/
type: {
type: String,
default: "date",
validate: (name) => inputDateTypes.includes(name)
},
/**
* text inside the label element
* default type: String
*/
label: {
type: String,
default: "Please choose a date"
},
/**
* min attribute of the input field
* default type: null
*/
min: {
type: [Boolean, Date],
default: null
},
/**
* max attribute of the input field
* default type: null
*/
max: {
type: [Boolean, Date],
default: null
},
/**
* Flag to hide the label
* default type: String
* The hidden input label for accessibility purposes.
*/
hideLabel: {
type: Boolean,
default: false
},
/**
* Class to add to the input field.
* Necessary to use NcDateTimePickerNative in the NcActionInput component.
*/
inputClass: {
type: [Object, String],
default: ""
}
},
emits: [
/**
* Removed in v9 - use `update:modelValue` (`v-model`) instead
*
* @deprecated
*/
"input",
/**
* Emitted when the input value changes
*
* @return {Date} new chosen Date()
*/
"update:modelValue",
/** Same as update:modelValue for Vue 2 compatibility */
"update:model-value"
],
setup() {
const model = useModelMigration("value", "input");
return {
model
};
},
computed: {
formattedValue() {
return this.formatValue(this.model);
},
formattedMin() {
if (this.min) {
return this.formatValue(this.min);
}
return false;
},
formattedMax() {
if (this.max) {
return this.formatValue(this.max);
}
return false;
},
listeners() {
return {
...this.$listeners,
/**
* Handle the input event
*
* @param {InputEvent} $event input event payloads
*/
input: ($event) => {
if (isNaN($event.target.valueAsNumber)) {
this.model = null;
} else if (this.type === "time") {
const time = $event.target.value;
if (this.model === "") {
const { yyyy, MM, dd } = this.getReadableDate(/* @__PURE__ */ new Date());
this.model = /* @__PURE__ */ new Date(`${yyyy}-${MM}-${dd}T${time}`);
} else {
const { yyyy, MM, dd } = this.getReadableDate(this.model);
this.model = /* @__PURE__ */ new Date(`${yyyy}-${MM}-${dd}T${time}`);
}
} else if (this.type === "month") {
const MM = (new Date($event.target.value).getMonth() + 1).toString().padStart(2, "0");
if (this.model === "") {
const { yyyy, dd, hh, mm } = this.getReadableDate(/* @__PURE__ */ new Date());
this.model = /* @__PURE__ */ new Date(`${yyyy}-${MM}-${dd}T${hh}:${mm}`);
} else {
const { yyyy, dd, hh, mm } = this.getReadableDate(this.model);
this.model = /* @__PURE__ */ new Date(`${yyyy}-${MM}-${dd}T${hh}:${mm}`);
}
} else {
const timezoneOffsetSeconds = new Date($event.target.valueAsNumber).getTimezoneOffset() * 1e3 * 60;
const inputDateWithTimezone = $event.target.valueAsNumber + timezoneOffsetSeconds;
this.model = new Date(inputDateWithTimezone);
}
}
};
}
},
methods: {
/**
* Returns Object with string values of a Date
*
* @param {Date} value The selected value
* @return {object|undefined}
*/
getReadableDate(value) {
if (value instanceof Date) {
const yyyy = value.getFullYear().toString().padStart(4, "0");
const MM = (value.getMonth() + 1).toString().padStart(2, "0");
const dd = value.getDate().toString().padStart(2, "0");
const hh = value.getHours().toString().padStart(2, "0");
const mm = value.getMinutes().toString().padStart(2, "0");
return { yyyy, MM, dd, hh, mm };
}
},
/**
* Returns preformatted value for the input field
*
* @param {Date} value The selected value
* @return {string|undefined}
*/
formatValue(value) {
if (value instanceof Date) {
const { yyyy, MM, dd, hh, mm } = this.getReadableDate(value);
if (this.type === "datetime-local") {
return `${yyyy}-${MM}-${dd}T${hh}:${mm}`;
} else if (this.type === "date") {
return `${yyyy}-${MM}-${dd}`;
} else if (this.type === "month") {
return `${yyyy}-${MM}`;
} else if (this.type === "time") {
return `${hh}:${mm}`;
} else if (this.type === "week") {
const startDate = new Date(yyyy, 0, 1);
const daysSinceBeginningOfYear = Math.floor((value - startDate) / (24 * 60 * 60 * 1e3));
const weekNumber = Math.ceil(daysSinceBeginningOfYear / 7);
return `${yyyy}-W${weekNumber}`;
}
} else {
return "";
}
}
}
};
var _sfc_render = function render() {
var _vm = this, _c = _vm._self._c;
return _c("div", { staticClass: "native-datetime-picker" }, [_c("label", { staticClass: "native-datetime-picker--label", class: { "hidden-visually": _vm.hideLabel }, attrs: { "for": _vm.id } }, [_vm._v(" " + _vm._s(_vm.label) + " ")]), _c("input", _vm._g(_vm._b({ staticClass: "native-datetime-picker--input", class: _vm.inputClass, attrs: { "id": _vm.id, "type": _vm.type, "min": _vm.formattedMin, "max": _vm.formattedMax }, domProps: { "value": _vm.formattedValue } }, "input", _vm.$attrs, false), _vm.listeners))]);
};
var _sfc_staticRenderFns = [];
var __component__ = /* @__PURE__ */ normalizeComponent(
_sfc_main,
_sfc_render,
_sfc_staticRenderFns,
false,
null,
"6c1feae8"
);
const NcDateTimePickerNative = __component__.exports;
ScopeComponent(NcDateTimePickerNative);
export {
NcDateTimePickerNative as default
};
//# sourceMappingURL=NcDateTimePickerNative.mjs.map