@progress/kendo-vue-scheduler 3.5.0 → 3.5.1-dev.202208150613

package/dist/esm/editors/ResourceEditor.d.ts

@@ -0,0 +1,53 @@
+import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from '../additionalTypes';
+declare type DefaultData<V> = object | ((this: V) => {});
+declare type DefaultMethods<V> = {
+    [key: string]: (this: V, ...args: any[]) => any;
+};
+import { FieldRenderProps } from '@progress/kendo-vue-form';
+import { SchedulerResource } from '../models';
+/** @hidden */
+export interface ResourceEditorProps extends FieldRenderProps {
+    resource: SchedulerResource;
+    dataItems: any[];
+    textField: string;
+    valueField: string;
+    colorField?: string;
+    multiple?: boolean;
+    validationMessage: string;
+}
+/**
+ * @hidden
+ */
+export interface ResourceEditorState {
+}
+/**
+ * @hidden
+ */
+export interface ResourceEditorComputed {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface ResourceEditorMethods {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface ResourceEditorData {
+}
+/**
+ * @hidden
+ */
+export interface ResourceEditorAll extends Vue2type, ResourceEditorMethods, ResourceEditorData, ResourceEditorComputed, ResourceEditorState {
+}
+/**
+ * @hidden
+ */
+declare let ResourceEditorVue2: ComponentOptions<ResourceEditorAll, DefaultData<ResourceEditorData>, DefaultMethods<ResourceEditorAll>, ResourceEditorComputed, RecordPropsDefinition<ResourceEditorProps>>;
+/**
+ * @hidden
+ */
+declare const ResourceEditor: DefineComponent<ResourceEditorProps, any, ResourceEditorData, ResourceEditorComputed, ResourceEditorMethods, {}, {}, {}, string, ResourceEditorProps, ResourceEditorProps, {}>;
+export { ResourceEditor, ResourceEditorVue2 };

package/dist/esm/editors/ResourceEditor.js

@@ -0,0 +1,149 @@
+var __assign = this && this.__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+
+      for (var p in s) {
+        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+      }
+    }
+
+    return t;
+  };
+
+  return __assign.apply(this, arguments);
+}; // @ts-ignore
+
+
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+var inject = allVue.inject;
+import { DropDownList, MultiSelect } from '@progress/kendo-vue-dropdowns';
+import { isPresent } from '../utils.js';
+/**
+ * @hidden
+ */
+
+var ResourceEditorVue2 = {
+  name: 'KendoResourceEditor',
+  // @ts-ignore
+  emits: {
+    change: null
+  },
+  props: {
+    resource: Object,
+    dataItems: Array,
+    textField: String,
+    valueField: String,
+    colorField: String,
+    multiple: Boolean,
+    validationMessage: String,
+    value: [String, Number, Object],
+    touched: Boolean,
+    modified: Boolean,
+    visited: Boolean,
+    valid: Boolean,
+    name: String
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    return {
+      v3: v3
+    };
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var _this = this;
+
+    var h = gh || createElement;
+    var _a = this.$props,
+        colorField = _a.colorField,
+        textField = _a.textField,
+        valueField = _a.valueField;
+    var value = Array.isArray(this.$props.value) ? this.$props.dataItems.filter(function (item) {
+      return _this.$props.value.some(function (val) {
+        return item[_this.$props.valueField] === val;
+      });
+    }) : this.$props.dataItems.find(function (item) {
+      return item[_this.$props.valueField] === _this.$props.value;
+    });
+    var DropDownEditor = this.$props.multiple ? MultiSelect : DropDownList;
+
+    var valueRender = function valueRender(_h, _tdElement, props) {
+      return h("span", {
+        "class": "k-input-inner"
+      }, [colorField && props.value && h("span", {
+        key: 1,
+        "class": 'k-scheduler-mark',
+        style: {
+          backgroundColor: props.value[colorField],
+          marginRight: props.value[valueField] ? '8px' : '4px'
+        }
+      }), props.value && props.value[textField]]);
+    };
+
+    var itemRender = function itemRender(_h, _tdElement, props, listeners) {
+      return h("li", {
+        "class": __assign({
+          'k-item': true
+        }, props.itemClass),
+        onClick: listeners.onClick,
+        on: this.v3 ? undefined : {
+          "click": listeners.onClick
+        }
+      }, [colorField && h("span", {
+        key: 1,
+        "class": 'k-scheduler-mark',
+        style: {
+          backgroundColor: props.dataItem[colorField],
+          marginRight: isPresent(props.dataItem[valueField]) ? '8px' : '4px'
+        }
+      }), props.dataItem[textField]]);
+    };
+
+    return h(DropDownEditor, {
+      value: value,
+      attrs: this.v3 ? undefined : {
+        value: value,
+        dataItems: this.$props.dataItems,
+        textField: this.$props.textField,
+        dataItemKey: this.$props.valueField,
+        valid: this.$props.valid,
+        validationMessage: this.$props.validationMessage,
+        itemRender: itemRender,
+        valueRender: valueRender
+      },
+      onChange: this.handleChange,
+      on: this.v3 ? undefined : {
+        "change": this.handleChange
+      },
+      dataItems: this.$props.dataItems,
+      textField: this.$props.textField,
+      dataItemKey: this.$props.valueField,
+      valid: this.$props.valid,
+      validationMessage: this.$props.validationMessage,
+      itemRender: itemRender,
+      valueRender: valueRender
+    });
+  },
+  methods: {
+    handleChange: function handleChange(event) {
+      var valueField = event.component.$props.dataItemKey;
+      var newValue = this.$props.multiple ? (event.value || []).map(function (item) {
+        return item[valueField];
+      }) : event.value[valueField];
+      this.$emit('change', {
+        value: newValue
+      });
+    }
+  }
+};
+/**
+ * @hidden
+ */
+
+var ResourceEditor = ResourceEditorVue2;
+export { ResourceEditor, ResourceEditorVue2 };

