@progress/kendo-vue-indicators
Version:
127 lines (126 loc) • 3.54 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 l, h as s, createVNode as d } from "vue";
import { validatePackage as u, getDir as c, kendoThemeMaps as m, getDefaultSlots as g, templateRendering as p, getListeners as h, getTemplate as f } from "@progress/kendo-vue-common";
import { packageMetadata as b } from "../package-metadata.mjs";
const C = /* @__PURE__ */ l({
name: "KendoBadgeContainer",
props: {
dir: String,
align: {
type: Object,
default: function() {
return {
vertical: "top",
horizontal: "end"
};
}
},
size: {
type: String,
default: "medium",
validator: function(e) {
return ["small", "medium", "large"].includes(e);
}
},
fillMode: {
type: String,
default: "solid",
validator: function(e) {
return ["solid", "outline"].includes(e);
}
},
themeColor: {
type: String,
default: "primary",
validator: function(e) {
return ["primary", "secondary", "tertiary", "info", "success", "warning", "error", "dark", "light", "inverse"].includes(e);
}
},
rounded: {
type: String,
default: "medium",
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() {
u(b), this.currentDir = void 0;
},
mounted() {
this.currentDir = c(this.$el, this.$props.dir);
},
computed: {
badgeContainerClasses() {
return {
"k-badge-container": !0
};
},
badgeClasses() {
const {
size: e,
fillMode: r,
cutoutBorder: n,
position: o,
align: t,
themeColor: a,
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-${r}`]: r,
[`k-badge-${r}-${a}`]: !!(r && a),
[`k-rounded-${m.roundedMap[i] || i}`]: i,
"k-badge-border-cutout": n,
[`k-badge-${o}`]: o,
"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 = g(this), r = p.call(this, this.content, h.call(this)), n = f.call(this, {
h: s,
template: r,
additionalProps: this.$props
});
return d("span", {
class: this.badgeContainerClasses,
style: {
display: "inline-block"
},
dir: this.currentDir
}, [e, d("span", {
class: this.badgeClasses,
dir: this.currentDir
}, [n])]);
},
methods: {
focusElement() {
this.$el && this.$el.focus();
}
}
});
export {
C as BadgeContainer
};