VSparkline.mjs 1.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
  1. import { createVNode as _createVNode, mergeProps as _mergeProps, resolveDirective as _resolveDirective } from "vue";
  2. // Components
  3. import { makeVBarlineProps, VBarline } from "./VBarline.mjs";
  4. import { makeVTrendlineProps, VTrendline } from "./VTrendline.mjs"; // Composables
  5. import { useTextColor } from "../../composables/color.mjs"; // Utilities
  6. import { computed, toRef } from 'vue';
  7. import { genericComponent, propsFactory, useRender } from "../../util/index.mjs"; // Types
  8. // Types
  9. export const makeVSparklineProps = propsFactory({
  10. type: {
  11. type: String,
  12. default: 'trend'
  13. },
  14. ...makeVBarlineProps(),
  15. ...makeVTrendlineProps()
  16. }, 'VSparkline');
  17. export const VSparkline = genericComponent()({
  18. name: 'VSparkline',
  19. props: makeVSparklineProps(),
  20. setup(props, _ref) {
  21. let {
  22. slots
  23. } = _ref;
  24. const {
  25. textColorClasses,
  26. textColorStyles
  27. } = useTextColor(toRef(props, 'color'));
  28. const hasLabels = computed(() => {
  29. return Boolean(props.showLabels || props.labels.length > 0 || !!slots?.label);
  30. });
  31. const totalHeight = computed(() => {
  32. let height = parseInt(props.height, 10);
  33. if (hasLabels.value) height += parseInt(props.labelSize, 10) * 1.5;
  34. return height;
  35. });
  36. useRender(() => {
  37. const Tag = props.type === 'trend' ? VTrendline : VBarline;
  38. const lineProps = props.type === 'trend' ? VTrendline.filterProps(props) : VBarline.filterProps(props);
  39. return _createVNode(Tag, _mergeProps({
  40. "key": props.type,
  41. "class": textColorClasses.value,
  42. "style": textColorStyles.value,
  43. "viewBox": `0 0 ${props.width} ${parseInt(totalHeight.value, 10)}`
  44. }, lineProps), slots);
  45. });
  46. }
  47. });
  48. //# sourceMappingURL=VSparkline.mjs.map