VSnackbarQueue.mjs 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  1. import { mergeProps as _mergeProps, createVNode as _createVNode, Fragment as _Fragment } from "vue";
  2. // Components
  3. import { VBtn } from "../../components/VBtn/index.mjs";
  4. import { VDefaultsProvider } from "../../components/VDefaultsProvider/index.mjs";
  5. import { makeVSnackbarProps, VSnackbar } from "../../components/VSnackbar/VSnackbar.mjs"; // Composables
  6. import { useLocale } from "../../composables/locale.mjs"; // Utilities
  7. import { computed, nextTick, shallowRef, watch } from 'vue';
  8. import { genericComponent, omit, propsFactory, useRender } from "../../util/index.mjs"; // Types
  9. export const makeVSnackbarQueueProps = propsFactory({
  10. // TODO: Port this to Snackbar on dev
  11. closable: [Boolean, String],
  12. closeText: {
  13. type: String,
  14. default: '$vuetify.dismiss'
  15. },
  16. modelValue: {
  17. type: Array,
  18. default: () => []
  19. },
  20. ...omit(makeVSnackbarProps(), ['modelValue'])
  21. }, 'VSnackbarQueue');
  22. export const VSnackbarQueue = genericComponent()({
  23. name: 'VSnackbarQueue',
  24. props: makeVSnackbarQueueProps(),
  25. emits: {
  26. 'update:modelValue': val => true
  27. },
  28. setup(props, _ref) {
  29. let {
  30. emit,
  31. slots
  32. } = _ref;
  33. const {
  34. t
  35. } = useLocale();
  36. const isActive = shallowRef(false);
  37. const isVisible = shallowRef(false);
  38. const current = shallowRef();
  39. watch(() => props.modelValue.length, (val, oldVal) => {
  40. if (!isVisible.value && val > oldVal) {
  41. showNext();
  42. }
  43. });
  44. watch(isActive, val => {
  45. if (val) isVisible.value = true;
  46. });
  47. function onAfterLeave() {
  48. if (props.modelValue.length) {
  49. showNext();
  50. } else {
  51. current.value = undefined;
  52. isVisible.value = false;
  53. }
  54. }
  55. function showNext() {
  56. const [next, ...rest] = props.modelValue;
  57. emit('update:modelValue', rest);
  58. current.value = typeof next === 'string' ? {
  59. text: next
  60. } : next;
  61. nextTick(() => {
  62. isActive.value = true;
  63. });
  64. }
  65. function onClickClose() {
  66. isActive.value = false;
  67. }
  68. const btnProps = computed(() => ({
  69. color: typeof props.closable === 'string' ? props.closable : undefined,
  70. text: t(props.closeText)
  71. }));
  72. useRender(() => {
  73. const hasActions = !!(props.closable || slots.actions);
  74. const {
  75. modelValue: _,
  76. ...snackbarProps
  77. } = VSnackbar.filterProps(props);
  78. return _createVNode(_Fragment, null, [isVisible.value && !!current.value && (slots.default ? _createVNode(VDefaultsProvider, {
  79. "defaults": {
  80. VSnackbar: current.value
  81. }
  82. }, {
  83. default: () => [slots.default({
  84. item: current.value
  85. })]
  86. }) : _createVNode(VSnackbar, _mergeProps(snackbarProps, current.value, {
  87. "modelValue": isActive.value,
  88. "onUpdate:modelValue": $event => isActive.value = $event,
  89. "onAfterLeave": onAfterLeave
  90. }), {
  91. text: slots.text ? () => slots.text?.({
  92. item: current.value
  93. }) : undefined,
  94. actions: hasActions ? () => _createVNode(_Fragment, null, [!slots.actions ? _createVNode(VBtn, _mergeProps(btnProps.value, {
  95. "onClick": onClickClose
  96. }), null) : _createVNode(VDefaultsProvider, {
  97. "defaults": {
  98. VBtn: btnProps.value
  99. }
  100. }, {
  101. default: () => [slots.actions({
  102. item: current.value,
  103. props: {
  104. onClick: onClickClose
  105. }
  106. })]
  107. })]) : undefined
  108. }))]);
  109. });
  110. }
  111. });
  112. //# sourceMappingURL=VSnackbarQueue.mjs.map