@progress/kendo-vue-labels
Version:
109 lines (108 loc) • 2.96 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 p, inject as c, createVNode as e } from "vue";
import { validatePackage as u, getDefaultSlots as h } from "@progress/kendo-vue-common";
import { provideLocalizationService as m } from "@progress/kendo-vue-intl";
import { labelsOptional as r, messages as f } from "./messages/main.mjs";
import { packageMetadata as b } from "./package-metadata.mjs";
const C = /* @__PURE__ */ p({
name: "KendoFloatingLabel",
props: {
label: String,
labelClass: String,
editorId: String,
editorValue: [String, Boolean, Number],
editorPlaceholder: String,
editorValid: {
type: Boolean,
default: void 0
},
editorDisabled: Boolean,
id: String,
optional: Boolean,
focused: {
type: Boolean,
default: void 0
},
dir: String
},
data() {
return {
currentFocused: !1
};
},
inject: {
kendoLocalizationService: {
default: null
}
},
created() {
u(b);
},
computed: {
computedFocused() {
return this.$props.focused !== void 0 ? this.$props.focused : this.currentFocused;
},
spanClassNames() {
return {
"k-floating-label-container": !0,
"k-focus": this.computedFocused,
"k-empty": !this.$props.editorPlaceholder && !this.$props.editorValue && this.$props.editorValue !== 0,
"k-text-disabled": this.$props.editorDisabled,
"k-rtl": this.$props.dir === "rtl"
};
},
labelClassNames() {
return {
"k-floating-label": !0,
"k-text-error": this.$props.editorValid === !1,
"k-text-disabled": this.$props.editorDisabled,
[this.$props.labelClass]: this.$props.labelClass
};
}
},
methods: {
handleFocus() {
this.currentFocused = !0;
},
handleBlur() {
this.currentFocused = !1;
}
},
setup() {
return {
kendoLocalizationService: c("kendoLocalizationService", {})
};
},
render() {
const o = h(this), {
label: t,
editorId: s,
id: a,
optional: n
} = this.$props, d = m(this), l = n ? d.toLanguageString(r, f[r]) : "", i = l && e("span", {
class: "k-label-optional"
}, [l]);
return e("span", {
class: this.spanClassNames,
onFocusin: this.handleFocus,
onFocusout: this.handleBlur,
dir: this.$props.dir
}, [o, t ? s ? e("label", {
id: a,
for: s,
class: this.labelClassNames
}, [t, i]) : e("span", {
id: a,
class: this.labelClassNames
}, [t, i]) : null]);
}
});
export {
C as FloatingLabel
};