VSystemBar.mjs 2.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  1. import { createVNode as _createVNode, resolveDirective as _resolveDirective } from "vue";
  2. // Styles
  3. import "./VSystemBar.css";
  4. // 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 { makeLayoutItemProps, useLayoutItem } from "../../composables/layout.mjs";
  9. import { makeRoundedProps, useRounded } from "../../composables/rounded.mjs";
  10. import { useSsrBoot } from "../../composables/ssrBoot.mjs";
  11. import { makeTagProps } from "../../composables/tag.mjs";
  12. import { makeThemeProps, provideTheme } from "../../composables/theme.mjs"; // Utilities
  13. import { computed, shallowRef, toRef } from 'vue';
  14. import { genericComponent, propsFactory, useRender } from "../../util/index.mjs";
  15. export const makeVSystemBarProps = propsFactory({
  16. color: String,
  17. height: [Number, String],
  18. window: Boolean,
  19. ...makeComponentProps(),
  20. ...makeElevationProps(),
  21. ...makeLayoutItemProps(),
  22. ...makeRoundedProps(),
  23. ...makeTagProps(),
  24. ...makeThemeProps()
  25. }, 'VSystemBar');
  26. export const VSystemBar = genericComponent()({
  27. name: 'VSystemBar',
  28. props: makeVSystemBarProps(),
  29. setup(props, _ref) {
  30. let {
  31. slots
  32. } = _ref;
  33. const {
  34. themeClasses
  35. } = provideTheme(props);
  36. const {
  37. backgroundColorClasses,
  38. backgroundColorStyles
  39. } = useBackgroundColor(toRef(props, 'color'));
  40. const {
  41. elevationClasses
  42. } = useElevation(props);
  43. const {
  44. roundedClasses
  45. } = useRounded(props);
  46. const {
  47. ssrBootStyles
  48. } = useSsrBoot();
  49. const height = computed(() => props.height ?? (props.window ? 32 : 24));
  50. const {
  51. layoutItemStyles
  52. } = useLayoutItem({
  53. id: props.name,
  54. order: computed(() => parseInt(props.order, 10)),
  55. position: shallowRef('top'),
  56. layoutSize: height,
  57. elementSize: height,
  58. active: computed(() => true),
  59. absolute: toRef(props, 'absolute')
  60. });
  61. useRender(() => _createVNode(props.tag, {
  62. "class": ['v-system-bar', {
  63. 'v-system-bar--window': props.window
  64. }, themeClasses.value, backgroundColorClasses.value, elevationClasses.value, roundedClasses.value, props.class],
  65. "style": [backgroundColorStyles.value, layoutItemStyles.value, ssrBootStyles.value, props.style]
  66. }, slots));
  67. return {};
  68. }
  69. });
  70. //# sourceMappingURL=VSystemBar.mjs.map