Ribbon.js 2.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  1. import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
  2. import _extends from "@babel/runtime/helpers/esm/extends";
  3. import { createVNode as _createVNode } from "vue";
  4. var __rest = this && this.__rest || function (s, e) {
  5. var t = {};
  6. for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
  7. if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
  8. if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  9. }
  10. return t;
  11. };
  12. import useStyle from './style';
  13. import { isPresetColor } from '../_util/colors';
  14. import { defineComponent, computed } from 'vue';
  15. import PropTypes from '../_util/vue-types';
  16. import useConfigInject from '../config-provider/hooks/useConfigInject';
  17. export const ribbonProps = () => ({
  18. prefix: String,
  19. color: {
  20. type: String
  21. },
  22. text: PropTypes.any,
  23. placement: {
  24. type: String,
  25. default: 'end'
  26. }
  27. });
  28. export default defineComponent({
  29. compatConfig: {
  30. MODE: 3
  31. },
  32. name: 'ABadgeRibbon',
  33. inheritAttrs: false,
  34. props: ribbonProps(),
  35. slots: Object,
  36. setup(props, _ref) {
  37. let {
  38. attrs,
  39. slots
  40. } = _ref;
  41. const {
  42. prefixCls,
  43. direction
  44. } = useConfigInject('ribbon', props);
  45. const [wrapSSR, hashId] = useStyle(prefixCls);
  46. const colorInPreset = computed(() => isPresetColor(props.color, false));
  47. const ribbonCls = computed(() => [prefixCls.value, `${prefixCls.value}-placement-${props.placement}`, {
  48. [`${prefixCls.value}-rtl`]: direction.value === 'rtl',
  49. [`${prefixCls.value}-color-${props.color}`]: colorInPreset.value
  50. }]);
  51. return () => {
  52. var _a, _b;
  53. const {
  54. class: className,
  55. style
  56. } = attrs,
  57. restAttrs = __rest(attrs, ["class", "style"]);
  58. const colorStyle = {};
  59. const cornerColorStyle = {};
  60. if (props.color && !colorInPreset.value) {
  61. colorStyle.background = props.color;
  62. cornerColorStyle.color = props.color;
  63. }
  64. return wrapSSR(_createVNode("div", _objectSpread({
  65. "class": `${prefixCls.value}-wrapper ${hashId.value}`
  66. }, restAttrs), [(_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots), _createVNode("div", {
  67. "class": [ribbonCls.value, className, hashId.value],
  68. "style": _extends(_extends({}, colorStyle), style)
  69. }, [_createVNode("span", {
  70. "class": `${prefixCls.value}-text`
  71. }, [props.text || ((_b = slots.text) === null || _b === void 0 ? void 0 : _b.call(slots))]), _createVNode("div", {
  72. "class": `${prefixCls.value}-corner`,
  73. "style": cornerColorStyle
  74. }, null)])]));
  75. };
  76. }
  77. });