sprintify-ui 0.6.87 → 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/BaseDataIteratorSectionColumns.vue.d.ts

@@ -13,10 +13,10 @@ declare const _default: import("vue").DefineComponent<{
                 detailed: boolean;
                 hasDetailedVisible: Function;
                 checkable: boolean;
-                checkedRows: import("@/types/index.js").Row[];
+                checkedRows: import("@/index.js").Row[];
                 isRowCheckable: Function;
                 maxHeight: number;
-                data: import("@/types/index.js").Row[];
+                data: import("@/index.js").Row[];
                 visibleColumns: number[];
                 checkboxPosition: "right" | "left";
                 detailTransition: string;
@@ -28,9 +28,9 @@ declare const _default: import("vue").DefineComponent<{
                 readonly detailed: boolean;
                 readonly hasDetailedVisible: Function;
                 readonly checkable: boolean;
-                readonly checkedRows: import("@/types/index.js").Row[];
+                readonly checkedRows: import("@/index.js").Row[];
                 readonly isRowCheckable: Function;
-                readonly data: import("@/types/index.js").Row[];
+                readonly data: import("@/index.js").Row[];
                 readonly checkboxPosition: "right" | "left";
                 readonly detailTransition: string;
                 readonly maxHeight?: number | undefined;
@@ -45,7 +45,7 @@ declare const _default: import("vue").DefineComponent<{
                 "onUpdate:openedDetailed"?: ((...args: any[]) => any) | undefined;
             } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & Readonly<import("vue").ExtractPropTypes<{
                 data: {
-                    type: PropType<import("@/types/index.js").Row[]>;
+                    type: PropType<import("@/index.js").Row[]>;
                     default: () => never[];
                 };
                 loading: {
@@ -74,7 +74,7 @@ declare const _default: import("vue").DefineComponent<{
                 };
                 checkedRows: {
                     default: () => never[];
-                    type: PropType<import("@/types/index.js").Row[]>;
+                    type: PropType<import("@/index.js").Row[]>;
                 };
                 sortField: {
                     type: StringConstructor;
@@ -125,7 +125,7 @@ declare const _default: import("vue").DefineComponent<{
             $el: any;
             $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
                 data: {
-                    type: PropType<import("@/types/index.js").Row[]>;
+                    type: PropType<import("@/index.js").Row[]>;
                     default: () => never[];
                 };
                 loading: {
@@ -154,7 +154,7 @@ declare const _default: import("vue").DefineComponent<{
                 };
                 checkedRows: {
                     default: () => never[];
-                    type: PropType<import("@/types/index.js").Row[]>;
+                    type: PropType<import("@/index.js").Row[]>;
                 };
                 sortField: {
                     type: StringConstructor;
@@ -207,8 +207,8 @@ declare const _default: import("vue").DefineComponent<{
                     style: {
                         width: number | undefined;
                     };
-                    thAttrs: (column: import("@/types/index.js").BaseTableColumn) => Record<string, any>;
-                    tdAttrs: (row: import("@/types/index.js").Row, column: import("@/types/index.js").BaseTableColumn) => Record<string, any>;
+                    thAttrs: (column: import("@/index.js").BaseTableColumnData) => Record<string, any>;
+                    tdAttrs: (row: import("@/index.js").Row, column: import("@/index.js").BaseTableColumnData) => Record<string, any>;
                 }[]>;
                 uncheckAll: () => void;
                 scrollTop: () => void;
@@ -229,10 +229,10 @@ declare const _default: import("vue").DefineComponent<{
                 detailed: boolean;
                 hasDetailedVisible: Function;
                 checkable: boolean;
-                checkedRows: import("@/types/index.js").Row[];
+                checkedRows: import("@/index.js").Row[];
                 isRowCheckable: Function;
                 maxHeight: number;
-                data: import("@/types/index.js").Row[];
+                data: import("@/index.js").Row[];
                 visibleColumns: number[];
                 checkboxPosition: "right" | "left";
                 detailTransition: string;
@@ -258,7 +258,7 @@ declare const _default: import("vue").DefineComponent<{
             $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (args_0: R, args_1: R) => any : (...args: any) => any, options?: import("vue").WatchOptions<boolean> | undefined): import("vue").WatchStopHandle;
         } & Omit<Readonly<import("vue").ExtractPropTypes<{
             data: {
-                type: PropType<import("@/types/index.js").Row[]>;
+                type: PropType<import("@/index.js").Row[]>;
                 default: () => never[];
             };
             loading: {
@@ -287,7 +287,7 @@ declare const _default: import("vue").DefineComponent<{
             };
             checkedRows: {
                 default: () => never[];
-                type: PropType<import("@/types/index.js").Row[]>;
+                type: PropType<import("@/index.js").Row[]>;
             };
             sortField: {
                 type: StringConstructor;
@@ -340,8 +340,8 @@ declare const _default: import("vue").DefineComponent<{
                 style: {
                     width: number | undefined;
                 };
-                thAttrs: (column: import("@/types/index.js").BaseTableColumn) => Record<string, any>;
-                tdAttrs: (row: import("@/types/index.js").Row, column: import("@/types/index.js").BaseTableColumn) => Record<string, any>;
+                thAttrs: (column: import("@/index.js").BaseTableColumnData) => Record<string, any>;
+                tdAttrs: (row: import("@/index.js").Row, column: import("@/index.js").BaseTableColumnData) => Record<string, any>;
             }[]>;
             uncheckAll: () => void;
             scrollTop: () => void;
@@ -349,7 +349,7 @@ declare const _default: import("vue").DefineComponent<{
             $slots: {
                 default?(_: {}): any;
                 detail?(_: {
-                    row: import("@/types/index.js").Row;
+                    row: import("@/index.js").Row;
                     index: number;
                 }): any;
                 empty?(_: {}): any;
@@ -377,10 +377,10 @@ declare const _default: import("vue").DefineComponent<{
                 detailed: boolean;
                 hasDetailedVisible: Function;
                 checkable: boolean;
-                checkedRows: import("@/types/index.js").Row[];
+                checkedRows: import("@/index.js").Row[];
                 isRowCheckable: Function;
                 maxHeight: number;
-                data: import("@/types/index.js").Row[];
+                data: import("@/index.js").Row[];
                 visibleColumns: number[];
                 checkboxPosition: "right" | "left";
                 detailTransition: string;
@@ -392,9 +392,9 @@ declare const _default: import("vue").DefineComponent<{
                 readonly detailed: boolean;
                 readonly hasDetailedVisible: Function;
                 readonly checkable: boolean;
-                readonly checkedRows: import("@/types/index.js").Row[];
+                readonly checkedRows: import("@/index.js").Row[];
                 readonly isRowCheckable: Function;
-                readonly data: import("@/types/index.js").Row[];
+                readonly data: import("@/index.js").Row[];
                 readonly checkboxPosition: "right" | "left";
                 readonly detailTransition: string;
                 readonly maxHeight?: number | undefined;
@@ -409,7 +409,7 @@ declare const _default: import("vue").DefineComponent<{
                 "onUpdate:openedDetailed"?: ((...args: any[]) => any) | undefined;
             } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & Readonly<import("vue").ExtractPropTypes<{
                 data: {
-                    type: PropType<import("@/types/index.js").Row[]>;
+                    type: PropType<import("@/index.js").Row[]>;
                     default: () => never[];
                 };
                 loading: {
@@ -438,7 +438,7 @@ declare const _default: import("vue").DefineComponent<{
                 };
                 checkedRows: {
                     default: () => never[];
-                    type: PropType<import("@/types/index.js").Row[]>;
+                    type: PropType<import("@/index.js").Row[]>;
                 };
                 sortField: {
                     type: StringConstructor;
@@ -489,7 +489,7 @@ declare const _default: import("vue").DefineComponent<{
             $el: any;
             $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
                 data: {
-                    type: PropType<import("@/types/index.js").Row[]>;
+                    type: PropType<import("@/index.js").Row[]>;
                     default: () => never[];
                 };
                 loading: {
@@ -518,7 +518,7 @@ declare const _default: import("vue").DefineComponent<{
                 };
                 checkedRows: {
                     default: () => never[];
-                    type: PropType<import("@/types/index.js").Row[]>;
+                    type: PropType<import("@/index.js").Row[]>;
                 };
                 sortField: {
                     type: StringConstructor;
@@ -571,8 +571,8 @@ declare const _default: import("vue").DefineComponent<{
                     style: {
                         width: number | undefined;
                     };
-                    thAttrs: (column: import("@/types/index.js").BaseTableColumn) => Record<string, any>;
-                    tdAttrs: (row: import("@/types/index.js").Row, column: import("@/types/index.js").BaseTableColumn) => Record<string, any>;
+                    thAttrs: (column: import("@/index.js").BaseTableColumnData) => Record<string, any>;
+                    tdAttrs: (row: import("@/index.js").Row, column: import("@/index.js").BaseTableColumnData) => Record<string, any>;
                 }[]>;
                 uncheckAll: () => void;
                 scrollTop: () => void;
@@ -593,10 +593,10 @@ declare const _default: import("vue").DefineComponent<{
                 detailed: boolean;
                 hasDetailedVisible: Function;
                 checkable: boolean;
-                checkedRows: import("@/types/index.js").Row[];
+                checkedRows: import("@/index.js").Row[];
                 isRowCheckable: Function;
                 maxHeight: number;
-                data: import("@/types/index.js").Row[];
+                data: import("@/index.js").Row[];
                 visibleColumns: number[];
                 checkboxPosition: "right" | "left";
                 detailTransition: string;
@@ -622,7 +622,7 @@ declare const _default: import("vue").DefineComponent<{
             $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (args_0: R, args_1: R) => any : (...args: any) => any, options?: import("vue").WatchOptions<boolean> | undefined): import("vue").WatchStopHandle;
         } & Omit<Readonly<import("vue").ExtractPropTypes<{
             data: {
-                type: PropType<import("@/types/index.js").Row[]>;
+                type: PropType<import("@/index.js").Row[]>;
                 default: () => never[];
             };
             loading: {
@@ -651,7 +651,7 @@ declare const _default: import("vue").DefineComponent<{
             };
             checkedRows: {
                 default: () => never[];
-                type: PropType<import("@/types/index.js").Row[]>;
+                type: PropType<import("@/index.js").Row[]>;
             };
             sortField: {
                 type: StringConstructor;
@@ -704,8 +704,8 @@ declare const _default: import("vue").DefineComponent<{
                 style: {
                     width: number | undefined;
                 };
-                thAttrs: (column: import("@/types/index.js").BaseTableColumn) => Record<string, any>;
-                tdAttrs: (row: import("@/types/index.js").Row, column: import("@/types/index.js").BaseTableColumn) => Record<string, any>;
+                thAttrs: (column: import("@/index.js").BaseTableColumnData) => Record<string, any>;
+                tdAttrs: (row: import("@/index.js").Row, column: import("@/index.js").BaseTableColumnData) => Record<string, any>;
             }[]>;
             uncheckAll: () => void;
             scrollTop: () => void;
@@ -713,7 +713,7 @@ declare const _default: import("vue").DefineComponent<{
             $slots: {
                 default?(_: {}): any;
                 detail?(_: {
-                    row: import("@/types/index.js").Row;
+                    row: import("@/index.js").Row;
                     index: number;
                 }): any;
                 empty?(_: {}): any;

package/dist/types/components/BaseDataTableTemplate.vue.d.ts

@@ -1,5 +1,5 @@
 import { PropType } from 'vue';
-import { BaseTableColumn, Row } from '@/types';
+import { BaseTableColumnData, Row } from '@/types';
 /**
  * Remove all rows in current page.
  */
@@ -96,8 +96,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         style: {
             width: number | undefined;
         };
-        thAttrs: (column: BaseTableColumn) => Record<string, any>;
-        tdAttrs: (row: Row, column: BaseTableColumn) => Record<string, any>;
+        thAttrs: (column: BaseTableColumnData) => Record<string, any>;
+        tdAttrs: (row: Row, column: BaseTableColumnData) => Record<string, any>;
     }[]>;
     uncheckAll: typeof uncheckAll;
     scrollTop: typeof scrollTop;

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';
@@ -241,9 +241,11 @@ export default _default;
 export * from './components';
 export * from './constants';
 export * from './utils';
+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

@@ -71,7 +71,7 @@ export interface ActionItem {
     actions?: ActionItem[];
 }
 export type Row = Record<string, any>;
-export interface BaseTableColumn {
+export interface BaseTableColumnData {
     id: string;
     label: string;
     field: string;
@@ -88,8 +88,8 @@ export interface BaseTableColumn {
     style: {
         width: undefined | number;
     };
-    thAttrs: (column: BaseTableColumn) => Record<string, any>;
-    tdAttrs: (row: Row, column: BaseTableColumn) => Record<string, any>;
+    thAttrs: (column: BaseTableColumnData) => Record<string, any>;
+    tdAttrs: (row: Row, column: BaseTableColumnData) => Record<string, any>;
 }
 /**
  * System alert
@@ -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.87",
+  "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/BaseDataTableTemplate.vue

@@ -274,7 +274,7 @@
 
 <script lang="ts" setup>
 import { PropType, StyleValue, ref } from 'vue';
-import { BaseTableColumn, Row } from '@/types';
+import { BaseTableColumnData, Row } from '@/types';
 import SlotComponent from './SlotComponent';
 import { useResizeObserver, useScroll } from '@vueuse/core';
 import { debounce, isArray } from 'lodash';
@@ -386,9 +386,9 @@ const visibleDetailRows = ref<string[]>([]);
 // eslint-disable-next-line vue/no-setup-props-destructure
 const newCheckedRows = ref<Row[]>([...props.checkedRows]);
 const lastCheckedRowIndex = ref<number | null>(null);
-const currentSortColumn = ref<BaseTableColumn | null>(null);
+const currentSortColumn = ref<BaseTableColumnData | null>(null);
 const isAsc = ref(true);
-const defaultSlots = ref<BaseTableColumn[]>([]);
+const defaultSlots = ref<BaseTableColumnData[]>([]);
 const sequence = ref(1);
 
 const slot = ref<HTMLElement | null>(null);
@@ -416,7 +416,7 @@ const visibleColumns = computed(() => {
     return newColumns.value;
   }
 
-  return newColumns.value.filter((column: BaseTableColumn) => {
+  return newColumns.value.filter((column: BaseTableColumnData) => {
     if (column.toggle === false) {
       return true;
     }
@@ -489,7 +489,7 @@ onMounted(() => {
  * Toggle current direction on column if it's sortable
  * and not just updating the prop.
  */
-function sort(column: BaseTableColumn, updatingData = false, event = null) {
+function sort(column: BaseTableColumnData, updatingData = false, event = null) {
   if (!column || !column.sortable) {
     return;
   }
@@ -719,7 +719,7 @@ function updateSortState() {
 |--------------------------------------------------------------------------
 */
 
-function addColumn(column: BaseTableColumn) {
+function addColumn(column: BaseTableColumnData) {
   defaultSlots.value.push(column);
 
   const slotHTMLElement = slot.value as HTMLElement;
@@ -743,7 +743,7 @@ function addColumn(column: BaseTableColumn) {
   }
 }
 
-function removeColumn(column: BaseTableColumn) {
+function removeColumn(column: BaseTableColumnData) {
   defaultSlots.value = defaultSlots.value.filter(
     (d) => d.newKey !== column.newKey
   );
@@ -773,7 +773,7 @@ function borderBottomDetailClasses(index: number): string {
 
 function onColumnClick(
   row: Row,
-  column: BaseTableColumn,
+  column: BaseTableColumnData,
   index: number,
   colindex: number,
   event: MouseEvent

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>
   `,
 });