@progress/kendo-vue-indicators
Version:
125 lines (124 loc) • 3.49 kB
JavaScript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2026 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
import { defineComponent as d, h as l, createVNode as s } from "vue";
import { getDefaultSlots as u, templateRendering as c, getListeners as g, getTemplate as p, kendoThemeMaps as m, getDir as h, validatePackage as b } from "@progress/kendo-vue-common";
import { packageMetadata as f } from "../package-metadata.mjs";
const y = /* @__PURE__ */ d({
name: "KendoBadgeContainer",
props: {
dir: String,
align: {
type: Object,
default: function() {
return {
vertical: "top",
horizontal: "end"
};
}
},
size: {
type: String,
validator: function(e) {
return ["none", "small", "medium", "large"].includes(e);
}
},
fillMode: {
type: String,
validator: function(e) {
return ["solid", "outline"].includes(e);
}
},
themeColor: {
type: String,
default: "base",
validator: function(e) {
return ["base", "primary", "secondary", "tertiary", "info", "success", "warning", "error", "inverse"].includes(e);
}
},
rounded: {
type: String,
validator: function(e) {
return [null, "small", "medium", "large", "full"].includes(e);
}
},
position: {
type: String,
default: "edge",
validator: function(e) {
return ["edge", "outside", "inside"].includes(e);
}
},
cutoutBorder: Boolean,
content: [String, Function, Object]
},
created() {
b(f), this.currentDir = void 0;
},
mounted() {
this.currentDir = h(this.$el, this.$props.dir);
},
computed: {
badgeContainerClasses() {
return {
"k-badge-container": !0
};
},
badgeClasses() {
const {
size: e,
fillMode: n,
cutoutBorder: o,
position: a,
align: t,
themeColor: r,
rounded: i
} = this.$props;
return {
"k-badge": !0,
"k-badge-sm": e === "small",
"k-badge-md": e === "medium",
"k-badge-lg": e === "large",
[`k-badge-${n}`]: n,
[`k-badge-${r}`]: r,
[`k-badge-${n}-${r}`]: !!(n && r),
[`k-rounded-${m.roundedMap[i] || i}`]: i,
"k-badge-border-cutout": o,
[`k-badge-${a}`]: a,
"k-top-start": t.vertical === "top" && t.horizontal === "start",
"k-top-end": t.vertical === "top" && t.horizontal === "end",
"k-bottom-start": t.vertical === "bottom" && t.horizontal === "start",
"k-bottom-end": t.vertical === "bottom" && t.horizontal === "end"
};
}
},
render() {
const e = u(this), n = c.call(this, this.content, g.call(this)), o = p.call(this, {
h: l,
template: n,
additionalProps: this.$props
});
return s("span", {
class: this.badgeContainerClasses,
style: {
display: "inline-block"
},
dir: this.currentDir
}, [e, s("span", {
class: this.badgeClasses,
dir: this.currentDir
}, [o])]);
},
methods: {
focusElement() {
this.$el && this.$el.focus();
}
}
});
export {
y as BadgeContainer
};