Badge.mjs 2.3 KB

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