buefy 1.0.0 → 1.0.2

package/dist/cjs/datetimepicker.js

@@ -0,0 +1,483 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+var FormElementMixin = require('./FormElementMixin-DavX4iOv.js');
+var helpers = require('./helpers.js');
+var config = require('./config-DR826Ki2.js');
+var Input = require('./Input-BcloGeZ3.js');
+var Datepicker = require('./Datepicker-B-9ReBe6.js');
+var Timepicker = require('./Timepicker-CDZ3V-2J.js');
+var _pluginVue_exportHelper = require('./_plugin-vue_export-helper-Die8u8yB.js');
+var plugins = require('./plugins-DbyYGVpp.js');
+require('./Icon-lsDKE2wQ.js');
+require('./CompatFallthroughMixin-hhK0Gkhr.js');
+require('./Dropdown-DtpKU9qf.js');
+require('./trapFocus-BlX6xykt.js');
+require('./DropdownItem-IMOKyRGV.js');
+require('./Field-19ZCJFF8.js');
+require('./Select-DayPKwCY.js');
+require('./TimepickerMixin-C9WVvcUL.js');
+
+const AM = "AM";
+const PM = "PM";
+var _sfc_main = vue.defineComponent({
+  name: "BDatetimepicker",
+  components: {
+    BDatepicker: Datepicker.BDatepicker,
+    BInput: Input.BInput,
+    BTimepicker: Timepicker.Timepicker
+  },
+  mixins: [FormElementMixin.FormElementMixin],
+  inheritAttrs: false,
+  props: {
+    modelValue: {
+      type: [Date, null]
+    },
+    editable: {
+      type: Boolean,
+      default: false
+    },
+    placeholder: String,
+    horizontalTimePicker: Boolean,
+    disabled: Boolean,
+    firstDayOfWeek: {
+      type: Number,
+      default: () => {
+        if (typeof config.config.defaultFirstDayOfWeek === "number") {
+          return config.config.defaultFirstDayOfWeek;
+        } else {
+          return 0;
+        }
+      }
+    },
+    rulesForFirstWeek: {
+      type: Number,
+      default: () => 4
+    },
+    icon: String,
+    iconRight: String,
+    iconRightClickable: Boolean,
+    iconPack: String,
+    inline: Boolean,
+    openOnFocus: Boolean,
+    position: String,
+    mobileNative: {
+      type: Boolean,
+      default: true
+    },
+    minDatetime: Date,
+    maxDatetime: Date,
+    nearbyMonthDays: {
+      type: Boolean,
+      default: config.config.defaultDatepickerNearbyMonthDays
+    },
+    datetimeFormatter: {
+      type: Function
+    },
+    datetimeParser: {
+      type: Function
+    },
+    datetimeCreator: {
+      type: Function,
+      default: (date) => {
+        if (typeof config.config.defaultDatetimeCreator === "function") {
+          return config.config.defaultDatetimeCreator(date);
+        } else {
+          return date;
+        }
+      }
+    },
+    datepicker: Object,
+    timepicker: Object,
+    tzOffset: {
+      type: Number,
+      default: 0
+    },
+    focusable: {
+      type: Boolean,
+      default: true
+    },
+    appendToBody: Boolean
+  },
+  emits: {
+    /* eslint-disable @typescript-eslint/no-unused-vars */
+    "active-change": (_active) => true,
+    "change-month": (_month) => true,
+    "change-year": (_year) => true,
+    "icon-right-click": () => true,
+    "update:modelValue": (_value) => true
+    /* eslint-enable @typescript-eslint/no-unused-vars */
+  },
+  data() {
+    return {
+      newValue: this.adjustValue(this.modelValue)
+    };
+  },
+  computed: {
+    computedValue: {
+      get() {
+        return this.newValue;
+      },
+      set(value) {
+        if (value) {
+          let val = new Date(value.getTime());
+          if (this.newValue) {
+            if ((value.getDate() !== this.newValue.getDate() || value.getMonth() !== this.newValue.getMonth() || value.getFullYear() !== this.newValue.getFullYear()) && value.getHours() === 0 && value.getMinutes() === 0 && value.getSeconds() === 0) {
+              val.setHours(
+                this.newValue.getHours(),
+                this.newValue.getMinutes(),
+                this.newValue.getSeconds(),
+                0
+              );
+            }
+          } else {
+            val = this.datetimeCreator(value);
+          }
+          if (this.minDatetime && val < this.adjustValue(this.minDatetime)) {
+            val = this.adjustValue(this.minDatetime);
+          } else if (this.maxDatetime && val > this.adjustValue(this.maxDatetime)) {
+            val = this.adjustValue(this.maxDatetime);
+          }
+          this.newValue = new Date(val.getTime());
+        } else {
+          this.newValue = this.adjustValue(value);
+        }
+        const adjustedValue = this.adjustValue(this.newValue, true);
+        this.$emit("update:modelValue", adjustedValue);
+      }
+    },
+    localeOptions() {
+      return new Intl.DateTimeFormat(this.locale, {
+        year: "numeric",
+        month: "numeric",
+        day: "numeric",
+        hour: "numeric",
+        minute: "numeric",
+        second: this.enableSeconds() ? "numeric" : void 0
+      }).resolvedOptions();
+    },
+    dtf() {
+      return new Intl.DateTimeFormat(this.locale, {
+        year: this.localeOptions.year || "numeric",
+        month: this.localeOptions.month || "numeric",
+        day: this.localeOptions.day || "numeric",
+        hour: this.localeOptions.hour || "numeric",
+        minute: this.localeOptions.minute || "numeric",
+        second: this.enableSeconds() ? this.localeOptions.second || "numeric" : void 0,
+        hourCycle: !this.isHourFormat24() ? "h12" : "h23"
+      });
+    },
+    isMobileNative() {
+      return this.mobileNative && this.tzOffset === 0;
+    },
+    isMobile() {
+      return this.isMobileNative && helpers.isMobile.any();
+    },
+    minDate() {
+      if (!this.minDatetime) {
+        return this.datepicker ? this.adjustValue(this.datepicker.minDate) : null;
+      }
+      const adjMinDatetime = this.adjustValue(this.minDatetime);
+      return new Date(
+        adjMinDatetime.getFullYear(),
+        adjMinDatetime.getMonth(),
+        adjMinDatetime.getDate(),
+        0,
+        0,
+        0,
+        0
+      );
+    },
+    maxDate() {
+      if (!this.maxDatetime) {
+        return this.datepicker ? this.adjustValue(this.datepicker.maxDate) : null;
+      }
+      const adjMaxDatetime = this.adjustValue(this.maxDatetime);
+      return new Date(
+        adjMaxDatetime.getFullYear(),
+        adjMaxDatetime.getMonth(),
+        adjMaxDatetime.getDate(),
+        0,
+        0,
+        0,
+        0
+      );
+    },
+    minTime() {
+      if (!this.minDatetime || (this.newValue === null || typeof this.newValue === "undefined")) {
+        return this.timepicker ? this.adjustValue(this.timepicker.minTime) : null;
+      }
+      const adjMinDatetime = this.adjustValue(this.minDatetime);
+      if (adjMinDatetime.getFullYear() === this.newValue.getFullYear() && adjMinDatetime.getMonth() === this.newValue.getMonth() && adjMinDatetime.getDate() === this.newValue.getDate()) {
+        return adjMinDatetime;
+      }
+      return void 0;
+    },
+    maxTime() {
+      if (!this.maxDatetime || (this.newValue === null || typeof this.newValue === "undefined")) {
+        return this.timepicker ? this.adjustValue(this.timepicker.maxTime) : null;
+      }
+      const adjMaxDatetime = this.adjustValue(this.maxDatetime);
+      if (adjMaxDatetime.getFullYear() === this.newValue.getFullYear() && adjMaxDatetime.getMonth() === this.newValue.getMonth() && adjMaxDatetime.getDate() === this.newValue.getDate()) {
+        return adjMaxDatetime;
+      }
+      return void 0;
+    },
+    datepickerSize() {
+      return this.datepicker && this.datepicker.size ? this.datepicker.size : this.size;
+    },
+    timepickerSize() {
+      return this.timepicker && this.timepicker.size ? this.timepicker.size : this.size;
+    },
+    timepickerDisabled() {
+      return this.timepicker && this.timepicker.disabled ? this.timepicker.disabled : this.disabled;
+    },
+    disabledOrUndefined() {
+      return this.disabled || void 0;
+    }
+  },
+  watch: {
+    modelValue() {
+      this.newValue = this.adjustValue(this.modelValue);
+    },
+    tzOffset() {
+      this.newValue = this.adjustValue(this.modelValue);
+    }
+  },
+  methods: {
+    enableSeconds() {
+      if (this.$refs.timepicker) {
+        return this.$refs.timepicker.enableSeconds;
+      }
+      return false;
+    },
+    isHourFormat24() {
+      if (this.$refs.timepicker) {
+        return this.$refs.timepicker.isHourFormat24;
+      }
+      return !this.localeOptions.hour12;
+    },
+    adjustValue(value, reverse = false) {
+      if (!value) return value;
+      if (reverse) {
+        return new Date(value.getTime() - this.tzOffset * 6e4);
+      } else {
+        return new Date(value.getTime() + this.tzOffset * 6e4);
+      }
+    },
+    defaultDatetimeParser(date) {
+      if (typeof this.datetimeParser === "function") {
+        return this.datetimeParser(date);
+      } else if (typeof config.config.defaultDatetimeParser === "function") {
+        return config.config.defaultDatetimeParser(date);
+      } else {
+        if (this.dtf.formatToParts && typeof this.dtf.formatToParts === "function") {
+          const dayPeriods = [AM, PM, AM.toLowerCase(), PM.toLowerCase()];
+          if (this.$refs.timepicker) {
+            dayPeriods.push(this.$refs.timepicker.amString);
+            dayPeriods.push(this.$refs.timepicker.pmString);
+          }
+          const parts = this.dtf.formatToParts(/* @__PURE__ */ new Date());
+          const formatRegex = parts.map((part, idx) => {
+            if (part.type === "literal") {
+              if (idx + 1 < parts.length && parts[idx + 1].type === "hour") {
+                return "[^\\d]+";
+              }
+              return part.value.replace(/ /g, "\\s?");
+            } else if (part.type === "dayPeriod") {
+              return `((?!=<${part.type}>)(${dayPeriods.join("|")})?)`;
+            }
+            return `((?!=<${part.type}>)\\d+)`;
+          }).join("");
+          const datetimeGroups = helpers.matchWithGroups(formatRegex, date);
+          if (datetimeGroups.year && datetimeGroups.year.length === 4 && datetimeGroups.month && +datetimeGroups.month <= 12 && datetimeGroups.day && +datetimeGroups.day <= 31 && datetimeGroups.hour && +datetimeGroups.hour >= 0 && +datetimeGroups.hour < 24 && datetimeGroups.minute && +datetimeGroups.minute >= 0 && +datetimeGroups.minute <= 59) {
+            const d = new Date(
+              +datetimeGroups.year,
+              +datetimeGroups.month - 1,
+              +datetimeGroups.day,
+              +datetimeGroups.hour,
+              +datetimeGroups.minute,
+              +(datetimeGroups.second || 0)
+            );
+            return d;
+          }
+        }
+        return new Date(Date.parse(date));
+      }
+    },
+    defaultDatetimeFormatter(date) {
+      date = date;
+      if (typeof this.datetimeFormatter === "function") {
+        return this.datetimeFormatter(date);
+      } else if (typeof config.config.defaultDatetimeFormatter === "function") {
+        return config.config.defaultDatetimeFormatter(date);
+      } else {
+        return this.dtf.format(date);
+      }
+    },
+    /*
+    * Parse date from string
+    */
+    onChangeNativePicker(event) {
+      const date = event.target.value;
+      const s = date ? date.split(/\D/) : [];
+      if (s.length >= 5) {
+        const year = parseInt(s[0], 10);
+        const month = parseInt(s[1], 10) - 1;
+        const day = parseInt(s[2], 10);
+        const hours = parseInt(s[3], 10);
+        const minutes = parseInt(s[4], 10);
+        this.computedValue = new Date(year, month, day, hours, minutes);
+      } else {
+        this.computedValue = null;
+      }
+    },
+    /*
+     * Emit 'active-change' on datepicker active state change
+     */
+    onActiveChange(value) {
+      this.$emit("active-change", value);
+    },
+    formatNative(value) {
+      const date = new Date(value);
+      if (value && !isNaN(date.valueOf())) {
+        const year = date.getFullYear();
+        const month = date.getMonth() + 1;
+        const day = date.getDate();
+        const hours = date.getHours();
+        const minutes = date.getMinutes();
+        const seconds = date.getSeconds();
+        return year + "-" + ((month < 10 ? "0" : "") + month) + "-" + ((day < 10 ? "0" : "") + day) + "T" + ((hours < 10 ? "0" : "") + hours) + ":" + ((minutes < 10 ? "0" : "") + minutes) + ":" + ((seconds < 10 ? "0" : "") + seconds);
+      }
+      return "";
+    },
+    toggle() {
+      this.$refs.datepicker.toggle();
+    }
+  },
+  mounted() {
+    if (!this.isMobile || this.inline) {
+      if (this.newValue) {
+        this.$refs.datepicker.$forceUpdate();
+      }
+    }
+  }
+});
+
+const _hoisted_1 = { class: "level is-mobile" };
+const _hoisted_2 = {
+  key: 0,
+  class: "level-item has-text-centered"
+};
+const _hoisted_3 = { class: "level-item has-text-centered" };
+const _hoisted_4 = {
+  key: 1,
+  class: "level-item has-text-centered"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_b_timepicker = vue.resolveComponent("b-timepicker");
+  const _component_b_datepicker = vue.resolveComponent("b-datepicker");
+  const _component_b_input = vue.resolveComponent("b-input");
+  return !_ctx.isMobile || _ctx.inline ? (vue.openBlock(), vue.createBlock(_component_b_datepicker, vue.mergeProps({
+    key: 0,
+    ref: "datepicker",
+    modelValue: _ctx.computedValue,
+    "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => _ctx.computedValue = $event)
+  }, _ctx.datepicker, {
+    rounded: _ctx.rounded,
+    "open-on-focus": _ctx.openOnFocus,
+    position: _ctx.position,
+    loading: _ctx.loading,
+    inline: _ctx.inline,
+    editable: _ctx.editable,
+    expanded: _ctx.expanded,
+    "close-on-click": false,
+    "first-day-of-week": _ctx.firstDayOfWeek,
+    "rules-for-first-week": _ctx.rulesForFirstWeek,
+    "date-formatter": _ctx.defaultDatetimeFormatter,
+    "date-parser": _ctx.defaultDatetimeParser,
+    "min-date": _ctx.minDate,
+    "max-date": _ctx.maxDate,
+    "nearby-month-days": _ctx.nearbyMonthDays,
+    icon: _ctx.icon,
+    "icon-right": _ctx.iconRight,
+    "icon-right-clickable": _ctx.iconRightClickable,
+    "icon-pack": _ctx.iconPack,
+    size: _ctx.datepickerSize,
+    placeholder: _ctx.placeholder,
+    "horizontal-time-picker": _ctx.horizontalTimePicker,
+    range: false,
+    disabled: _ctx.disabledOrUndefined,
+    "mobile-native": _ctx.isMobileNative,
+    locale: _ctx.locale,
+    focusable: _ctx.focusable,
+    "append-to-body": _ctx.appendToBody,
+    onFocus: _ctx.onFocus,
+    onBlur: _ctx.onBlur,
+    onActiveChange: _ctx.onActiveChange,
+    onIconRightClick: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("icon-right-click")),
+    onChangeMonth: _cache[3] || (_cache[3] = ($event) => _ctx.$emit("change-month", $event)),
+    onChangeYear: _cache[4] || (_cache[4] = ($event) => _ctx.$emit("change-year", $event))
+  }), {
+    default: vue.withCtx(() => [
+      vue.createElementVNode("nav", _hoisted_1, [
+        _ctx.$slots.left !== void 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
+          vue.renderSlot(_ctx.$slots, "left")
+        ])) : vue.createCommentVNode("v-if", true),
+        vue.createElementVNode("div", _hoisted_3, [
+          vue.createVNode(_component_b_timepicker, vue.mergeProps({ ref: "timepicker" }, _ctx.timepicker, {
+            modelValue: _ctx.computedValue,
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.computedValue = $event),
+            inline: "",
+            editable: _ctx.editable,
+            "min-time": _ctx.minTime,
+            "max-time": _ctx.maxTime,
+            size: _ctx.timepickerSize,
+            disabled: _ctx.timepickerDisabled || void 0,
+            focusable: _ctx.focusable,
+            "mobile-native": _ctx.isMobileNative,
+            locale: _ctx.locale
+          }), null, 16, ["modelValue", "editable", "min-time", "max-time", "size", "disabled", "focusable", "mobile-native", "locale"])
+        ]),
+        _ctx.$slots.right !== void 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, [
+          vue.renderSlot(_ctx.$slots, "right")
+        ])) : vue.createCommentVNode("v-if", true)
+      ])
+    ]),
+    _: 3
+    /* FORWARDED */
+  }, 16, ["modelValue", "rounded", "open-on-focus", "position", "loading", "inline", "editable", "expanded", "first-day-of-week", "rules-for-first-week", "date-formatter", "date-parser", "min-date", "max-date", "nearby-month-days", "icon", "icon-right", "icon-right-clickable", "icon-pack", "size", "placeholder", "horizontal-time-picker", "disabled", "mobile-native", "locale", "focusable", "append-to-body", "onFocus", "onBlur", "onActiveChange"])) : (vue.openBlock(), vue.createBlock(_component_b_input, vue.mergeProps({
+    key: 1,
+    ref: "input",
+    type: "datetime-local",
+    autocomplete: "off",
+    "model-value": _ctx.formatNative(_ctx.computedValue),
+    placeholder: _ctx.placeholder,
+    size: _ctx.size,
+    icon: _ctx.icon,
+    "icon-pack": _ctx.iconPack,
+    rounded: _ctx.rounded,
+    loading: _ctx.loading,
+    max: _ctx.formatNative(_ctx.maxDate),
+    min: _ctx.formatNative(_ctx.minDate),
+    disabled: _ctx.disabledOrUndefined,
+    readonly: false
+  }, _ctx.$attrs, {
+    "use-html5-validation": _ctx.useHtml5Validation,
+    onChange: _ctx.onChangeNativePicker,
+    onFocus: _ctx.onFocus,
+    onBlur: _ctx.onBlur
+  }), null, 16, ["model-value", "placeholder", "size", "icon", "icon-pack", "rounded", "loading", "max", "min", "disabled", "use-html5-validation", "onChange", "onFocus", "onBlur"]));
+}
+var Datetimepicker = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render]]);
+
+const Plugin = {
+  install(Vue) {
+    plugins.registerComponent(Vue, Datetimepicker);
+  }
+};
+
+exports.BDatetimepicker = Datetimepicker;
+exports.default = Plugin;