@progress/kendo-vue-indicators
Version:
111 lines (110 loc) • 3.03 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 n, createVNode as l } from "vue";
import { validatePackage as s, getDir as u, kendoThemeMaps as c, getDefaultSlots as m } from "@progress/kendo-vue-common";
import { packageMetadata as g } from "../package-metadata.mjs";
const k = /* @__PURE__ */ n({
name: "KendoBadge",
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
},
created() {
s(g), this.currentDir = void 0;
},
mounted() {
this.currentDir = u(this.$el, this.$props.dir);
},
computed: {
badgeClasses() {
const {
size: e,
fillMode: r,
cutoutBorder: d,
position: i,
align: t,
themeColor: a,
rounded: o
} = 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-${c.roundedMap[o] || o}`]: o,
"k-badge-border-cutout": d,
[`k-badge-${i}`]: i,
"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 = m(this);
return l("span", {
class: this.badgeClasses,
dir: this.currentDir
}, [e]);
},
methods: {
focusElement() {
this.$el && this.$el.focus();
}
}
});
export {
k as Badge
};