VDivider.mjs 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
  1. import { createVNode as _createVNode } from "vue";
  2. // Styles
  3. import "./VDivider.css";
  4. // Composables
  5. import { useTextColor } from "../../composables/color.mjs";
  6. import { makeComponentProps } from "../../composables/component.mjs";
  7. import { makeThemeProps, provideTheme } from "../../composables/theme.mjs"; // Utilities
  8. import { computed, toRef } from 'vue';
  9. import { convertToUnit, genericComponent, propsFactory, useRender } from "../../util/index.mjs";
  10. export const makeVDividerProps = propsFactory({
  11. color: String,
  12. inset: Boolean,
  13. length: [Number, String],
  14. opacity: [Number, String],
  15. thickness: [Number, String],
  16. vertical: Boolean,
  17. ...makeComponentProps(),
  18. ...makeThemeProps()
  19. }, 'VDivider');
  20. export const VDivider = genericComponent()({
  21. name: 'VDivider',
  22. props: makeVDividerProps(),
  23. setup(props, _ref) {
  24. let {
  25. attrs,
  26. slots
  27. } = _ref;
  28. const {
  29. themeClasses
  30. } = provideTheme(props);
  31. const {
  32. textColorClasses,
  33. textColorStyles
  34. } = useTextColor(toRef(props, 'color'));
  35. const dividerStyles = computed(() => {
  36. const styles = {};
  37. if (props.length) {
  38. styles[props.vertical ? 'height' : 'width'] = convertToUnit(props.length);
  39. }
  40. if (props.thickness) {
  41. styles[props.vertical ? 'borderRightWidth' : 'borderTopWidth'] = convertToUnit(props.thickness);
  42. }
  43. return styles;
  44. });
  45. useRender(() => {
  46. const divider = _createVNode("hr", {
  47. "class": [{
  48. 'v-divider': true,
  49. 'v-divider--inset': props.inset,
  50. 'v-divider--vertical': props.vertical
  51. }, themeClasses.value, textColorClasses.value, props.class],
  52. "style": [dividerStyles.value, textColorStyles.value, {
  53. '--v-border-opacity': props.opacity
  54. }, props.style],
  55. "aria-orientation": !attrs.role || attrs.role === 'separator' ? props.vertical ? 'vertical' : 'horizontal' : undefined,
  56. "role": `${attrs.role || 'separator'}`
  57. }, null);
  58. if (!slots.default) return divider;
  59. return _createVNode("div", {
  60. "class": ['v-divider__wrapper', {
  61. 'v-divider__wrapper--vertical': props.vertical,
  62. 'v-divider__wrapper--inset': props.inset
  63. }]
  64. }, [divider, _createVNode("div", {
  65. "class": "v-divider__content"
  66. }, [slots.default()]), divider]);
  67. });
  68. return {};
  69. }
  70. });
  71. //# sourceMappingURL=VDivider.mjs.map