VExpansionPanels.mjs 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  1. import { createVNode as _createVNode } from "vue";
  2. // Styles
  3. import "./VExpansionPanel.css";
  4. // Components
  5. import { VExpansionPanelSymbol } from "./shared.mjs";
  6. import { makeVExpansionPanelProps } from "./VExpansionPanel.mjs"; // Composables
  7. import { makeComponentProps } from "../../composables/component.mjs";
  8. import { provideDefaults } from "../../composables/defaults.mjs";
  9. import { makeGroupProps, useGroup } from "../../composables/group.mjs";
  10. import { makeTagProps } from "../../composables/tag.mjs";
  11. import { makeThemeProps, provideTheme } from "../../composables/theme.mjs"; // Utilities
  12. import { computed, toRef } from 'vue';
  13. import { genericComponent, pick, propsFactory, useRender } from "../../util/index.mjs"; // Types
  14. const allowedVariants = ['default', 'accordion', 'inset', 'popout'];
  15. export const makeVExpansionPanelsProps = propsFactory({
  16. flat: Boolean,
  17. ...makeGroupProps(),
  18. ...pick(makeVExpansionPanelProps(), ['bgColor', 'collapseIcon', 'color', 'eager', 'elevation', 'expandIcon', 'focusable', 'hideActions', 'readonly', 'ripple', 'rounded', 'tile', 'static']),
  19. ...makeThemeProps(),
  20. ...makeComponentProps(),
  21. ...makeTagProps(),
  22. variant: {
  23. type: String,
  24. default: 'default',
  25. validator: v => allowedVariants.includes(v)
  26. }
  27. }, 'VExpansionPanels');
  28. export const VExpansionPanels = genericComponent()({
  29. name: 'VExpansionPanels',
  30. props: makeVExpansionPanelsProps(),
  31. emits: {
  32. 'update:modelValue': val => true
  33. },
  34. setup(props, _ref) {
  35. let {
  36. slots
  37. } = _ref;
  38. const {
  39. next,
  40. prev
  41. } = useGroup(props, VExpansionPanelSymbol);
  42. const {
  43. themeClasses
  44. } = provideTheme(props);
  45. const variantClass = computed(() => props.variant && `v-expansion-panels--variant-${props.variant}`);
  46. provideDefaults({
  47. VExpansionPanel: {
  48. bgColor: toRef(props, 'bgColor'),
  49. collapseIcon: toRef(props, 'collapseIcon'),
  50. color: toRef(props, 'color'),
  51. eager: toRef(props, 'eager'),
  52. elevation: toRef(props, 'elevation'),
  53. expandIcon: toRef(props, 'expandIcon'),
  54. focusable: toRef(props, 'focusable'),
  55. hideActions: toRef(props, 'hideActions'),
  56. readonly: toRef(props, 'readonly'),
  57. ripple: toRef(props, 'ripple'),
  58. rounded: toRef(props, 'rounded'),
  59. static: toRef(props, 'static')
  60. }
  61. });
  62. useRender(() => _createVNode(props.tag, {
  63. "class": ['v-expansion-panels', {
  64. 'v-expansion-panels--flat': props.flat,
  65. 'v-expansion-panels--tile': props.tile
  66. }, themeClasses.value, variantClass.value, props.class],
  67. "style": props.style
  68. }, {
  69. default: () => [slots.default?.({
  70. prev,
  71. next
  72. })]
  73. }));
  74. return {
  75. next,
  76. prev
  77. };
  78. }
  79. });
  80. //# sourceMappingURL=VExpansionPanels.mjs.map