VPicker.mjs 2.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  1. import { mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
  2. // Styles
  3. import "./VPicker.css";
  4. // Components
  5. import { VPickerTitle } from "./VPickerTitle.mjs";
  6. import { VDefaultsProvider } from "../../components/VDefaultsProvider/VDefaultsProvider.mjs";
  7. import { makeVSheetProps, VSheet } from "../../components/VSheet/VSheet.mjs"; // Composables
  8. import { useBackgroundColor } from "../../composables/color.mjs"; // Utilities
  9. import { toRef } from 'vue';
  10. import { genericComponent, propsFactory, useRender } from "../../util/index.mjs"; // Types
  11. export const makeVPickerProps = propsFactory({
  12. bgColor: String,
  13. landscape: Boolean,
  14. title: String,
  15. hideHeader: Boolean,
  16. ...makeVSheetProps()
  17. }, 'VPicker');
  18. export const VPicker = genericComponent()({
  19. name: 'VPicker',
  20. props: makeVPickerProps(),
  21. setup(props, _ref) {
  22. let {
  23. slots
  24. } = _ref;
  25. const {
  26. backgroundColorClasses,
  27. backgroundColorStyles
  28. } = useBackgroundColor(toRef(props, 'color'));
  29. useRender(() => {
  30. const sheetProps = VSheet.filterProps(props);
  31. const hasTitle = !!(props.title || slots.title);
  32. return _createVNode(VSheet, _mergeProps(sheetProps, {
  33. "color": props.bgColor,
  34. "class": ['v-picker', {
  35. 'v-picker--landscape': props.landscape,
  36. 'v-picker--with-actions': !!slots.actions
  37. }, props.class],
  38. "style": props.style
  39. }), {
  40. default: () => [!props.hideHeader && _createVNode("div", {
  41. "key": "header",
  42. "class": [backgroundColorClasses.value],
  43. "style": [backgroundColorStyles.value]
  44. }, [hasTitle && _createVNode(VPickerTitle, {
  45. "key": "picker-title"
  46. }, {
  47. default: () => [slots.title?.() ?? props.title]
  48. }), slots.header && _createVNode("div", {
  49. "class": "v-picker__header"
  50. }, [slots.header()])]), _createVNode("div", {
  51. "class": "v-picker__body"
  52. }, [slots.default?.()]), slots.actions && _createVNode(VDefaultsProvider, {
  53. "defaults": {
  54. VBtn: {
  55. slim: true,
  56. variant: 'text'
  57. }
  58. }
  59. }, {
  60. default: () => [_createVNode("div", {
  61. "class": "v-picker__actions"
  62. }, [slots.actions()])]
  63. })]
  64. });
  65. });
  66. return {};
  67. }
  68. });
  69. //# sourceMappingURL=VPicker.mjs.map