VLayoutItem.mjs 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
  1. import { createVNode as _createVNode } from "vue";
  2. // Styles
  3. import "./VLayoutItem.css";
  4. // Composables
  5. import { makeComponentProps } from "../../composables/component.mjs";
  6. import { makeLayoutItemProps, useLayoutItem } from "../../composables/layout.mjs"; // Utilities
  7. import { computed, toRef } from 'vue';
  8. import { genericComponent, propsFactory } from "../../util/index.mjs"; // Types
  9. export const makeVLayoutItemProps = propsFactory({
  10. position: {
  11. type: String,
  12. required: true
  13. },
  14. size: {
  15. type: [Number, String],
  16. default: 300
  17. },
  18. modelValue: Boolean,
  19. ...makeComponentProps(),
  20. ...makeLayoutItemProps()
  21. }, 'VLayoutItem');
  22. export const VLayoutItem = genericComponent()({
  23. name: 'VLayoutItem',
  24. props: makeVLayoutItemProps(),
  25. setup(props, _ref) {
  26. let {
  27. slots
  28. } = _ref;
  29. const {
  30. layoutItemStyles
  31. } = useLayoutItem({
  32. id: props.name,
  33. order: computed(() => parseInt(props.order, 10)),
  34. position: toRef(props, 'position'),
  35. elementSize: toRef(props, 'size'),
  36. layoutSize: toRef(props, 'size'),
  37. active: toRef(props, 'modelValue'),
  38. absolute: toRef(props, 'absolute')
  39. });
  40. return () => _createVNode("div", {
  41. "class": ['v-layout-item', props.class],
  42. "style": [layoutItemStyles.value, props.style]
  43. }, [slots.default?.()]);
  44. }
  45. });
  46. //# sourceMappingURL=VLayoutItem.mjs.map