package/dist/esm/editors/SchedulerFormEditor.d.ts

@@ -0,0 +1,262 @@
+import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from '../additionalTypes';
+declare type DefaultData<V> = object | ((this: V) => {});
+declare type DefaultMethods<V> = {
+    [key: string]: (this: V, ...args: any[]) => any;
+};
+import { FormRenderProps, FormElementProps } from '@progress/kendo-vue-form';
+import { Omit } from '../models/Omit';
+/**
+ * Represents the props of the Kendo UI for Vue `SchedulerFormEditor` component.
+ */
+export interface SchedulerFormEditorProps extends Omit<FormElementProps, 'children'>, FormRenderProps {
+    /** @hidden */
+    as?: any;
+    /**
+     * Specifies the `id` attribute of the root element.
+     */
+    id?: string;
+    /**
+     * Specifies the `tabIndex` attribute of the root element.
+     */
+    tabIndex?: number;
+    /**
+     * Overrides the component used for visualizing the `title` field label.
+     * The [Kendo UI for Vue Label]({% slug label_labels %}) component is used, by default.
+     *
+     * For more information, please refer to the [`Scheduler Form Editor Customization`]({% slug editing_scheduler_custom %}) article.
+     */
+    titleLabel?: any;
+    /**
+     * Overrides the component used for visualizing the `title` field error.
+     * The [Kendo UI for Vue Error]({% slug error_labels %}) component is used, by default.
+     *
+     * For more information, please refer to the [`Scheduler Form Editor Customization`]({% slug editing_scheduler_custom %}) article.
+     */
+    titleError?: any;
+    /**
+     * Overrides the component used for visualizing the `title` field editor.
+     * The [Kendo UI for Vue Input]({% slug overview_textbox %}) component is used, by default.
+     *
+     * For more information, please refer to the [`Scheduler Form Editor Customization`]({% slug editing_scheduler_custom %}) article.
+     */
+    titleEditor?: any;
+    /**
+     * Overrides the component used for visualizing the `start` field label.
+     * The [Kendo UI for Vue Label]({% slug label_labels %}) component is used, by default.
+     *
+     * For more information, please refer to the [`Scheduler Form Editor Customization`]({% slug editing_scheduler_custom %}) article.
+     */
+    startLabel?: any;
+    /**
+     * Overrides the component used for visualizing the `start` field error.
+     * The [Kendo UI for Vue Error]({% slug error_labels %}) component is used, by default.
+     *
+     * For more information, please refer to the [`Scheduler Form Editor Customization`]({% slug editing_scheduler_custom %}) article.
+     */
+    startError?: any;
+    /**
+     * Overrides the component used for visualizing the `start` field editor.
+     * The [Kendo UI for Vue DatePicker]({% slug overview_datepicker %}) or [Kendo UI for Vue DateTimePicker]({% slug overview_datetimepicker %}) component is used by default depending on the `allDay` field value.
+     *
+     * For more information, please refer to the [`Scheduler Form Editor Customization`]({% slug editing_scheduler_custom %}) article.
+     */
+    startEditor?: any;
+    /**
+     * Overrides the component used for visualizing the `start timezone` field label.
+     * The [Kendo UI for Vue Label]({% slug label_labels %}) component is used, by default.
+     *
+     * For more information, please refer to the [`Scheduler Form Editor Customization`]({% slug editing_scheduler_custom %}) article.
+     */
+    startTimezoneLabel?: any;
+    /**
+     * Overrides the component used for visualizing the `start timezone` field error.
+     * The [Kendo UI for Vue Error]({% slug error_labels %}) component is used, by default.
+     *
+     * For more information, please refer to the [`Scheduler Form Editor Customization`]({% slug editing_scheduler_custom %}) article.
+     */
+    startTimezoneError?: any;
+    /**
+     * Overrides the component used for visualizing the `start timezone` field editor.
+     * An extended [Kendo UI for Vue ComboBox]({% slug overview_combobox %}) component is used, by default.
+     *
+     * For more information, please refer to the [`Scheduler Form Editor Customization`]({% slug editing_scheduler_custom %}) article.
+     */
+    startTimezoneEditor?: any;
+    /**
+     * Overrides the component used for visualizing the `start timezone checked` label.
+     * The [Kendo UI for Vue Label]({% slug label_labels %}) component is used, by default.
+     *
+     * For more information, please refer to the [`Scheduler Form Editor Customization`]({% slug editing_scheduler_custom %}) article.
+     */
+    startTimezoneCheckedLabel?: any;
+    /**
+     * Overrides the component used for visualizing the `start timezone checked` editor.
+     * The [Kendo UI for Vue Checkbox]({% slug overview_checkbox %}) component is used, by default.
+     *
+     * For more information, please refer to the [`Scheduler Form Editor Customization`]({% slug editing_scheduler_custom %}) article.
+     */
+    startTimezoneCheckedEditor?: any;
+    /**
+     * Overrides the component used for visualizing the `end` field label.
+     * The [Kendo UI for Vue Label]({% slug label_labels %}) component is used, by default.
+     *
+     * For more information, please refer to the [`Scheduler Form Editor Customization`]({% slug editing_scheduler_custom %}) article.
+     */
+    endLabel?: any;
+    /**
+     * Overrides the component used for visualizing the `end` field error.
+     * The [Kendo UI for Vue Error]({% slug error_labels %}) component is used, by default.
+     *
+     * For more information, please refer to the [`Scheduler Form Editor Customization`]({% slug editing_scheduler_custom %}) article.
+     */
+    endError?: any;
+    /**
+     * Overrides the component used for visualizing the `end` field editor.
+     * The [Kendo UI for Vue DatePicker]({% slug overview_datepicker %}) or [Kendo UI for Vue DateTimePicker]({% slug overview_datetimepicker %}) component is used by default depending on the `allDay` field value.
+     *
+     * For more information, please refer to the [`Scheduler Form Editor Customization`]({% slug editing_scheduler_custom %}) article.
+     */
+    endEditor?: any;
+    /**
+     * Overrides the component used for visualizing the `end timezone` field label.
+     * The [Kendo UI for Vue Label]({% slug label_labels %}) component is used, by default.
+     *
+     * For more information, please refer to the [`Scheduler Form Editor Customization`]({% slug editing_scheduler_custom %}) article.
+     */
+    endTimezoneLabel?: any;
+    /**
+     * Overrides the component used for visualizing the `end timezone` field error.
+     * The [Kendo UI for Vue Error]({% slug error_labels %}) component is used, by default.
+     *
+     * For more information, please refer to the [`Scheduler Form Editor Customization`]({% slug editing_scheduler_custom %}) article.
+     */
+    endTimezoneError?: any;
+    /**
+     * Overrides the component used for visualizing the `end timezone` field editor.
+     * An extended [Kendo UI for Vue ComboBox]({% slug overview_combobox %}) component is used, by default.
+     *
+     * For more information, please refer to the [`Scheduler Form Editor Customization`]({% slug editing_scheduler_custom %}) article.
+     */
+    endTimezoneEditor?: any;
+    /**
+     * Overrides the component used for visualizing the `start timezone checked` label.
+     * The [Kendo UI for Vue Label]({% slug label_labels %}) component is used, by default.
+     *
+     * For more information, please refer to the [`Scheduler Form Editor Customization`]({% slug editing_scheduler_custom %}) article.
+     */
+    endTimezoneCheckedLabel?: any;
+    /**
+     * Overrides the component used for visualizing the `end timezone checked` editor.
+     * The [Kendo UI for Vue Checkbox]({% slug overview_checkbox %}) component is used, by default.
+     *
+     * For more information, please refer to the [`Scheduler Form Editor Customization`]({% slug editing_scheduler_custom %}) article.
+     */
+    endTimezoneCheckedEditor?: any;
+    /**
+     * Overrides the component used for visualizing the `allDay` field label.
+     * The [Kendo UI for Vue Label]({% slug label_labels %}) component is used, by default.
+     *
+     * For more information, please refer to the [`Scheduler Form Editor Customization`]({% slug editing_scheduler_custom %}) article.
+     */
+    allDayLabel?: any;
+    /**
+     * Overrides the component used for visualizing the `allDay` field editor.
+     * The [Kendo UI for Vue Checkbox]({% slug overview_checkbox %}) component is used, by default.
+     *
+     * For more information, please refer to the [`Scheduler Form Editor Customization`]({% slug editing_scheduler_custom %}) article.
+     */
+    allDayEditor?: any;
+    /**
+     * Overrides the component used for visualizing the `recurrenceRule` field editor.
+     * A custom made RecurrenceEditor component is used, by default.
+     *
+     * > We're planing on releasing the `RecurrenceEditor` as a standalone component in the future.
+     *
+     * For more information, please refer to the [`Scheduler Form Editor Customization`]({% slug editing_scheduler_custom %}) article.
+     */
+    recurrenceEditor?: any;
+    /**
+     * Overrides the component used for visualizing the `description` field label.
+     * The [Kendo UI for Vue Label]({% slug label_labels %}) component is used, by default.
+     *
+     * For more information, please refer to the [`Scheduler Form Editor Customization`]({% slug editing_scheduler_custom %}) article.
+     */
+    descriptionLabel?: any;
+    /**
+     * Overrides the component used for visualizing the `description` field error.
+     * The [Kendo UI for Vue Error]({% slug error_labels %}) component is used, by default.
+     *
+     * For more information, please refer to the [`Scheduler Form Editor Customization`]({% slug editing_scheduler_custom %}) article.
+     */
+    descriptionError?: any;
+    /**
+     * Overrides the component used for visualizing the `description` field editor.
+     * The [Kendo UI for Vue TextArea]({% slug overview_textarea %}) component is used, by default.
+     *
+     * For more information, please refer to the [`Scheduler Form Editor Customization`]({% slug editing_scheduler_custom %}) article.
+     */
+    descriptionEditor?: any;
+    /**
+     * Overrides the component used for visualizing the `start timezone checked` field label.
+     * The [Kendo UI for Vue Label]({% slug label_labels %}) component is used, by default.
+     *
+     * For more information, please refer to the [`Scheduler Form Editor Customization`]({% slug editing_scheduler_custom %}) article.
+     */
+    resourceLabel?: any;
+    /**
+     * Overrides the component used for visualizing each `resources` field error.
+     * The [Kendo UI for Vue Error]({% slug error_labels %}) component is used, by default.
+     *
+     * For more information, please refer to the [`Scheduler Form Editor Customization`]({% slug editing_scheduler_custom %}) article.
+     */
+    resourcesError?: any;
+    /**
+     * Overrides the component used for visualizing each `resource` field editor.
+     * An extended Kendo UI for Vue [MultiSelect]({% slug overview_multiselect %}) or [DropDownList]({% slug overview_dropdownlist %}) component is used by default, depending on the `multiple` field of each individual `resource`.
+     *
+     * For more information, please refer to the [`Scheduler Form Editor Customization`]({% slug editing_scheduler_custom %}) article.
+     */
+    resourceEditor?: any;
+}
+/** @hidden */
+export interface SchedulerFormEditorHandle {
+    element: any;
+    props: SchedulerFormEditorProps;
+}
+/**
+ * @hidden
+ */
+export interface SchedulerFormEditorState {
+    requiredValidationMessage?: string;
+}
+/**
+ * @hidden
+ */
+export interface SchedulerFormEditorComputed {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface SchedulerFormEditorMethods {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface SchedulerFormEditorData {
+}
+/**
+ * @hidden
+ */
+export interface SchedulerFormEditorAll extends Vue2type, SchedulerFormEditorMethods, SchedulerFormEditorData, SchedulerFormEditorComputed, SchedulerFormEditorState {
+}
+/**
+ * @hidden
+ */
+declare let SchedulerFormEditorVue2: ComponentOptions<SchedulerFormEditorAll, DefaultData<SchedulerFormEditorData>, DefaultMethods<SchedulerFormEditorAll>, SchedulerFormEditorComputed, RecordPropsDefinition<SchedulerFormEditorProps>>;
+/**
+ * @hidden
+ */
+declare const SchedulerFormEditor: DefineComponent<SchedulerFormEditorProps, any, SchedulerFormEditorData, SchedulerFormEditorComputed, SchedulerFormEditorMethods, {}, {}, {}, string, SchedulerFormEditorProps, SchedulerFormEditorProps, {}>;
+export { SchedulerFormEditor, SchedulerFormEditorVue2 };