sprintify-ui 0.6.88 → 0.7.0

package/dist/tailwindcss/theme.js

@@ -18,7 +18,7 @@ module.exports = {
             menu: '40',
             tooltip: '40',
             modal: '30',
-            notifications: '50',
+            snackbars: '50',
             dialogs: '50',
         },
         animation: {

package/dist/types/components/index.d.ts

@@ -3,7 +3,7 @@ import BaseAddressForm from './BaseAddressForm.vue';
 import BaseAlert from './BaseAlert.vue';
 import BaseApp from './BaseApp.vue';
 import BaseAppDialogs from './BaseAppDialogs.vue';
-import BaseAppNotifications from './BaseAppNotifications.vue';
+import BaseAppSnackbars from './BaseAppSnackbars.vue';
 import BaseAutocomplete from './BaseAutocomplete.vue';
 import BaseAutocompleteFetch from './BaseAutocompleteFetch.vue';
 import BaseAvatar from './BaseAvatar.vue';
@@ -101,4 +101,4 @@ import BaseLayoutStacked from './BaseLayoutStacked.vue';
 import BaseLayoutStackedConfigurable from './BaseLayoutStackedConfigurable.vue';
 import BaseLayoutSidebar from './BaseLayoutSidebar.vue';
 import BaseLayoutSidebarConfigurable from './BaseLayoutSidebarConfigurable.vue';
-export { BaseActionItem, BaseAddressForm, BaseAlert, BaseApp, BaseAppDialogs, BaseAppNotifications, BaseAutocomplete, BaseAutocompleteFetch, BaseAvatar, BaseAvatarGroup, BaseBadge, BaseBelongsTo, BaseBelongsToFetch, BaseBoolean, BaseBreadcrumbs, BaseButton, BaseButtonGroup, BaseCard, BaseCardRow, BaseCharacterCounter, BaseClipboard, BaseCalendar, BaseColor, BaseContainer, BaseCounter, BaseCropper, BaseCropperModal, BaseDataIterator, BaseDataTable, BaseDatePicker, BaseTimePicker, BaseDateSelect, BaseDescriptionList, BaseDescriptionListItem, BaseDialog, BaseDisplayRelativeTime, BaseDropdown, BaseDropdownAutocomplete, BaseEmptyState, BaseField, BaseFieldI18n, BaseFilePicker, BaseFilePickerCrop, BaseFileUploader, BaseForm, BaseGantt, BaseHasMany, BaseHeader, BaseIcon, BaseIconPicker, BaseInput, BaseInputLabel, BaseInputPercent, BaseLoadingCover, BaseMediaItem, BaseMediaLibrary, BaseMediaPreview, BaseMenu, BaseMenuItem, BaseModalCenter, BaseModalSide, BaseNavbar, BaseNavbarItem, BaseNavbarItemContent, BaseNavbarSideItem, BasePagination, BasePanel, BasePassword, BaseProgressCircle, BaseRadioGroup, BaseReadMore, BaseRichText, BaseSelect, BaseShortcut, BaseSideNavigation, BaseSideNavigationItem, BaseSkeleton, BaseStatistic, BaseStepper, BaseStepperItem, BaseSwitch, BaseSystemAlert, BaseTable, BaseTableBody, BaseTableCell, BaseTableHead, BaseTableHeader, BaseTableRow, BaseTabs, BaseTabItem, BaseTagAutocomplete, BaseTagAutocompleteFetch, BaseTableColumn, BaseTextarea, BaseTextareaAutoresize, BaseTimeline, BaseTimelineItem, BaseTooltip, BaseUniqueCode, BaseLayoutStacked, BaseLayoutStackedConfigurable, BaseLayoutSidebar, BaseLayoutSidebarConfigurable, };
+export { BaseActionItem, BaseAddressForm, BaseAlert, BaseApp, BaseAppDialogs, BaseAppSnackbars, BaseAutocomplete, BaseAutocompleteFetch, BaseAvatar, BaseAvatarGroup, BaseBadge, BaseBelongsTo, BaseBelongsToFetch, BaseBoolean, BaseBreadcrumbs, BaseButton, BaseButtonGroup, BaseCard, BaseCardRow, BaseCharacterCounter, BaseClipboard, BaseCalendar, BaseColor, BaseContainer, BaseCounter, BaseCropper, BaseCropperModal, BaseDataIterator, BaseDataTable, BaseDatePicker, BaseTimePicker, BaseDateSelect, BaseDescriptionList, BaseDescriptionListItem, BaseDialog, BaseDisplayRelativeTime, BaseDropdown, BaseDropdownAutocomplete, BaseEmptyState, BaseField, BaseFieldI18n, BaseFilePicker, BaseFilePickerCrop, BaseFileUploader, BaseForm, BaseGantt, BaseHasMany, BaseHeader, BaseIcon, BaseIconPicker, BaseInput, BaseInputLabel, BaseInputPercent, BaseLoadingCover, BaseMediaItem, BaseMediaLibrary, BaseMediaPreview, BaseMenu, BaseMenuItem, BaseModalCenter, BaseModalSide, BaseNavbar, BaseNavbarItem, BaseNavbarItemContent, BaseNavbarSideItem, BasePagination, BasePanel, BasePassword, BaseProgressCircle, BaseRadioGroup, BaseReadMore, BaseRichText, BaseSelect, BaseShortcut, BaseSideNavigation, BaseSideNavigationItem, BaseSkeleton, BaseStatistic, BaseStepper, BaseStepperItem, BaseSwitch, BaseSystemAlert, BaseTable, BaseTableBody, BaseTableCell, BaseTableHead, BaseTableHeader, BaseTableRow, BaseTabs, BaseTabItem, BaseTagAutocomplete, BaseTagAutocompleteFetch, BaseTableColumn, BaseTextarea, BaseTextareaAutoresize, BaseTimeline, BaseTimelineItem, BaseTooltip, BaseUniqueCode, BaseLayoutStacked, BaseLayoutStackedConfigurable, BaseLayoutSidebar, BaseLayoutSidebarConfigurable, };

package/dist/types/index.d.ts

@@ -1,7 +1,7 @@
 import { AxiosInstance } from 'axios';
 import { App } from 'vue';
 import { useDialogsStore } from './stores/dialogs';
-import { useNotificationsStore } from './stores/notifications';
+import { useSnackbarsStore, useNotificationsStore } from './stores/snackbars';
 import { useSystemAlertStore } from './stores/systemAlerts';
 import { useClickOutside } from './composables/clickOutside';
 import { useField } from './composables/field';
@@ -245,6 +245,7 @@ export type * from './types';
 export { messages };
 export { config };
 export { useDialogsStore };
+export { useSnackbarsStore };
 export { useNotificationsStore };
 export { useSystemAlertStore };
 export { useClickOutside };

package/dist/types/stores/snackbars.d.ts

@@ -0,0 +1,19 @@
+import { Snackbar, SnackbarOptions } from '../types';
+export declare const useSnackbarsStore: import("pinia").StoreDefinition<"notifications", {
+    count: number;
+    snackbars: Snackbar[];
+    timeouts: Record<number, number>;
+}, {}, {
+    push(options: SnackbarOptions): void;
+    remove(snackbar: Snackbar): void;
+    clear(): void;
+}>;
+export declare const useNotificationsStore: import("pinia").StoreDefinition<"notifications", {
+    count: number;
+    snackbars: Snackbar[];
+    timeouts: Record<number, number>;
+}, {}, {
+    push(options: SnackbarOptions): void;
+    remove(snackbar: Snackbar): void;
+    clear(): void;
+}>;

package/dist/types/types/index.d.ts

@@ -134,15 +134,15 @@ export interface Dialog {
     onCancel: () => void;
 }
 /**
- * Notification
+ * Snackbar
  */
-export interface NotificationOptions {
+export interface SnackbarOptions {
     title: string;
     text: string;
     color?: 'info' | 'success' | 'danger' | 'warning';
     duration?: number;
 }
-export interface Notification {
+export interface Snackbar {
     id: number;
     title: string;
     text: string;
@@ -150,7 +150,7 @@ export interface Notification {
     duration: number;
 }
 /**
- * App Notification
+ * Notification
  */
 export interface NotificationsConfig {
     count: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.6.88",
+  "version": "0.7.0",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
     "build-fast": "rimraf dist && vite build",

package/src/components/BaseApp.vue

@@ -3,7 +3,7 @@
     <slot />
 
     <!-- Notifications -->
-    <BaseAppNotifications />
+    <BaseAppSnackbars />
 
     <!-- Dialogs -->
     <BaseAppDialogs />
@@ -12,5 +12,5 @@
 
 <script lang="ts" setup>
 import BaseAppDialogs from './BaseAppDialogs.vue';
-import BaseAppNotifications from './BaseAppNotifications.vue';
+import BaseAppSnackbars from './BaseAppSnackbars.vue';
 </script>

package/src/components/{BaseAppNotifications.vue → BaseAppSnackbars.vue}

@@ -1,7 +1,7 @@
 <template>
   <Teleport to="body">
     <div
-      class="pointer-events-none fixed inset-0 z-notifications flex items-end justify-end p-6 md:p-8"
+      class="pointer-events-none fixed inset-0 z-snackbars flex items-end justify-end p-6 md:p-8"
     >
       <div class="w-full">
         <TransitionGroup
@@ -13,13 +13,13 @@
           leave-to-class="translate-y-2 opacity-0"
         >
           <div
-            v-for="notification in notifications"
-            :key="notification.id"
+            v-for="snackbar in snackbars"
+            :key="snackbar.id"
           >
             <BaseToast
               class="mt-4"
-              :text="notification.text"
-              :color="notification.color"
+              :text="snackbar.text"
+              :color="snackbar.color"
             />
           </div>
         </TransitionGroup>
@@ -29,12 +29,12 @@
 </template>
 
 <script lang="ts" setup>
-import { useNotificationsStore } from '@/index';
+import { useSnackbarsStore } from '@/index';
 import BaseToast from './BaseToast.vue';
 
-const notificationsStore = useNotificationsStore();
+const snackbarsStore = useSnackbarsStore();
 
-const notifications = computed(() => {
-  return notificationsStore.notifications;
+const snackbars = computed(() => {
+  return snackbarsStore.snackbars;
 });
 </script>

package/src/components/BaseCropper.stories.js

@@ -1,6 +1,6 @@
 import BaseCropper from '@/components/BaseCropper.vue';
 import BaseLoadingCover from '@/components/BaseLoadingCover.vue';
-import BaseAppNotifications from '@/components/BaseAppNotifications.vue';
+import BaseAppSnackbars from '@/components/BaseAppSnackbars.vue';
 import { Icon as BaseIcon } from '@iconify/vue';
 
 export default {
@@ -17,7 +17,7 @@ const Template = (args) => ({
     BaseCropper,
     BaseIcon,
     BaseLoadingCover,
-    BaseAppNotifications,
+    BaseAppSnackbars,
   },
   setup() {
     const cropperRef = ref(null);
@@ -74,7 +74,7 @@ const Template = (args) => ({
       </template>
     </BaseCropper>
 
-    <BaseAppNotifications></BaseAppNotifications>
+    <BaseAppSnackbars></BaseAppSnackbars>
   `,
 });
 

package/src/components/BaseCropperModal.stories.js

@@ -1,5 +1,5 @@
 import BaseCropperModal from '@/components/BaseCropperModal.vue';
-import BaseAppNotifications from '@/components/BaseAppNotifications.vue';
+import BaseAppSnackbars from '@/components/BaseAppSnackbars.vue';
 
 const source =
   'https://images.unsplash.com/photo-1560250097-0b93528c311a?auto=format&fit=crop&q=80';
@@ -13,7 +13,7 @@ export default {
 const Template = (args) => ({
   components: {
     BaseCropperModal,
-    BaseAppNotifications,
+    BaseAppSnackbars,
   },
   setup() {
     const value = ref(true);
@@ -21,7 +21,7 @@ const Template = (args) => ({
   },
   template: `
     <BaseCropperModal v-bind="args" v-model="value"></BaseCropperModal>
-    <BaseAppNotifications></BaseAppNotifications>
+    <BaseAppSnackbars></BaseAppSnackbars>
   `,
 });
 

package/src/components/BaseDataTable.stories.js

@@ -3,7 +3,7 @@ import BaseTableColumn from './BaseTableColumn.vue';
 import BaseBoolean from './BaseBoolean.vue';
 import BaseSelect from './BaseSelect.vue';
 import BaseBadge from './BaseBadge.vue';
-import BaseAppNotifications from './BaseAppNotifications.vue';
+import BaseAppSnackbars from './BaseAppSnackbars.vue';
 import BaseAppDialogs from './BaseAppDialogs.vue';
 import { onBeforeUnmount } from 'vue';
 import { DateTime } from 'luxon';
@@ -37,7 +37,7 @@ const templateComponents = {
   BaseBoolean,
   BaseSelect,
   BaseBadge,
-  BaseAppNotifications,
+  BaseAppSnackbars,
   BaseAppDialogs,
 };
 
@@ -45,7 +45,7 @@ const template = `
 <div class="font-mono text-sm bg-black px-2 py-1 rounded text-white">Last fetch: {{ lastFetch?.getTime() }} (should update on each fetch)</div>
 <br/>
 ${templateDataTable}
-<BaseAppNotifications></BaseAppNotifications>
+<BaseAppSnackbars></BaseAppSnackbars>
 <BaseAppDialogs></BaseAppDialogs>
 `;
 

package/src/components/BaseDataTable.vue

@@ -239,7 +239,7 @@ import {
   RowAction,
 } from '@/types';
 import { useDialogsStore } from '@/stores/dialogs';
-import { useNotificationsStore } from '../stores/notifications';
+import { useSnackbarsStore } from '../stores/snackbars';
 import BaseDataIterator from './BaseDataIterator.vue';
 import { cloneDeep, isArray } from 'lodash';
 
@@ -262,7 +262,7 @@ const router = useRouter();
 const http = config.http;
 
 const dialogs = useDialogsStore();
-const notifications = useNotificationsStore();
+const snackbars = useSnackbarsStore();
 
 const table = ref<null | InstanceType<typeof BaseDataTableTemplate>>(null);
 
@@ -564,7 +564,7 @@ const onDelete = (row: CollectionItem) => {
     .delete(props.deleteUrl(row))
     .then((response) => {
       if (response.data && response.data.message) {
-        notifications.push({
+        snackbars.push({
           title: t('sui.success'),
           text: response.data.message,
           color: 'success',
@@ -576,7 +576,7 @@ const onDelete = (row: CollectionItem) => {
       fetch();
     })
     .catch((error) => {
-      notifications.push({
+      snackbars.push({
         title: t('sui.error'),
         text: error.response.data?.message ?? 'Unknown error',
         color: 'danger',

package/src/components/BaseFilePicker.stories.js

@@ -1,7 +1,7 @@
 import BaseFilePicker from './BaseFilePicker.vue';
 import { Icon as BaseIcon } from '@iconify/vue';
 import ShowValue from '../../.storybook/components/ShowValue.vue';
-import BaseAppNotifications from '@/components/BaseAppNotifications.vue';
+import BaseAppSnackbars from '@/components/BaseAppSnackbars.vue';
 import { t } from '@/i18n';
 
 export default {
@@ -11,7 +11,7 @@ export default {
 };
 
 const Template = (args) => ({
-  components: { BaseFilePicker, BaseIcon, ShowValue, BaseAppNotifications },
+  components: { BaseFilePicker, BaseIcon, ShowValue, BaseAppSnackbars },
   setup() {
     const file = ref(null);
 
@@ -56,7 +56,7 @@ const Template = (args) => ({
 
     <ShowValue :value="file" />
 
-    <BaseAppNotifications></BaseAppNotifications>
+    <BaseAppSnackbars></BaseAppSnackbars>
   `,
 });
 

package/src/components/BaseFilePicker.vue

@@ -27,7 +27,7 @@
 
 <script lang="ts" setup>
 import { t } from '@/i18n';
-import { useNotificationsStore } from '@/stores/notifications';
+import { useSnackbarsStore } from '@/stores/snackbars';
 import { fileSizeFormat, toHumanList } from '@/utils';
 import { maxSize, validExtension } from '@/utils/fileValidations';
 
@@ -52,7 +52,7 @@ const props = withDefaults(
 
 const emit = defineEmits(['select']);
 
-const notifications = useNotificationsStore();
+const snackbars = useSnackbarsStore();
 
 const selecting = ref(false);
 const dragging = ref(false);
@@ -127,7 +127,7 @@ async function select(files: File[]) {
 
 function isValid(file: File) {
   if (!maxSize(file, props.maxSize)) {
-    notifications.push({
+    snackbars.push({
       color: 'danger',
       title: t('sui.error'),
       text: t('sui.the_file_size_must_not_exceed_x', {
@@ -141,7 +141,7 @@ function isValid(file: File) {
   }
 
   if (!validExtension(file, props.acceptedExtensions)) {
-    notifications.push({
+    snackbars.push({
       color: 'danger',
       title: t('sui.error'),
       text:

package/src/components/BaseFilePickerCrop.stories.js

@@ -1,6 +1,6 @@
 import BaseFilePickerCrop from '@/components/BaseFilePickerCrop.vue';
 import BaseLoadingCover from '@/components/BaseLoadingCover.vue';
-import BaseAppNotifications from '@/components/BaseAppNotifications.vue';
+import BaseAppSnackbars from '@/components/BaseAppSnackbars.vue';
 import BaseCropper from '@/components/BaseCropper.vue';
 import BaseModalCenter from '@/components/BaseModalCenter.vue';
 import BaseButton from '@/components/BaseButton.vue';
@@ -22,7 +22,7 @@ const Template = (args) => ({
     BaseFilePickerCrop,
     BaseIcon,
     BaseLoadingCover,
-    BaseAppNotifications,
+    BaseAppSnackbars,
     BaseCropper,
     BaseModalCenter,
     BaseButton,
@@ -77,7 +77,7 @@ const Template = (args) => ({
 
     <ShowValue :value="file" />
 
-    <BaseAppNotifications></BaseAppNotifications>
+    <BaseAppSnackbars></BaseAppSnackbars>
   `,
 });
 

package/src/components/BaseFileUploader.stories.js

@@ -1,6 +1,6 @@
 import BaseFileUploader from '@/components/BaseFileUploader.vue';
 import BaseLoadingCover from '@/components/BaseLoadingCover.vue';
-import BaseAppNotifications from '@/components/BaseAppNotifications.vue';
+import BaseAppSnackbars from '@/components/BaseAppSnackbars.vue';
 import ShowValue from '../../.storybook/components/ShowValue.vue';
 import { Icon as BaseIcon } from '@iconify/vue';
 import { t } from '@/i18n';
@@ -21,7 +21,7 @@ const Template = (args) => ({
     BaseFileUploader,
     BaseIcon,
     BaseLoadingCover,
-    BaseAppNotifications,
+    BaseAppSnackbars,
     ShowValue,
   },
   setup() {
@@ -71,7 +71,7 @@ const Template = (args) => ({
 
     <ShowValue :value="files" />
 
-    <BaseAppNotifications></BaseAppNotifications>
+    <BaseAppSnackbars></BaseAppSnackbars>
   `,
 });
 

package/src/components/BaseFileUploader.vue

@@ -32,7 +32,7 @@
 <script lang="ts" setup>
 import { config } from '@/index';
 import { UploadedFile } from '@/types/UploadedFile';
-import { useNotificationsStore } from '@/stores/notifications';
+import { useSnackbarsStore } from '@/stores/snackbars';
 import BaseLoadingCover from '@/components/BaseLoadingCover.vue';
 import { BaseCropperConfig } from '@/types';
 import BaseFilePicker from './BaseFilePicker.vue';
@@ -40,7 +40,7 @@ import BaseFilePickerCrop from './BaseFilePickerCrop.vue';
 import { t } from '@/i18n';
 
 const http = config.http;
-const notifications = useNotificationsStore();
+const snackbarsStore = useSnackbarsStore();
 
 const props = withDefaults(
   defineProps<{
@@ -137,7 +137,7 @@ async function onFileSelect(files: File | File[]) {
   } catch (e: unknown) {
     console.error(e);
     emit('fail');
-    notifications.push({
+    snackbarsStore.push({
       color: 'danger',
       title: t('sui.error'),
       text: t('sui.upload_failed'),

package/src/components/BaseForm.stories.js

@@ -3,6 +3,7 @@ import BaseField from './BaseField.vue';
 import BaseInput from './BaseInput.vue';
 import BaseMediaLibrary from './BaseMediaLibrary.vue';
 import ShowValue from '../../.storybook/components/ShowValue.vue';
+import BaseAppSnackbars from './BaseAppSnackbars.vue';
 
 export default {
   title: 'Form/BaseForm',
@@ -16,6 +17,7 @@ const Template = (args) => ({
     BaseInput,
     BaseField,
     BaseMediaLibrary,
+    BaseAppSnackbars,
   },
   setup() {
     const form = ref({
@@ -25,6 +27,7 @@ const Template = (args) => ({
     return { args, form };
   },
   template: `
+  <BaseAppSnackbars />
   <BaseForm 
     method="post" 
     url="https://faker.witify.io/api/todos" 

package/src/components/BaseForm.vue

@@ -50,12 +50,12 @@ import { PropType } from 'vue';
 import { serialize } from 'object-to-formdata';
 import { Method, DataFormat } from '@/types';
 import { AxiosError, AxiosInstance, AxiosResponse } from 'axios';
-import { config, useNotificationsStore } from '@/index';
+import { config, useSnackbarsStore } from '@/index';
 import { get, isArray } from 'lodash';
 import { t } from '@/i18n';
 import { twMerge } from 'tailwind-merge';
 
-const notifications = useNotificationsStore();
+const snackbars = useSnackbarsStore();
 
 type NextFunction = () => void;
 
@@ -236,7 +236,7 @@ function query() {
       const errorMessage = get(error, 'response.data.message', null);
 
       if (props.showNotificationOnError && errorMessage) {
-        notifications.push({
+        snackbars.push({
           color: 'danger',
           title: t('sui.error'),
           text: errorMessage,
@@ -258,7 +258,7 @@ function successHandler(response: AxiosResponse<any, any>) {
     }
 
     if (props.showNotificationOnSuccess) {
-      notifications.push({
+      snackbars.push({
         color: 'success',
         title: t('sui.success'),
         text: message,

package/src/components/BaseHasMany.stories.js

@@ -1,7 +1,7 @@
 import BaseHasMany from './BaseHasMany.vue';
 import ShowValue from '@/../.storybook/components/ShowValue.vue';
 import { createFieldStory, options } from '../../.storybook/utils';
-import BaseAppNotifications from './BaseAppNotifications.vue';
+import BaseAppSnackbars from './BaseAppSnackbars.vue';
 import QueryString from 'qs';
 import { random } from 'lodash';
 
@@ -30,7 +30,7 @@ export default {
 
 const Template = (args) => {
   return {
-    components: { BaseHasMany, ShowValue, BaseAppNotifications },
+    components: { BaseHasMany, ShowValue, BaseAppSnackbars },
     setup() {
       const value = ref([
         "4",
@@ -49,7 +49,7 @@ const Template = (args) => {
         :current-models="currentModels"
       ></BaseHasMany>
       <ShowValue :value="value" />
-      <BaseAppNotifications />
+      <BaseAppSnackbars />
   `,
   };
 };
@@ -228,7 +228,7 @@ export const SlotEmpty = (args) => {
 
 const RaceConditionTemplate = (args) => {
   return {
-    components: { BaseHasMany, ShowValue, BaseAppNotifications },
+    components: { BaseHasMany, ShowValue, BaseAppSnackbars },
     setup() {
 
       const value = ref([
@@ -265,7 +265,7 @@ const RaceConditionTemplate = (args) => {
 
       <p class="-mb-4">Value from component</p>
       <ShowValue :value="value" />
-      <BaseAppNotifications />
+      <BaseAppSnackbars />
   `,
   };
 };

package/src/components/BaseMediaLibrary.vue

@@ -109,7 +109,7 @@ import { Media } from '@/types/Media';
 import { BaseCropperConfig, MediaLibraryPayload } from '@/types';
 import { fileSizeFormat } from '@/utils';
 import { useDialogsStore } from '@/stores/dialogs';
-import { useNotificationsStore } from '@/stores/notifications';
+import { useSnackbarsStore } from '@/stores/snackbars';
 import BaseFileUploader from './BaseFileUploader.vue';
 import { useField } from '@/composables/field';
 import { BaseIcon } from '.';
@@ -119,7 +119,7 @@ import BaseMediaGallery from './BaseMediaGallery.vue';
 import { t } from '@/i18n';
 
 const dialogs = useDialogsStore();
-const notifications = useNotificationsStore();
+const snackbars = useSnackbarsStore();
 
 const props = defineProps({
   modelValue: {
@@ -264,7 +264,7 @@ function onSuccess(files: UploadedFile[]) {
       modelValue.length >= normalizedMax.value &&
       normalizedMax.value > 1
     ) {
-      notifications.push({
+      snackbars.push({
         title: t('sui.whoops'),
         text: t('sui.you_can_upload_up_to_n_files', {
           count: normalizedMax.value,

package/src/components/BaseTagAutocomplete.stories.js

@@ -1,7 +1,7 @@
 import { createFieldStory, options } from '../../.storybook/utils';
 import BaseTagAutocomplete from './BaseTagAutocomplete.vue';
 import ShowValue from '@/../.storybook/components/ShowValue.vue';
-import BaseAppNotifications from './BaseAppNotifications.vue';
+import BaseAppSnackbars from './BaseAppSnackbars.vue';
 
 const sizes = ['xs', 'sm', 'md'];
 
@@ -27,7 +27,7 @@ export default {
 };
 
 const Template = (args) => ({
-  components: { BaseTagAutocomplete, ShowValue, BaseAppNotifications },
+  components: { BaseTagAutocomplete, ShowValue, BaseAppSnackbars },
   setup() {
     const value = ref(null);
     return { args, value };
@@ -35,12 +35,18 @@ const Template = (args) => ({
   template: `
     <BaseTagAutocomplete v-model="value" v-bind="args"></BaseTagAutocomplete>
     <ShowValue :value="value" />
+    <BaseAppSnackbars />
   `,
 });
 
 export const Demo = Template.bind({});
 Demo.args = {};
 
+export const Max = Template.bind({});
+Max.args = {
+  max: 3
+};
+
 export const AlwaysShowDropdown = Template.bind({});
 AlwaysShowDropdown.args = {
   inline: true,
@@ -84,7 +90,7 @@ export const Sizes = (args) => ({
 });
 
 export const SlotOption = (args) => ({
-  components: { BaseTagAutocomplete, ShowValue, BaseAppNotifications },
+  components: { BaseTagAutocomplete, ShowValue, BaseAppSnackbars },
   setup() {
     const value = ref(null);
 
@@ -201,7 +207,7 @@ export const SlotBlockItem = (args) => {
 
 export const SlotFooter = (args) => {
   return {
-    components: { BaseTagAutocomplete, ShowValue, BaseAppNotifications },
+    components: { BaseTagAutocomplete, ShowValue, BaseAppSnackbars },
     setup() {
       const value = ref(null);
       function onClick() {
@@ -228,7 +234,7 @@ export const SlotFooter = (args) => {
 
 export const SlotEmpty = (args) => {
   return {
-    components: { BaseTagAutocomplete, ShowValue, BaseAppNotifications },
+    components: { BaseTagAutocomplete, ShowValue, BaseAppSnackbars },
     setup() {
       const value = ref(null);
       return { args, value };

package/src/components/BaseTagAutocomplete.vue

@@ -96,13 +96,13 @@ import { NormalizedOption, RawOption } from '@/types';
 import { useHasOptions } from '@/composables/hasOptions';
 import { useField } from '@/composables/field';
 import { useClickOutside } from '@/composables/clickOutside';
-import { useNotificationsStore } from '@/stores/notifications';
+import { useSnackbarsStore } from '@/stores/snackbars';
 import BaseAutocompleteDrawer from './BaseAutocompleteDrawer.vue';
 import { twMerge } from 'tailwind-merge';
 import { t } from '@/i18n';
 import { Size, sizes } from '@/utils/sizes';
 
-const notifications = useNotificationsStore();
+const snackbars = useSnackbarsStore();
 
 const props = defineProps({
   modelValue: {
@@ -340,7 +340,7 @@ const onSelect = (option: NormalizedOption) => {
   focus();
 
   if (props.max && normalizedModelValue.value.length >= props.max) {
-    notifications.push({
+    snackbars.push({
       title: t('sui.whoops'),
       text: t('sui.you_cannot_select_more_than_x_items', {
         count: props.max,