VBottomSheet.mjs 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041
  1. import { createVNode as _createVNode, mergeProps as _mergeProps, resolveDirective as _resolveDirective } from "vue";
  2. // Styles
  3. import "./VBottomSheet.css";
  4. // Components
  5. import { makeVDialogProps, VDialog } from "../VDialog/VDialog.mjs"; // Composables
  6. import { useProxiedModel } from "../../composables/proxiedModel.mjs"; // Utilities
  7. import { genericComponent, propsFactory, useRender } from "../../util/index.mjs"; // Types
  8. export const makeVBottomSheetProps = propsFactory({
  9. inset: Boolean,
  10. ...makeVDialogProps({
  11. transition: 'bottom-sheet-transition'
  12. })
  13. }, 'VBottomSheet');
  14. export const VBottomSheet = genericComponent()({
  15. name: 'VBottomSheet',
  16. props: makeVBottomSheetProps(),
  17. emits: {
  18. 'update:modelValue': value => true
  19. },
  20. setup(props, _ref) {
  21. let {
  22. slots
  23. } = _ref;
  24. const isActive = useProxiedModel(props, 'modelValue');
  25. useRender(() => {
  26. const dialogProps = VDialog.filterProps(props);
  27. return _createVNode(VDialog, _mergeProps(dialogProps, {
  28. "contentClass": ['v-bottom-sheet__content', props.contentClass],
  29. "modelValue": isActive.value,
  30. "onUpdate:modelValue": $event => isActive.value = $event,
  31. "class": ['v-bottom-sheet', {
  32. 'v-bottom-sheet--inset': props.inset
  33. }, props.class],
  34. "style": props.style
  35. }), slots);
  36. });
  37. return {};
  38. }
  39. });
  40. //# sourceMappingURL=VBottomSheet.mjs.map