@progress/kendo-vue-dateinputs 5.3.0-dev.202409130647 → 5.3.0-develop.1

package/timepicker/TimePicker.mjs

@@ -0,0 +1,481 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { defineComponent as Y, ref as Z, inject as ee, createVNode as n, h as y, isVNode as te } from "vue";
+import { FloatingLabel as ie } from "@progress/kendo-vue-labels";
+import { Popup as ne } from "@progress/kendo-vue-popup";
+import { cloneDate as _ } from "@progress/kendo-date-math";
+import { guid as $, getDefaultSlots as oe, classNames as f, templateRendering as b, getListeners as D, getTemplate as k, kendoThemeMaps as V, canUseDOM as le, Keys as o } from "@progress/kendo-vue-common";
+import { provideLocalizationService as se } from "@progress/kendo-vue-intl";
+import { Button as ae } from "@progress/kendo-vue-buttons";
+import { toggleClock as T, messages as B, toggleTimeSelector as C } from "../messages/main.mjs";
+import { DateInput as ue } from "../dateinput/DateInput.mjs";
+import { TimeSelector as re } from "./TimeSelector.mjs";
+import { MIN_TIME as de, MAX_TIME as he, setTime as F, MIDNIGHT_DATE as pe } from "../utils.mjs";
+import { isInRange as ce, isBiggerThanMax as me, isSmallerThanMin as fe } from "./utils.mjs";
+import { defaultFormatPlaceholder as ge } from "../dateinput/utils.mjs";
+import { clockIcon as Se } from "@progress/kendo-svg-icons";
+function g(e) {
+  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !te(e);
+}
+const Re = /* @__PURE__ */ Y({
+  name: "KendoTimePicker",
+  emits: {
+    changemodel: null,
+    "update:modelValue": null,
+    iconclick: null,
+    change: null,
+    focus: null,
+    blur: null,
+    keydown: null,
+    open: null,
+    close: null
+  },
+  model: {
+    event: "changemodel"
+  },
+  props: {
+    cancelButton: {
+      type: Boolean,
+      default: !0
+    },
+    nowButton: {
+      type: Boolean,
+      default: void 0
+    },
+    defaultShow: {
+      type: Boolean,
+      default: !1
+    },
+    modelValue: {
+      type: Date,
+      default: void 0
+    },
+    defaultValue: {
+      type: Date,
+      default: function() {
+        return null;
+      }
+    },
+    dateInput: {
+      type: [String, Object, Function],
+      default: function() {
+      }
+    },
+    popup: {
+      type: [String, Object, Function],
+      default: function() {
+      }
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    format: {
+      type: [String, Object],
+      default: function() {
+        return "t";
+      }
+    },
+    formatPlaceholder: {
+      type: [String, Object],
+      default: function() {
+        return ge;
+      }
+    },
+    rounded: {
+      type: String,
+      default: "medium",
+      validator: function(e) {
+        return ["small", "medium", "large", "full"].includes(e);
+      }
+    },
+    fillMode: {
+      type: String,
+      default: "solid",
+      validator: function(e) {
+        return ["solid", "flat", "outline"].includes(e);
+      }
+    },
+    size: {
+      type: String,
+      default: "medium",
+      validator: function(e) {
+        return ["small", "medium", "large"].includes(e);
+      }
+    },
+    id: String,
+    ariaLabelledBy: String,
+    ariaDescribedBy: String,
+    min: {
+      type: Date,
+      default: function() {
+        return de;
+      }
+    },
+    max: {
+      type: Date,
+      default: function() {
+        return he;
+      }
+    },
+    name: String,
+    label: String,
+    placeholder: String,
+    popupSettings: {
+      type: Object,
+      default: function() {
+        return {};
+      }
+    },
+    show: {
+      type: Boolean,
+      default: void 0
+    },
+    tabIndex: {
+      type: Number,
+      default: 0
+    },
+    steps: {
+      type: Object,
+      default: function() {
+        return {};
+      }
+    },
+    smoothScroll: {
+      type: Boolean,
+      default: !0
+    },
+    title: {
+      type: String,
+      default: function() {
+        return "";
+      }
+    },
+    value: {
+      type: Date,
+      default: function() {
+      }
+    },
+    width: [Number, String],
+    validationMessage: String,
+    required: {
+      type: Boolean,
+      default: !1
+    },
+    validityStyles: {
+      type: Boolean,
+      default: !0
+    },
+    validate: Boolean,
+    valid: {
+      type: Boolean,
+      default: void 0
+    }
+  },
+  created() {
+    this._anchor = $(), this._popupId = "popup" + $(), this._element = null, this._wrapper = null, this._dateInput = null, this._timeSelector = null, this.shouldFocusDateInput = !1, this.currentValue = this.$props.defaultValue, this.currentShow = this.$props.defaultShow;
+  },
+  inject: {
+    kendoLocalizationService: {
+      default: null
+    }
+  },
+  data() {
+    return {
+      currentValue: null,
+      currentShow: !1,
+      valueDuringOnChange: void 0,
+      showDuringOnChange: void 0,
+      isFocused: !1
+    };
+  },
+  computed: {
+    timeSelector() {
+      return this._timeSelector;
+    },
+    computedValue() {
+      const e = this.valueDuringOnChange !== void 0 ? this.valueDuringOnChange : this.$props.value !== void 0 ? this.$props.value : this.$props.modelValue !== void 0 ? this.$props.modelValue : this.$data.currentValue;
+      return e !== null ? _(e) : null;
+    },
+    computedShow() {
+      return this.showDuringOnChange !== void 0 ? this.showDuringOnChange : this.$props.show !== void 0 ? this.$props.show : this.currentShow;
+    }
+  },
+  watch: {
+    show: function(e, t) {
+      this._oldShow = t;
+    },
+    currentShow: function(e, t) {
+      this._oldShow = t;
+    }
+  },
+  mounted() {
+    this.computedShow && this.$forceUpdate(), this._dateInput = this.dateInputRef, this._timeSelector = this.$refs.timeSelector, this._wrapper = this.kendoAnchorRef, this._dateInput && this._dateInput.element() && this._dateInput.element().setAttribute("aria-haspopup", "true");
+  },
+  updated() {
+    this._dateInput = this.dateInputRef, this._timeSelector = this.$refs.timeSelector, this._wrapper = this.kendoAnchorRef, this._timeSelector && this.computedShow && !this._oldShow ? this._timeSelector.focusActiveList() : this._dateInput && this._dateInput.element() && !this.computedShow && this.shouldFocusDateInput && this._dateInput.element().focus({
+      preventScroll: !0
+    }), this.shouldFocusDateInput = !1;
+  },
+  setup() {
+    const e = Z(null), t = ee("kendoLocalizationService", {});
+    return {
+      kendoAnchorRef: e,
+      kendoLocalizationService: t
+    };
+  },
+  render() {
+    const e = oe(this), {
+      disabled: t,
+      tabIndex: i,
+      title: r,
+      id: l,
+      placeholder: d,
+      format: s,
+      formatPlaceholder: M,
+      smoothScroll: O,
+      width: S,
+      name: R,
+      steps: w,
+      cancelButton: z,
+      nowButton: x,
+      validationMessage: j,
+      required: A,
+      validityStyles: L,
+      ariaLabelledBy: we,
+      ariaDescribedBy: Ie,
+      size: h,
+      rounded: p,
+      fillMode: I
+    } = this.$props, {
+      popupClass: P,
+      appendTo: E,
+      animate: K
+    } = this.$props.popupSettings, c = !this.$props.validityStyles || this.validity().valid;
+    f("k-picker-wrap", {
+      "k-invalid": !c,
+      "k-disabled": t,
+      "k-focus": this.isFocused
+    });
+    const N = f("k-group k-reset", P), v = se(this), q = v.toLanguageString(T, B[T]), U = v.toLanguageString(C, B[C]), H = this.$props.dateInput ? b.call(this, this.$props.dateInput, D.call(this)) : void 0, G = n(ue, {
+      ref: (m) => {
+        this.dateInputRef = m;
+      },
+      placeholder: d,
+      disabled: t,
+      format: s,
+      formatPlaceholder: M,
+      id: l,
+      size: null,
+      rounded: null,
+      fillMode: null,
+      max: this.normalizeTime(this.$props.max),
+      min: this.normalizeTime(this.$props.min),
+      name: R,
+      onChange: this.handleInputValueChange,
+      required: A,
+      steps: w,
+      tabIndex: this.computedShow ? -1 : i,
+      title: r,
+      valid: this.validity().valid,
+      validationMessage: j,
+      validityStyles: L,
+      value: this.computedValue && this.normalizeTime(this.computedValue),
+      ariaHasPopup: "grid",
+      ariaExpanded: this.computedShow,
+      ariaRole: "combobox",
+      ariaControls: this._popupId
+    }, g(e) ? e : {
+      default: () => [e]
+    }), a = n(re, {
+      ref: "timeSelector",
+      cancelButton: z,
+      disabled: t,
+      nowButton: x,
+      format: s,
+      min: this.$props.min,
+      max: this.$props.max,
+      steps: w,
+      smoothScroll: O,
+      value: this.computedValue,
+      onChange: this.handleValueChange,
+      onReject: this.handleValueReject,
+      onFocus: this.timeFocus,
+      onBlur: this.timeBlur,
+      onKeydown: this.handleKeyDown
+    }, null), X = k.call(this, {
+      h: y,
+      template: H,
+      defaultRendering: G,
+      additionalListeners: {
+        change: this.handleInputValueChange
+      }
+    }), J = this.$props.popup ? b.call(this, this.$props.popup, D.call(this)) : void 0, Q = n(ne, {
+      show: this.computedShow,
+      anchor: this._anchor,
+      class: N,
+      id: this._popupId,
+      anchorAlign: {
+        horizontal: "left",
+        vertical: "bottom"
+      },
+      popupAlign: {
+        horizontal: "left",
+        vertical: "top"
+      },
+      appendTo: E,
+      animate: K
+    }, g(a) ? a : {
+      default: () => [a]
+    }), W = k.call(this, {
+      h: y,
+      template: J,
+      defaultRendering: Q,
+      defaultSlots: a
+    }), u = n("div", {
+      class: f("k-input", "k-timepicker", {
+        [`k-input-${V.sizeMap[h] || h}`]: h,
+        [`k-input-${I}`]: I,
+        [`k-rounded-${V.roundedMap[p] || p}`]: p,
+        "k-invalid": !c,
+        "k-required": this.required,
+        "k-disabled": this.$props.disabled,
+        "k-focus": this.isFocused
+      }),
+      onKeydown: this.handleKeyDown,
+      style: {
+        width: S
+      },
+      onFocusin: this.handleFocus,
+      onFocusout: this.handleBlur,
+      ref: (m) => {
+        this.kendoAnchorRef = m;
+      }
+    }, [X, n(ae, {
+      type: "button",
+      tabIndex: -1,
+      icon: "clock",
+      svgIcon: Se,
+      onMousedown: this.handleIconMouseDown,
+      onClick: this.handleIconClick,
+      title: U,
+      rounded: null,
+      class: "k-input-button",
+      "aria-controls": this._popupId,
+      "aria-label": q
+    }, null), W]);
+    return this.$props.label ? n(ie, {
+      label: this.$props.label,
+      editorId: l,
+      editorValid: c,
+      editorValue: this.getDateInputText(),
+      editorPlaceholder: this.$props.placeholder,
+      editorDisabled: this.$props.disabled,
+      style: {
+        width: S
+      }
+    }, g(u) ? u : {
+      default: () => [u]
+    }) : u;
+  },
+  methods: {
+    validity() {
+      const e = this.computedValue && this.normalizeTime(this.computedValue), t = this.normalizeTime(this.$props.min), i = this.normalizeTime(this.$props.max), r = ce(e, t, i), l = this.$props.validationMessage !== void 0, d = (!this.$props.required || this.computedValue !== null) && r, s = this.$props.valid !== void 0 ? this.$props.valid : d;
+      return {
+        customError: l,
+        rangeOverflow: me(e, i),
+        rangeUnderflow: fe(e, t),
+        valid: s,
+        valueMissing: this.computedValue === null
+      };
+    },
+    getDateInputText() {
+      return this.computedValue ? !0 : this._dateInput ? this._dateInput._element.value : "";
+    },
+    focus() {
+      this._dateInput && this._dateInput.focus();
+    },
+    normalizeTime(e) {
+      return F(pe, e);
+    },
+    setShow(e) {
+      this.computedShow !== e && (this.currentShow = e, this.$emit(e ? "open" : "close", {
+        component: this
+      }));
+    },
+    mergeTime(e) {
+      return this.computedValue && e ? F(this.computedValue, e) : e;
+    },
+    handleInputValueChange(e) {
+      const t = this.mergeTime(e.value);
+      this.handleValueChange({
+        ...e,
+        value: t
+      });
+    },
+    handleValueChange(e) {
+      this.currentValue = _(e.value), this.valueDuringOnChange = e.value, this.showDuringOnChange = !1, this.shouldFocusDateInput = !0, this.$emit("changemodel", this.computedValue), this.$emit("update:modelValue", this.computedValue), this.$emit("change", {
+        event: e.event,
+        value: this.computedValue,
+        show: this.computedShow,
+        component: this,
+        target: {
+          name: this.$props.name,
+          value: this.computedValue,
+          valueAsDate: this.computedValue
+        }
+      }), this.valueDuringOnChange = void 0, this.showDuringOnChange = void 0, this.setShow(!1);
+    },
+    handleFocus(e) {
+      this._oldShow = this.computedShow, this.isFocused = !0, this.$emit("focus", e);
+    },
+    handleBlur(e) {
+      this.createBlurTimeout(), this.$emit("blur", e);
+    },
+    timeBlur(e) {
+      this.$emit("blur", e), clearTimeout(this._blurTimeout), this.createBlurTimeout();
+    },
+    timeFocus() {
+      clearTimeout(this._blurTimeout);
+    },
+    createBlurTimeout() {
+      this._blurTimeout = setTimeout(() => {
+        this.isFocused = !1;
+        const e = document.activeElement && document.activeElement.closest(`#${this._popupId}`);
+        this._dateInput && le && document.activeElement !== this._dateInput.element() && !e && this.setShow(!1);
+      }, 200);
+    },
+    handleValueReject(e) {
+      this.setShow(!1);
+    },
+    handleIconClick(e) {
+      this.$props.disabled || (this.shouldFocusDateInput = !0, this.setShow(!this.computedShow), this.$emit("iconclick", e));
+    },
+    handleIconMouseDown(e) {
+      e.preventDefault();
+    },
+    handleKeyDown(e) {
+      const {
+        altKey: t,
+        keyCode: i
+      } = e;
+      if (i === o.tab && this._dateInput && e.target !== this._dateInput._element) {
+        e.preventDefault(), this.shouldFocusDateInput = !0, this.setShow(!1);
+        return;
+      }
+      if (i === o.esc) {
+        this.shouldFocusDateInput = !0, this.setShow(!1);
+        return;
+      }
+      t && (i === o.up || i === o.down) && (e.preventDefault(), e.stopPropagation(), this.shouldFocusDateInput = i === o.up, this.setShow(i === o.down)), this.$emit("keydown", e);
+    }
+  }
+});
+export {
+  Re as TimePicker
+};

package/timepicker/TimeSelector.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("vue"),d=require("@progress/kendo-vue-buttons"),r=require("@progress/kendo-date-math"),c=require("@progress/kendo-vue-common"),m=require("@progress/kendo-vue-intl"),a=require("../messages/main.js"),s=require("../utils.js"),u=require("./utils.js"),V=require("./TimePart.js");function p(e){return typeof e=="function"||Object.prototype.toString.call(e)==="[object Object]"&&!n.isVNode(e)}const y=n.defineComponent({name:"KendoTimeSelector",emits:{change:null,focus:null,blur:null},props:{cancelButton:{type:Boolean,default:!0},boundRange:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},format:{type:String,default:function(){return"t"}},max:{type:Date,default:function(){return s.MAX_TIME}},min:{type:Date,default:function(){return s.MIN_TIME}},nowButton:Boolean,steps:{type:Object,default:function(){return{}}},smoothScroll:{type:Boolean,default:!0},tabIndex:Number,value:{type:Date,default:function(){return null}},onChange:Function,onReject:Function,onKeydown:Function},created(){this.dateFormatParts=this.intl.splitDateFormat(this.$props.format),this.mergeValue=u.valueMerger(u.generateGetters(this.dateFormatParts)),this.hasActiveButton=this.hasActiveButton.bind(this),this.currentState=this.$props.value||s.MIDNIGHT_DATE,this.currentValue=this.$props.value},inject:{kendoIntlService:{default:null},kendoLocalizationService:{default:null}},data(){return{currentState:null,currentValue:null,valueDuringOnChange:void 0}},computed:{computedValue(){const e=this.valueDuringOnChange!==void 0?this.valueDuringOnChange:this.$props.value!==null?this.$props.value:this.currentValue;return e!==null?r.cloneDate(e):null},intl(){return m.provideIntlService(this)},current(){return this.currentState!==null?r.cloneDate(this.currentState):null}},mounted(){this.timePart=this.$refs.timePart,this._acceptButton=this.$refs.acceptButton,this._cancelButton=this.$refs.cancelButton},setup(){const e=n.inject("kendoIntlService",{}),t=n.inject("kendoLocalizationService",{});return{kendoIntlService:e,kendoLocalizationService:t}},render(){const{format:e,cancelButton:t,disabled:l,tabIndex:f,smoothScroll:g,min:v,max:S,boundRange:B,nowButton:k,steps:b}=this.$props,h=m.provideLocalizationService(this),i=h.toLanguageString(a.timePickerCancel,a.messages[a.timePickerCancel]),o=h.toLanguageString(a.timePickerSet,a.messages[a.timePickerSet]);return n.createVNode("div",{tabindex:l?void 0:f||0,class:c.classNames("k-timeselector",{"k-disabled":l}),onKeydown:this.handleKeyDown},[n.createVNode(V.TimePart,{ref:"timePart",value:this.current,onChange:this.handleChange,onNowclick:this.handleNowClick,format:e,smoothScroll:g,min:v,max:S,onFocus:this.handleFocus,onBlur:this.handleBlur,boundRange:B,disabled:l,nowButton:k,steps:b},null),n.createVNode("div",{class:"k-time-footer k-actions k-actions-stretched"},[t&&n.createVNode(d.Button,{type:"button",ref:"cancelButton",class:"k-time-cancel",onClick:this.handleReject,title:i,"aria-label":i},p(i)?i:{default:()=>[i]}),n.createVNode(d.Button,{type:"button",ref:"acceptButton",themeColor:"primary",class:"k-time-accept",onClick:this.handleAccept,title:o,"aria-label":o},p(o)?o:{default:()=>[o]})])])},methods:{handleBlur(e){this.$emit("blur",e)},handleFocus(e){this.$emit("focus",e)},focusActiveList(){this.timePart&&this.timePart.focus({preventScroll:!0})},hasActiveButton(){return this._acceptButton?c.canUseDOM&&(document.activeElement===this._acceptButton.$el||document.activeElement===this._cancelButton.$el):!1},handleKeyDown(e){const{keyCode:t}=e;switch(this.$emit("keydown",e),t){case c.Keys.enter:this.hasActiveButton()||this.handleAccept(e);return;default:return}},handleAccept(e){const t=this.mergeValue(r.cloneDate(this.computedValue||u.getNow()),this.timePart?this.timePart.computedValue:this.current);this.currentValue=t,this.valueDuringOnChange=t,this.$emit("change",{event:e,value:this.computedValue,target:this}),this.valueDuringOnChange=void 0},handleReject(e){this.currentState=this.computedValue,this.$emit("reject",e)},handleNowClick(e){const t=this.mergeValue(r.cloneDate(this.computedValue||u.getNow()),u.getNow());this.currentState=t,this.currentValue=t,this.valueDuringOnChange=t,this.$emit("change",{event:e,value:this.computedValue,target:this}),this.valueDuringOnChange=void 0},handleChange(e){this.currentState=e}}});exports.TimeSelector=y;