123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104 |
- import { computed, defineComponent, createVNode as _createVNode } from "vue";
- import { isDef, addUnit, isNumeric, truthProp, numericProp, makeStringProp, createNamespace } from "../utils/index.mjs";
- const [name, bem] = createNamespace("badge");
- const badgeProps = {
- dot: Boolean,
- max: numericProp,
- tag: makeStringProp("div"),
- color: String,
- offset: Array,
- content: numericProp,
- showZero: truthProp,
- position: makeStringProp("top-right")
- };
- var stdin_default = defineComponent({
- name,
- props: badgeProps,
- setup(props, {
- slots
- }) {
- const hasContent = () => {
- if (slots.content) {
- return true;
- }
- const {
- content,
- showZero
- } = props;
- return isDef(content) && content !== "" && (showZero || content !== 0 && content !== "0");
- };
- const renderContent = () => {
- const {
- dot,
- max,
- content
- } = props;
- if (!dot && hasContent()) {
- if (slots.content) {
- return slots.content();
- }
- if (isDef(max) && isNumeric(content) && +content > +max) {
- return `${max}+`;
- }
- return content;
- }
- };
- const getOffsetWithMinusString = (val) => val.startsWith("-") ? val.replace("-", "") : `-${val}`;
- const style = computed(() => {
- const style2 = {
- background: props.color
- };
- if (props.offset) {
- const [x, y] = props.offset;
- const {
- position
- } = props;
- const [offsetY, offsetX] = position.split("-");
- if (slots.default) {
- if (typeof y === "number") {
- style2[offsetY] = addUnit(offsetY === "top" ? y : -y);
- } else {
- style2[offsetY] = offsetY === "top" ? addUnit(y) : getOffsetWithMinusString(y);
- }
- if (typeof x === "number") {
- style2[offsetX] = addUnit(offsetX === "left" ? x : -x);
- } else {
- style2[offsetX] = offsetX === "left" ? addUnit(x) : getOffsetWithMinusString(x);
- }
- } else {
- style2.marginTop = addUnit(y);
- style2.marginLeft = addUnit(x);
- }
- }
- return style2;
- });
- const renderBadge = () => {
- if (hasContent() || props.dot) {
- return _createVNode("div", {
- "class": bem([props.position, {
- dot: props.dot,
- fixed: !!slots.default
- }]),
- "style": style.value
- }, [renderContent()]);
- }
- };
- return () => {
- if (slots.default) {
- const {
- tag
- } = props;
- return _createVNode(tag, {
- "class": bem("wrapper")
- }, {
- default: () => [slots.default(), renderBadge()]
- });
- }
- return renderBadge();
- };
- }
- });
- export {
- badgeProps,
- stdin_default as default
- };
|