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

package/dateinput/DateInput.mjs

@@ -0,0 +1,477 @@
+/**
+ * @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 w, ref as T, inject as S, createVNode as r, isVNode as _ } from "vue";
+import { cloneDate as u, isEqual as B } from "@progress/kendo-date-math";
+import { provideIntlService as O, provideLocalizationService as P } from "@progress/kendo-vue-intl";
+import { KendoDate as E } from "./models/kendo-date.mjs";
+import { validatePackage as A, guid as z, kendoThemeMaps as D, canUseDOM as c, getRef as L, getDefaultSlots as j, noop as R, setRef as N } from "@progress/kendo-vue-common";
+import { Button as v } from "@progress/kendo-vue-buttons";
+import { packageMetadata as K } from "../package-metadata.mjs";
+import { defaultFormat as q, defaultFormatPlaceholder as H, approximateStringMatching as U, isInRange as X } from "./utils.mjs";
+import { MAX_DATE as Y, MIN_DATE as G } from "../utils.mjs";
+import { increaseValue as h, messages as m, decreaseValue as p } from "../messages/main.mjs";
+import { isInTimeRange as W } from "../timepicker/utils.mjs";
+import { MAX_TIME as J, MIN_TIME as Q } from "../defaults.mjs";
+import { FloatingLabel as Z } from "@progress/kendo-vue-labels";
+import { caretAltUpIcon as ee, caretAltDownIcon as te } from "@progress/kendo-svg-icons";
+function ae(e) {
+  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !_(e);
+}
+const ie = "Please enter a valid value!", Se = /* @__PURE__ */ w({
+  name: "DateInput",
+  model: {
+    event: "changemodel"
+  },
+  inject: {
+    kendoIntlService: {
+      default: null
+    },
+    kendoLocalizationService: {
+      default: null
+    }
+  },
+  emits: {
+    change: null,
+    changemodel: null,
+    "update:modelValue": null,
+    focus: null,
+    blur: null
+  },
+  props: {
+    modelValue: Date,
+    value: Date,
+    defaultValue: Date,
+    format: {
+      type: [String, Object],
+      default: function() {
+        return q;
+      }
+    },
+    formatPlaceholder: {
+      type: [String, Object],
+      default: function() {
+        return H;
+      }
+    },
+    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);
+      }
+    },
+    tabIndex: Number,
+    title: String,
+    steps: Object,
+    placeholder: String,
+    max: {
+      type: Date,
+      default: function() {
+        return u(Y);
+      }
+    },
+    min: {
+      type: Date,
+      default: function() {
+        return u(G);
+      }
+    },
+    maxTime: {
+      type: Date,
+      default: function() {
+        return u(J);
+      }
+    },
+    minTime: {
+      type: Date,
+      default: function() {
+        return u(Q);
+      }
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    spinners: {
+      type: Boolean,
+      default: !1
+    },
+    name: String,
+    dir: String,
+    label: String,
+    id: String,
+    validationMessage: {
+      type: String,
+      default: ie
+    },
+    required: {
+      type: Boolean,
+      default: !1
+    },
+    validityStyles: {
+      type: Boolean,
+      default: !0
+    },
+    validate: Boolean,
+    valid: {
+      type: Boolean,
+      default: void 0
+    },
+    ariaRole: {
+      type: String,
+      default: "textbox"
+    },
+    ariaControls: String,
+    ariaLabel: String,
+    ariaExpanded: {
+      type: Boolean,
+      default: void 0
+    },
+    ariaHasPopup: {
+      type: String,
+      default: void 0
+    }
+  },
+  data() {
+    return {
+      kendoDate: null,
+      currentFormat: void 0,
+      valueDuringOnChange: void 0,
+      hasMounted: !1,
+      isEmpty: void 0,
+      lastSelectedSymbol: void 0,
+      isFocused: !1
+    };
+  },
+  created() {
+    A(K);
+    const {
+      formatPlaceholder: e,
+      format: t,
+      value: a,
+      defaultValue: i
+    } = this.$props;
+    this.kendoDate = new E(this.intl, e, t), this.kendoDate.setValue(null), this._emptyText = this.kendoDate.getTextAndFormat().text, this.kendoDate.setValue(a || i || null), this._element = null, this._inputId = z();
+  },
+  computed: {
+    computedValue() {
+      return this.$data.valueDuringOnChange !== void 0 ? this.$data.valueDuringOnChange : this.kendoDate && this.kendoDate.getDateObject();
+    },
+    wrapperClassNames() {
+      const e = !this.$data.hasMounted || !this.$props.validityStyles || this.validity().valid, t = this.$props.disabled, {
+        size: a,
+        fillMode: i,
+        rounded: n
+      } = this.$props;
+      return {
+        "k-dateinput": !0,
+        "k-input": !0,
+        [`k-input-${D.sizeMap[a] || a}`]: a,
+        [`k-input-${i}`]: i,
+        [`k-rounded-${D.roundedMap[n] || n}`]: n,
+        "k-disabled": t,
+        "k-invalid": !e && e !== void 0,
+        "k-focus": this.isFocused,
+        "k-rtl": this.$props.dir === "rtl"
+      };
+    }
+  },
+  methods: {
+    selection() {
+      let e = {
+        start: 0,
+        end: 0
+      };
+      const t = this.element();
+      return t !== null && t.selectionStart !== void 0 && (e = {
+        start: t.selectionStart,
+        end: t.selectionEnd
+      }), e;
+    },
+    element() {
+      return this._element;
+    },
+    focus(e) {
+      this._element && this._element.focus(e);
+    },
+    handleFocus(e) {
+      this.$data.isFocused = !0, this.$emit("focus", e);
+    },
+    handleBlur(e) {
+      this.$data.isFocused = !1, this.$emit("blur", e);
+    },
+    intl() {
+      return O(this);
+    },
+    setValidity() {
+      const e = this.element();
+      e && e.setCustomValidity && e.setCustomValidity(this.validity().valid ? "" : this.$props.validationMessage);
+    },
+    spinnersMouseDown(e) {
+      const t = this.element();
+      e.preventDefault(), t && c && document.activeElement !== t && t.focus({
+        preventScroll: !0
+      });
+    },
+    elementChange(e) {
+      const t = this.element();
+      if (!t || !this.kendoDate)
+        return;
+      const {
+        text: a,
+        format: i
+      } = this.kendoDate.getTextAndFormat();
+      this.$data.currentFormat = i;
+      const n = this.computedValue, s = U(a, this.$data.currentFormat, t.value, this.selection().start), o = s.length === 1 && s[0][1] === "_";
+      if (!o)
+        for (let l = 0; l < s.length; l++)
+          this.kendoDate.parsePart(s[l][0], s[l][1]);
+      s.length && s[0][0] !== "_" && this.setSelection(this.selectionBySymbol(s[0][0])), o && this.switchDateSegment(1), this.triggerChange(e, n);
+    },
+    elementClick(e) {
+      this.setSelection(this.selectionByIndex(this.selection().start));
+    },
+    wheel(e) {
+      const t = this.element();
+      c && document.activeElement !== t || (e.deltaY < 0 && (e.preventDefault(), this.increasePart(e)), e.deltaY > 0 && (e.preventDefault(), this.decreasePart(e)));
+    },
+    increasePart(e) {
+      e.preventDefault(), this.modifyDateSegmentValue(1, e);
+    },
+    decreasePart(e) {
+      e.preventDefault(), this.modifyDateSegmentValue(-1, e);
+    },
+    elementKeyDown(e) {
+      if (!e.altKey) {
+        switch (e.keyCode) {
+          case 37:
+            this.switchDateSegment(-1);
+            break;
+          case 38:
+            this.modifyDateSegmentValue(1, e);
+            break;
+          case 39:
+            this.switchDateSegment(1);
+            break;
+          case 40:
+            this.modifyDateSegmentValue(-1, e);
+            break;
+          default:
+            return;
+        }
+        e.preventDefault();
+      }
+    },
+    setSelection(e) {
+      const t = this.element();
+      this.$data.lastSelectedSymbol = this.$data.currentFormat[e.start], c && window.requestAnimationFrame(() => {
+        t && c && document.activeElement === t && t.setSelectionRange(e.start, e.end);
+      });
+    },
+    triggerChange(e, t) {
+      this.$data.valueDuringOnChange = this.computedValue, B(t, this.computedValue) || (this.$emit("changemodel", this.computedValue), this.$emit("update:modelValue", this.computedValue), this.$emit("change", {
+        event: e,
+        value: this.computedValue,
+        component: this,
+        target: {
+          name: this.$props.name,
+          value: this.$data.valueDuringOnChange,
+          valueAsDate: this.$data.valueDuringOnChange
+        },
+        validity: this.validity()
+      })), this.$data.valueDuringOnChange = void 0;
+    },
+    selectionBySymbol(e) {
+      let t = -1, a = 0;
+      for (let i = 0; i < this.$data.currentFormat.length; i++)
+        this.$data.currentFormat[i] === e && (a = i + 1, t === -1 && (t = i));
+      return t < 0 && (t = 0), {
+        start: t,
+        end: a
+      };
+    },
+    selectionByIndex(e) {
+      let t = {
+        start: e,
+        end: e
+      };
+      for (let a = e, i = e - 1; a < this.$data.currentFormat.length || i >= 0; a++, i--) {
+        if (a < this.$data.currentFormat.length && this.$data.currentFormat[a] !== "_") {
+          t = this.selectionBySymbol(this.$data.currentFormat[a]);
+          break;
+        }
+        if (i >= 0 && this.$data.currentFormat[i] !== "_") {
+          t = this.selectionBySymbol(this.$data.currentFormat[i]);
+          break;
+        }
+      }
+      return t;
+    },
+    switchDateSegment(e) {
+      const {
+        start: t,
+        end: a
+      } = this.selection();
+      if (t < a && this.$data.currentFormat[t] !== this.$data.currentFormat[a - 1]) {
+        this.setSelection(this.selectionByIndex(e > 0 ? t : a - 1));
+        return;
+      }
+      const i = this.$data.currentFormat[t];
+      let n = t + e;
+      for (; n > 0 && n < this.$data.currentFormat.length && !(this.$data.currentFormat[n] !== i && this.$data.currentFormat[n] !== "_"); )
+        n += e;
+      if (this.$data.currentFormat[n] === "_")
+        return;
+      let s = n;
+      for (; s >= 0 && s < this.$data.currentFormat.length && this.$data.currentFormat[s] === this.$data.currentFormat[n]; )
+        s += e;
+      n > s && (s + 1 !== t || n + 1 !== a) ? this.setSelection({
+        start: s + 1,
+        end: n + 1
+      }) : n < s && (n !== t || s !== a) && this.setSelection({
+        start: n,
+        end: s
+      });
+    },
+    modifyDateSegmentValue(e, t) {
+      if (!this.kendoDate)
+        return;
+      const a = this.computedValue, i = this.$data.currentFormat[this.selection().start], n = this.kendoDate.symbolMap(i), s = ((this.$props.steps || {})[n] || 1) * e;
+      this.kendoDate.modifyPart(i, s), this.setSelection(this.selectionBySymbol(i)), this.triggerChange(t, a);
+    },
+    validity() {
+      const e = X(this.computedValue, this.$props.min, this.$props.max) && W(this.computedValue, this.$props.minTime, this.$props.maxTime), t = this.$props.validationMessage !== void 0, a = (!this.$props.required || this.computedValue !== null) && e, i = this.$props.valid !== void 0 ? this.$props.valid : a;
+      return {
+        customError: t,
+        rangeOverflow: this.computedValue && this.$props.max.getTime() < this.computedValue.getTime() || !1,
+        rangeUnderflow: this.computedValue && this.computedValue.getTime() < this.$props.min.getTime() || !1,
+        valid: i,
+        valueMissing: this.computedValue === null
+      };
+    }
+  },
+  mounted() {
+    this._element = L(this, "input"), this.setValidity(), this.$data.hasMounted = !0;
+  },
+  updated() {
+    this.$data.lastSelectedSymbol && this.setSelection(this.selectionBySymbol(this.$data.lastSelectedSymbol)), this.setValidity();
+  },
+  setup() {
+    const e = T(null), t = S("kendoIntlService", {}), a = S("kendoLocalizationService", {});
+    return {
+      inputRef: e,
+      kendoIntlService: t,
+      kendoLocalizationService: a
+    };
+  },
+  render() {
+    const e = j(this), t = P(this), {
+      formatPlaceholder: a,
+      format: i,
+      value: n,
+      modelValue: s,
+      name: o,
+      label: l,
+      id: b,
+      ariaLabel: k,
+      ariaExpanded: V,
+      ariaHasPopup: F,
+      ariaRole: C,
+      ariaControls: I
+    } = this.$props, f = n !== void 0 ? n : s;
+    this.kendoDate.format = i, this.kendoDate.formatPlaceholder = a, this.valueDuringOnChange = this.valueDuringOnChange ? this.valueDuringOnChange : void 0, f !== void 0 && this.computedValue !== f && this.kendoDate.setValue(f);
+    const {
+      text: g,
+      format: M
+    } = this.kendoDate.getTextAndFormat();
+    this.$data.currentFormat = M, this.$data.isEmpty = g === this._emptyText;
+    const $ = this.$props.placeholder !== void 0 && this.$data.isEmpty && !this.$data.isFocused ? null : g, y = b || this._inputId, x = !this.$props.validityStyles || this.validity().valid, d = r("span", {
+      class: this.wrapperClassNames,
+      dir: this.$props.dir
+    }, [r("input", {
+      role: C,
+      tabindex: this.$props.tabIndex,
+      disabled: this.$props.disabled,
+      title: this.$props.title !== void 0 ? this.$props.title : g,
+      type: "text",
+      spellcheck: !1,
+      autocomplete: "off",
+      autocorrect: "off",
+      class: "k-input-inner",
+      id: y,
+      placeholder: this.$props.placeholder,
+      onWheel: this.wheel,
+      onClick: this.elementClick,
+      onInput: this.elementChange,
+      onKeydown: this.elementKeyDown,
+      onChange: R,
+      onFocusin: this.handleFocus,
+      onFocusout: this.handleBlur,
+      value: $,
+      name: o,
+      "aria-label": k,
+      "aria-expanded": V,
+      "aria-haspopup": F,
+      "aria-controls": I,
+      "aria-disabled": this.$props.disabled,
+      ref: N(this, "input")
+    }, null), e, this.$props.spinners && r("span", {
+      class: "k-input-spinner k-spin-button",
+      onMousedown: this.spinnersMouseDown
+    }, [r(v, {
+      type: "button",
+      tabIndex: -1,
+      icon: "caret-alt-up",
+      svgIcon: ee,
+      size: this.$props.size,
+      fillMode: this.$props.fillMode,
+      class: "k-spinner-increase",
+      "aria-label": t.toLanguageString(h, m[h]),
+      title: t.toLanguageString(h, m[h]),
+      onClick: this.increasePart
+    }, null), r(v, {
+      type: "button",
+      tabIndex: -1,
+      class: "k-spinner-decrease",
+      icon: "caret-alt-down",
+      svgIcon: te,
+      size: this.$props.size,
+      fillMode: this.$props.fillMode,
+      "aria-label": t.toLanguageString(p, m[p]),
+      title: t.toLanguageString(p, m[p]),
+      onClick: this.decreasePart
+    }, null)])]);
+    return l ? r(Z, {
+      label: l,
+      editorId: y,
+      editorValue: $,
+      editorPlaceholder: this.$props.placeholder,
+      editorValid: x,
+      editorDisabled: this.$props.disabled
+    }, ae(d) ? d : {
+      default: () => [d]
+    }) : d;
+  }
+});
+export {
+  Se as DateInput
+};

