VTimelineDivider.mjs 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
  1. import { resolveDirective as _resolveDirective, createVNode as _createVNode } from "vue";
  2. // Components
  3. import { VDefaultsProvider } from "../VDefaultsProvider/index.mjs";
  4. import { VIcon } from "../VIcon/index.mjs"; // Composables
  5. import { useBackgroundColor } from "../../composables/color.mjs";
  6. import { makeComponentProps } from "../../composables/component.mjs";
  7. import { makeElevationProps, useElevation } from "../../composables/elevation.mjs";
  8. import { IconValue } from "../../composables/icons.mjs";
  9. import { makeRoundedProps, useRounded } from "../../composables/rounded.mjs";
  10. import { makeSizeProps, useSize } from "../../composables/size.mjs"; // Utilities
  11. import { toRef } from 'vue';
  12. import { genericComponent, propsFactory, useRender } from "../../util/index.mjs";
  13. export const makeVTimelineDividerProps = propsFactory({
  14. dotColor: String,
  15. fillDot: Boolean,
  16. hideDot: Boolean,
  17. icon: IconValue,
  18. iconColor: String,
  19. lineColor: String,
  20. ...makeComponentProps(),
  21. ...makeRoundedProps(),
  22. ...makeSizeProps(),
  23. ...makeElevationProps()
  24. }, 'VTimelineDivider');
  25. export const VTimelineDivider = genericComponent()({
  26. name: 'VTimelineDivider',
  27. props: makeVTimelineDividerProps(),
  28. setup(props, _ref) {
  29. let {
  30. slots
  31. } = _ref;
  32. const {
  33. sizeClasses,
  34. sizeStyles
  35. } = useSize(props, 'v-timeline-divider__dot');
  36. const {
  37. backgroundColorStyles,
  38. backgroundColorClasses
  39. } = useBackgroundColor(toRef(props, 'dotColor'));
  40. const {
  41. roundedClasses
  42. } = useRounded(props, 'v-timeline-divider__dot');
  43. const {
  44. elevationClasses
  45. } = useElevation(props);
  46. const {
  47. backgroundColorClasses: lineColorClasses,
  48. backgroundColorStyles: lineColorStyles
  49. } = useBackgroundColor(toRef(props, 'lineColor'));
  50. useRender(() => _createVNode("div", {
  51. "class": ['v-timeline-divider', {
  52. 'v-timeline-divider--fill-dot': props.fillDot
  53. }, props.class],
  54. "style": props.style
  55. }, [_createVNode("div", {
  56. "class": ['v-timeline-divider__before', lineColorClasses.value],
  57. "style": lineColorStyles.value
  58. }, null), !props.hideDot && _createVNode("div", {
  59. "key": "dot",
  60. "class": ['v-timeline-divider__dot', elevationClasses.value, roundedClasses.value, sizeClasses.value],
  61. "style": sizeStyles.value
  62. }, [_createVNode("div", {
  63. "class": ['v-timeline-divider__inner-dot', backgroundColorClasses.value, roundedClasses.value],
  64. "style": backgroundColorStyles.value
  65. }, [!slots.default ? _createVNode(VIcon, {
  66. "key": "icon",
  67. "color": props.iconColor,
  68. "icon": props.icon,
  69. "size": props.size
  70. }, null) : _createVNode(VDefaultsProvider, {
  71. "key": "icon-defaults",
  72. "disabled": !props.icon,
  73. "defaults": {
  74. VIcon: {
  75. color: props.iconColor,
  76. icon: props.icon,
  77. size: props.size
  78. }
  79. }
  80. }, slots.default)])]), _createVNode("div", {
  81. "class": ['v-timeline-divider__after', lineColorClasses.value],
  82. "style": lineColorStyles.value
  83. }, null)]));
  84. return {};
  85. }
  86. });
  87. //# sourceMappingURL=VTimelineDivider.mjs.map