@progress/kendo-vue-form
Version:
109 lines (108 loc) • 3.49 kB
JavaScript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
import { defineComponent as s, h as i } from "vue";
import { getDefaultSlots as l, templateRendering as d, getListeners as h, getTemplate as u } from "@progress/kendo-vue-common";
const F = /* @__PURE__ */ s({
name: "KendoField",
props: {
component: [String, Number, Boolean, Object],
validator: [Function, Array],
name: String,
changeOnInput: {
type: Boolean,
default: !0
}
},
created() {
return this.kendoForm ? this.kendoForm.registerField(this.$props.name, this.$props.validator) : void 0;
},
inject: {
kendoForm: {
default: null
}
},
methods: {
handleOnChange(e) {
const t = e && (e.value !== void 0 ? e.value : e.target ? e.target.value : e.target);
this.kendoForm.onChange(this.$props.name, {
value: t
}), this.$emit("change", e);
},
handleOnInput(e) {
const t = e && (e.value !== void 0 ? e.value : e.target ? e.target.value : e.target);
this.changeOnInput && this.kendoForm.onChange(this.$props.name, {
value: t
}), this.$emit("input", e);
},
onNativeComponentChange(e) {
this.kendoForm.onChange(this.$props.name, {
value: e.target.value
});
},
handleOnBlur() {
this.kendoForm.onBlur(this.$props.name);
},
handleOnFocus() {
this.kendoForm.onFocus(this.$props.name);
}
},
render() {
const e = l(this), {
name: t,
component: n,
id: a
} = this.$props;
if (!this.kendoForm)
return null;
const o = this.kendoForm.values[t];
if (typeof n == "string" && (n === "input" || n === "textarea"))
return i(n, {
...this.$attrs,
onChange: this.onNativeComponentChange,
onBlur: this.handleOnBlur,
onFocus: this.handleOnFocus,
name: t,
value: o || ""
});
if (n) {
const r = d.call(this, n, h.call(this));
return u.call(this, {
h: i,
template: r,
additionalProps: {
value: o,
// meta
validationMessage: this.kendoForm.errors[t],
touched: this.kendoForm.touchedByField[t],
modified: this.kendoForm.modifiedByField[t],
visited: this.kendoForm.visitedByField[t],
// Our `valid` implementation requires double submit to show html5 validation errors,
// however it's NOT recommended to show html5 validation errors at all as:
// - There is no standard way to change validation look and feel with CSS.
// - Look different in each browser / OS
// - You can have a page in one language but an error message
// displayed in another language (not localizable)
valid: !(this.kendoForm.errors[t] && this.kendoForm.touchedByField[t]),
name: t,
id: a,
...this.$attrs
},
additionalListeners: {
change: this.handleOnChange,
input: this.handleOnInput,
blur: this.handleOnBlur,
focus: this.handleOnFocus
},
defaultSlots: e
});
}
}
});
export {
F as Field
};