VCol.mjs 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128
  1. // Styles
  2. import "./VGrid.css";
  3. // Composables
  4. import { makeComponentProps } from "../../composables/component.mjs";
  5. import { breakpoints } from "../../composables/display.mjs";
  6. import { makeTagProps } from "../../composables/tag.mjs"; // Utilities
  7. import { capitalize, computed, h } from 'vue';
  8. import { genericComponent, propsFactory } from "../../util/index.mjs"; // Types
  9. const breakpointProps = (() => {
  10. return breakpoints.reduce((props, val) => {
  11. props[val] = {
  12. type: [Boolean, String, Number],
  13. default: false
  14. };
  15. return props;
  16. }, {});
  17. })();
  18. const offsetProps = (() => {
  19. return breakpoints.reduce((props, val) => {
  20. const offsetKey = 'offset' + capitalize(val);
  21. props[offsetKey] = {
  22. type: [String, Number],
  23. default: null
  24. };
  25. return props;
  26. }, {});
  27. })();
  28. const orderProps = (() => {
  29. return breakpoints.reduce((props, val) => {
  30. const orderKey = 'order' + capitalize(val);
  31. props[orderKey] = {
  32. type: [String, Number],
  33. default: null
  34. };
  35. return props;
  36. }, {});
  37. })();
  38. const propMap = {
  39. col: Object.keys(breakpointProps),
  40. offset: Object.keys(offsetProps),
  41. order: Object.keys(orderProps)
  42. };
  43. function breakpointClass(type, prop, val) {
  44. let className = type;
  45. if (val == null || val === false) {
  46. return undefined;
  47. }
  48. if (prop) {
  49. const breakpoint = prop.replace(type, '');
  50. className += `-${breakpoint}`;
  51. }
  52. if (type === 'col') {
  53. className = 'v-' + className;
  54. }
  55. // Handling the boolean style prop when accepting [Boolean, String, Number]
  56. // means Vue will not convert <v-col sm></v-col> to sm: true for us.
  57. // Since the default is false, an empty string indicates the prop's presence.
  58. if (type === 'col' && (val === '' || val === true)) {
  59. // .v-col-md
  60. return className.toLowerCase();
  61. }
  62. // .order-md-6
  63. className += `-${val}`;
  64. return className.toLowerCase();
  65. }
  66. const ALIGN_SELF_VALUES = ['auto', 'start', 'end', 'center', 'baseline', 'stretch'];
  67. export const makeVColProps = propsFactory({
  68. cols: {
  69. type: [Boolean, String, Number],
  70. default: false
  71. },
  72. ...breakpointProps,
  73. offset: {
  74. type: [String, Number],
  75. default: null
  76. },
  77. ...offsetProps,
  78. order: {
  79. type: [String, Number],
  80. default: null
  81. },
  82. ...orderProps,
  83. alignSelf: {
  84. type: String,
  85. default: null,
  86. validator: str => ALIGN_SELF_VALUES.includes(str)
  87. },
  88. ...makeComponentProps(),
  89. ...makeTagProps()
  90. }, 'VCol');
  91. export const VCol = genericComponent()({
  92. name: 'VCol',
  93. props: makeVColProps(),
  94. setup(props, _ref) {
  95. let {
  96. slots
  97. } = _ref;
  98. const classes = computed(() => {
  99. const classList = [];
  100. // Loop through `col`, `offset`, `order` breakpoint props
  101. let type;
  102. for (type in propMap) {
  103. propMap[type].forEach(prop => {
  104. const value = props[prop];
  105. const className = breakpointClass(type, prop, value);
  106. if (className) classList.push(className);
  107. });
  108. }
  109. const hasColClasses = classList.some(className => className.startsWith('v-col-'));
  110. classList.push({
  111. // Default to .v-col if no other col-{bp}-* classes generated nor `cols` specified.
  112. 'v-col': !hasColClasses || !props.cols,
  113. [`v-col-${props.cols}`]: props.cols,
  114. [`offset-${props.offset}`]: props.offset,
  115. [`order-${props.order}`]: props.order,
  116. [`align-self-${props.alignSelf}`]: props.alignSelf
  117. });
  118. return classList;
  119. });
  120. return () => h(props.tag, {
  121. class: [classes.value, props.class],
  122. style: props.style
  123. }, slots.default?.());
  124. }
  125. });
  126. //# sourceMappingURL=VCol.mjs.map