@progress/kendo-vue-inputs
Version:
290 lines (289 loc) • 8.9 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 x, h as B, createVNode as a, ref as D, inject as M } from "vue";
import { Keys as O, getDefaultSlots as P, classNames as f, kendoThemeMaps as m, templateRendering as z, getListeners as L, getTemplate as w, getRef as g, validatePackage as I, guid as H, getTabIndex as T, setRef as N } from "@progress/kendo-vue-common";
import { packageMetadata as R } from "../package-metadata.mjs";
import { provideLocalizationService as q } from "@progress/kendo-vue-intl";
import { messages as K, checkboxValidation as j, checkboxOptionalText as A } from "../messages/main.mjs";
const U = /* @__PURE__ */ x({
name: "KendoCheckbox",
emits: {
changemodel: (e) => !0,
"update:modelValue": (e) => !0,
change: (e) => !0,
focus: (e) => !0,
blur: (e) => !0
},
model: {
event: "changemodel"
},
inject: {
kendoLocalizationService: {
default: null
}
},
props: {
checked: {
type: Boolean,
default: void 0
},
defaultChecked: {
type: Boolean,
default: void 0
},
defaultValue: {
type: [String, Boolean],
default: void 0
},
modelValue: {
type: [String, Boolean],
default: void 0
},
dir: String,
disabled: Boolean,
id: String,
ariaLabelledBy: String,
ariaDescribedBy: String,
label: String,
labelRender: [String, Number, Boolean, Object],
labelPlacement: String,
labelOptional: Boolean,
labelClass: String,
name: String,
size: {
type: String,
default: "medium",
validator: function(e) {
return [null, "small", "medium", "large"].includes(e);
}
},
rounded: {
type: String,
default: "medium",
validator: function(e) {
return [null, "small", "medium", "large"].includes(e);
}
},
tabIndex: Number,
value: {
type: [String, Boolean],
default: void 0
},
validationMessage: String,
required: Boolean,
valid: {
type: Boolean,
default: void 0
},
validityStyles: {
type: Boolean,
default: !0
}
},
data() {
return {
valueDuringOnChange: void 0,
currentDir: "ltr",
currentChecked: void 0,
currentValue: void 0
};
},
created() {
I(R), this.calculatedId = H(), this.$props.defaultChecked !== void 0 && (this.currentChecked = this.$props.defaultChecked), this.$props.defaultValue !== void 0 && (this.currentValue = this.$props.defaultValue), this.currentDir = this.$props.dir;
},
computed: {
valueIsBooleanOrNull() {
const e = this.$props.value;
return typeof e == "boolean" || e === null;
},
isCheckedControlled() {
return this.$props.checked !== void 0;
},
isValueControlled() {
return this.$props.value !== void 0 && this.valueIsBooleanOrNull;
},
computedValue() {
return this.$data.valueDuringOnChange !== void 0 ? this.$data.valueDuringOnChange : this.$props.value !== void 0 ? this.$props.value : this.$props.modelValue !== void 0 ? this.$props.modelValue : this.$data.currentValue;
},
computedChecked() {
return this.$data.valueDuringOnChange !== void 0 ? this.$data.valueDuringOnChange : this.$props.checked !== void 0 ? this.$props.checked : this.$props.modelValue !== void 0 ? this.$props.modelValue : this.$data.currentChecked;
},
useValueAsChecked() {
return this.computedChecked === void 0 && this.computedValue;
},
checkedProp() {
return this.useValueAsChecked ? this.computedValue : this.computedChecked;
},
valueProp() {
const e = this.$props.value;
return this.useValueAsChecked || this.isValueControlled ? e === null ? e : void 0 : e || this.computedValue;
},
indeterminateProp() {
return this.checkedProp === null || this.valueProp === null;
},
isValid() {
const e = this.$props.valid;
return e !== void 0 ? e : this.$props.required ? !!this.computedChecked : !0;
},
labelComputedClass() {
return {
"k-checkbox-label": !0,
[this.$props.labelClass]: this.$props.labelClass
};
}
},
mounted() {
if (this.input = g(this, "input"), !this.currentDir && window && this.$el) {
const e = window.getComputedStyle(this.$el).direction;
e && (this.currentDir = e);
}
this.setValidity();
},
updated() {
this.input || (this.input = g(this, "input")), this.setValidity();
},
setup() {
const e = D(null), t = M("kendoLocalizationService", {});
return {
inputRef: e,
kendoLocalizationService: t
};
},
render() {
const {
ariaDescribedBy: e,
ariaLabelledBy: t,
disabled: i,
id: s,
label: b,
labelRender: n,
labelPlacement: k,
name: $,
labelOptional: C,
tabIndex: v,
required: d,
validityStyles: V,
size: r,
rounded: u
} = this.$props, o = P(this);
let l = b;
this.localizationService = q(this), this.defaultValidationMessage = this.localizeMessage(j), this.optionalMessage = this.localizeMessage(A);
const h = f({
"k-checkbox-wrap": !0,
"k-disabled": i
}), y = f({
"k-checkbox": !0,
[`k-checkbox-${m.sizeMap[r]}`]: r,
[`k-rounded-${m.roundedMap[u]}`]: u,
"k-indeterminate": this.indeterminateProp,
"k-disabled": i,
"k-invalid": !this.isValid && V !== !1
}), c = function() {
return a("input", {
type: "checkbox",
class: y,
name: $,
id: s || this.calculatedId,
ref: N(this, "input"),
"aria-labelledby": t,
"aria-describedby": e,
checked: !!this.checkedProp,
disabled: i,
tabindex: T(v, i),
role: "checkbox",
required: d !== void 0 ? d : !1,
"aria-checked": this.computedChecked || this.checkedProp ? !0 : this.indeterminateProp ? "mixed" : !1,
"aria-disabled": i || void 0,
onChange: this.onChangeHandler,
onKeydown: this.onKeyDownHandler,
onFocus: this.onFocusHandler,
onBlur: this.onBlurHandler
}, null);
};
if (n) {
const S = n ? z.call(this, n, L.call(this)) : null;
l = w.call(this, {
h: B,
template: S
});
}
const p = function() {
return l !== void 0 ? a("label", {
class: this.labelComputedClass,
for: s || this.calculatedId,
style: {
userSelect: "none"
}
}, [l, C && a("span", {
class: "k-label-optional"
}, [this.optionalMessage])]) : null;
};
return k === "before" ? a("span", {
class: h,
dir: "rtl"
}, [c.call(this), p.call(this), o]) : a("span", {
class: h,
dir: this.currentDir
}, [c.call(this), p.call(this), o]);
},
methods: {
setValidity() {
const e = this.$props.valid !== void 0 ? this.$props.valid : this.$props.required ? !!this.computedChecked : !0;
this.input && this.input.setCustomValidity && this.input.setCustomValidity(e ? "" : this.$props.validationMessage || this.defaultValidationMessage);
},
localizeMessage(e) {
return this.localizationService.toLanguageString(e, K[e]);
},
focusElement() {
this.input && this.input.focus();
},
setValue(e, t) {
this.$data.valueDuringOnChange = t, this.$nextTick(() => {
if (!this.isCheckedControlled && !this.isValueControlled && !this.$props.disabled && (this.currentValue = t, this.currentChecked = t), !this.$props.disabled) {
const i = {
element: this.$el,
focus: null
// focusElement
};
this.$emit("changemodel", t), this.$emit("update:modelValue", t), this.$emit("change", {
e,
handle: i,
value: t
});
}
this.$data.valueDuringOnChange = void 0;
});
},
onChangeHandler(e) {
let t = e.target.checked;
this.setValue(e, t);
},
onKeyDownHandler(e) {
if (this.$props.disabled)
return;
const {
keyCode: t
} = e;
let i = e.currentTarget.checked;
t === O.space && (e.preventDefault(), e.stopPropagation(), this.setValue(e, !i));
},
onBlurHandler(e) {
this.$props.disabled || this.$emit("blur", {
event: e
});
},
onFocusHandler(e) {
this.$props.disabled || this.$emit("focus", {
event: e
});
}
}
});
export {
U as Checkbox
};