package/dateinput/models/kendo-date.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 r=require("@progress/kendo-date-math"),p=require("./mask.js"),M=require("../utils.js");class y{constructor(t,e,s){this.year=!0,this.month=!0,this.date=!0,this.hours=!0,this.minutes=!0,this.seconds=!0,this.milliseconds=!0,this.leadingZero=null,this.typedMonthPart="",this.knownParts="adHhmMsEy",this.symbols={E:"E",H:"H",M:"M",a:"a",d:"d",h:"h",m:"m",s:"s",y:"y"},this._value=r.getDate(new Date),this.intlProvider=t,this.formatPlaceholder=e,this.format=s,this.monthNames=this.allFormatedMonths()}get intl(){return this.intlProvider()}get value(){return this._value}setValue(t){t?r.isEqual(t,this._value)||(this._value=r.cloneDate(t),this.modifyExisting(!0)):(this._value=r.getDate(new Date),this.modifyExisting(!1))}hasValue(){const t=(e,s)=>e||s.type!=="literal"&&s.type!=="dayperiod"&&this.getExisting(s.pattern[0]);return this.intl.splitDateFormat(this.format).reduce(t,!1)}getDateObject(){for(let t=0;t<this.knownParts.length;t++)if(!this.getExisting(this.knownParts[t]))return null;return r.cloneDate(this.value)}getTextAndFormat(){return this.merge(this.intl.formatDate(this.value,this.format),this.dateFormatString(this.value,this.format))}modifyExisting(t){const e=this.dateFormatString(this.value,this.format).symbols;for(let s=0;s<e.length;s++)this.setExisting(e[s],t)}getExisting(t){switch(t){case"y":return this.year;case"M":case"L":return this.month;case"d":return this.date;case"E":return this.date&&this.month&&this.year;case"h":case"H":return this.hours;case"m":return this.minutes;case"s":return this.seconds;default:return!0}}setExisting(t,e){switch(t){case"y":this.year=e,e===!1&&this._value.setFullYear(2e3);break;case"M":this.month=e,e===!1&&this._value.setMonth(0);break;case"d":this.date=e;break;case"h":case"H":this.hours=e;break;case"m":this.minutes=e;break;case"s":this.seconds=e;break;default:return}}modifyPart(t,e){let s=r.cloneDate(this.value);switch(t){case"y":s.setFullYear(s.getFullYear()+e);break;case"M":s=r.addMonths(this.value,e);break;case"d":case"E":s.setDate(s.getDate()+e);break;case"h":case"H":s.setHours(s.getHours()+e);break;case"m":s.setMinutes(s.getMinutes()+e);break;case"s":s.setSeconds(s.getSeconds()+e);break;case"a":s.setHours(s.getHours()+12*e);break}this.setExisting(t,!0),this._value=s}parsePart(t,e){if(this.resetLeadingZero(),!e)return this.setExisting(t,!1),{value:null};const s=this.intl.formatDate(this.value,this.format),n=this.dateFormatString(this.value,this.format),h=n.symbols;let i=!1,l="",o="",m="";for(let u=0;u<s.length;u++)h[u]===t?(o+=this.getExisting(t)?s[u]:"0",i=!0):i?m+=s[u]:l+=s[u];let a=null;const c=this.matchMonth(e);for(;o.length>0&&o.charAt(0)==="0";)o=o.slice(1);o.length>=4&&(o="");for(let u=0;u<2;u++){let g=o+e,f=parseInt(g,10);if(a=this.intl.parseDate(l+g+m,this.format),!a&&!isNaN(f)&&!isNaN(parseInt(e,10))){if(t==="M"&&!c){const d=f-1;d>-1&&d<12&&(a=r.cloneDate(this.value),a.setMonth(d),a.getMonth()!==d&&(a=r.lastDayOfMonth(r.addMonths(a,-1))))}t==="y"&&(a=r.createDate(parseInt(g,10),this.month?this.value.getMonth():0,this.date?this.value.getDate():1,this.hours?this.value.getHours():0,this.minutes?this.value.getMinutes():0,this.seconds?this.value.getSeconds():0,this.milliseconds?this.value.getMilliseconds():0),this.date&&a.getDate()!==this.value.getDate()&&(a=r.lastDayOfMonth(r.addMonths(a,-1))))}if(a)return this._value=a,this.setExisting(t,!0),{value:this.value};o=""}return c&&(a=this.intl.parseDate(l+c+m,this.format),a)?(this._value=a,this.setExisting(t,!0),{value:this.value}):(e==="0"&&(this.leadingZero=this.isAbbrMonth(n.partMap,t)?null:{[t]:!0},this.setExisting(t,!1)),{value:null})}symbolMap(t){return this.intl.splitDateFormat(this.format).reduce(M.dateSymbolMap,{})[t]}resetLeadingZero(){const t=this.leadingZero!==null;return this.leadingZero=null,t}isAbbrMonth(t,e){const s=this.partPattern(t,e);return s.type==="month"&&s.names}partPattern(t,e){return t.filter(s=>s.pattern.indexOf(e)!==-1)[0]}matchMonth(t){if(this.typedMonthPart+=t.toLowerCase(),this.monthNames.length===0)return"";for(;this.typedMonthPart.length>0;){for(let s=0;s<this.monthNames.length;s++)if(this.monthNames[s].toLowerCase().indexOf(this.typedMonthPart)===0)return this.monthNames[s];const e=parseInt(this.typedMonthPart,10);if(e>=1&&e<=12&&e.toString()===this.typedMonthPart)return this.monthNames[e-1];this.typedMonthPart=this.typedMonthPart.substring(1,this.typedMonthPart.length)}return""}allFormatedMonths(){const t=this.intl.splitDateFormat(this.format);for(let e=0;e<t.length;e++)if(t[e].type==="month"&&t[e].names)return this.intl.dateFormatNames(t[e].names);return[]}dateFormatString(t,e){const s=this.intl.splitDateFormat(e),n=[],h=[];for(let l=0;l<s.length;l++){let o=this.intl.formatDate(t,{pattern:s[l].pattern}).length;for(;o>0;)n.push(this.symbols[s[l].pattern[0]]||"_"),h.push(s[l]),o--}const i=new p.Mask;return i.symbols=n.join(""),i.partMap=h,i}merge(t,e){let s="",n="",h=e.symbols;for(let i=h.length-1;i>=0;i--)if(this.knownParts.indexOf(h[i])===-1||this.getExisting(h[i]))s=t[i]+s,n=h[i]+n;else{const l=h[i];for(;i>=0&&l===h[i];)i--;for(i++,this.leadingZero&&this.leadingZero[l]?s="0"+s:s=this.dateFieldName(e.partMap[i])+s;n.length<s.length;)n=h[i]+n}return{text:s,format:n}}dateFieldName(t){const e=this.formatPlaceholder||"wide";return e[t.type]?e[t.type]:e==="formatPattern"?t.pattern:this.intl.dateFieldName(Object.assign(t,{nameType:e}))}}exports.KendoDate=y;