Badge.mjs 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
  1. import { computed, defineComponent, createVNode as _createVNode } from "vue";
  2. import { isDef, addUnit, isNumeric, truthProp, numericProp, makeStringProp, createNamespace } from "../utils/index.mjs";
  3. const [name, bem] = createNamespace("badge");
  4. const badgeProps = {
  5. dot: Boolean,
  6. max: numericProp,
  7. tag: makeStringProp("div"),
  8. color: String,
  9. offset: Array,
  10. content: numericProp,
  11. showZero: truthProp,
  12. position: makeStringProp("top-right")
  13. };
  14. var stdin_default = defineComponent({
  15. name,
  16. props: badgeProps,
  17. setup(props, {
  18. slots
  19. }) {
  20. const hasContent = () => {
  21. if (slots.content) {
  22. return true;
  23. }
  24. const {
  25. content,
  26. showZero
  27. } = props;
  28. return isDef(content) && content !== "" && (showZero || content !== 0 && content !== "0");
  29. };
  30. const renderContent = () => {
  31. const {
  32. dot,
  33. max,
  34. content
  35. } = props;
  36. if (!dot && hasContent()) {
  37. if (slots.content) {
  38. return slots.content();
  39. }
  40. if (isDef(max) && isNumeric(content) && +content > +max) {
  41. return `${max}+`;
  42. }
  43. return content;
  44. }
  45. };
  46. const getOffsetWithMinusString = (val) => val.startsWith("-") ? val.replace("-", "") : `-${val}`;
  47. const style = computed(() => {
  48. const style2 = {
  49. background: props.color
  50. };
  51. if (props.offset) {
  52. const [x, y] = props.offset;
  53. const {
  54. position
  55. } = props;
  56. const [offsetY, offsetX] = position.split("-");
  57. if (slots.default) {
  58. if (typeof y === "number") {
  59. style2[offsetY] = addUnit(offsetY === "top" ? y : -y);
  60. } else {
  61. style2[offsetY] = offsetY === "top" ? addUnit(y) : getOffsetWithMinusString(y);
  62. }
  63. if (typeof x === "number") {
  64. style2[offsetX] = addUnit(offsetX === "left" ? x : -x);
  65. } else {
  66. style2[offsetX] = offsetX === "left" ? addUnit(x) : getOffsetWithMinusString(x);
  67. }
  68. } else {
  69. style2.marginTop = addUnit(y);
  70. style2.marginLeft = addUnit(x);
  71. }
  72. }
  73. return style2;
  74. });
  75. const renderBadge = () => {
  76. if (hasContent() || props.dot) {
  77. return _createVNode("div", {
  78. "class": bem([props.position, {
  79. dot: props.dot,
  80. fixed: !!slots.default
  81. }]),
  82. "style": style.value
  83. }, [renderContent()]);
  84. }
  85. };
  86. return () => {
  87. if (slots.default) {
  88. const {
  89. tag
  90. } = props;
  91. return _createVNode(tag, {
  92. "class": bem("wrapper")
  93. }, {
  94. default: () => [slots.default(), renderBadge()]
  95. });
  96. }
  97. return renderBadge();
  98. };
  99. }
  100. });
  101. export {
  102. badgeProps,
  103. stdin_default as default
  104. };