sprintify-ui 0.6.87 → 0.7.0

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,

package/src/components/BaseTagAutocompleteFetch.stories.js

@@ -1,7 +1,7 @@
 import BaseTagAutocompleteFetch from './BaseTagAutocompleteFetch.vue';
 import ShowValue from '@/../.storybook/components/ShowValue.vue';
 import { createFieldStory } from '../../.storybook/utils';
-import BaseAppNotifications from './BaseAppNotifications.vue';
+import BaseAppSnackbars from './BaseAppSnackbars.vue';
 
 const sizes = ['xs', 'sm', 'md'];
 
@@ -24,7 +24,7 @@ export default {
 
 const Template = (args) => {
   return {
-    components: { BaseTagAutocompleteFetch, ShowValue, BaseAppNotifications },
+    components: { BaseTagAutocompleteFetch, ShowValue, BaseAppSnackbars },
     setup() {
       const value = ref([]);
       return { args, value };
@@ -35,7 +35,7 @@ const Template = (args) => {
         v-bind="args"
       ></BaseTagAutocompleteFetch>
       <ShowValue :value="value" />
-      <BaseAppNotifications />
+      <BaseAppSnackbars />
   `,
   };
 };

package/src/components/index.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';
@@ -109,7 +109,7 @@ export {
   BaseAlert,
   BaseApp,
   BaseAppDialogs,
-  BaseAppNotifications,
+  BaseAppSnackbars,
   BaseAutocomplete,
   BaseAutocompleteFetch,
   BaseAvatar,

package/src/index.ts

@@ -5,7 +5,7 @@ import QueryString from 'qs';
 import en from '@/lang/en.json';
 import fr from '@/lang/fr.json';
 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';
@@ -117,12 +117,14 @@ export default { install };
 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/src/stores/{notifications.ts → snackbars.ts}

@@ -1,21 +1,21 @@
 import { defineStore } from 'pinia';
-import { Notification, NotificationOptions } from '../types';
+import { Snackbar, SnackbarOptions } from '../types';
 
-export const useNotificationsStore = defineStore('notifications', {
+export const useSnackbarsStore = defineStore('notifications', {
   state: () => {
     return {
       count: 0,
-      notifications: [] as Notification[],
+      snackbars: [] as Snackbar[],
       timeouts: {} as Record<number, number>,
     };
   },
   actions: {
-    push(options: NotificationOptions) {
+    push(options: SnackbarOptions) {
       this.count++;
 
       const id = this.count;
 
-      const notification = {
+      const snackbar = {
         id: id,
         color: options.color ?? 'info',
         title: options.title,
@@ -23,21 +23,21 @@ export const useNotificationsStore = defineStore('notifications', {
         duration: options.duration ?? 3000,
       };
 
-      this.notifications.push(notification);
+      this.snackbars.push(snackbar);
 
       this.timeouts[id] = setTimeout(() => {
-        this.remove(notification);
-      }, notification.duration);
+        this.remove(snackbar);
+      }, snackbar.duration);
     },
-    remove(notification: Notification) {
-      this.notifications.splice(
-        this.notifications.findIndex((n) => n.id === notification.id),
+    remove(snackbar: Snackbar) {
+      this.snackbars.splice(
+        this.snackbars.findIndex((n) => n.id === snackbar.id),
         1
       );
-      clearTimeout(this.timeouts[notification.id]);
+      clearTimeout(this.timeouts[snackbar.id]);
     },
     clear() {
-      this.notifications = [];
+      this.snackbars = [];
       Object.values(this.timeouts).forEach((timeout) => {
         clearTimeout(timeout);
       });
@@ -45,3 +45,5 @@ export const useNotificationsStore = defineStore('notifications', {
     },
   },
 });
+
+export const useNotificationsStore = useSnackbarsStore;

package/src/stories/List.stories.js

@@ -7,7 +7,7 @@ import BaseBoolean from '../components/BaseBoolean.vue';
 import BaseSelect from '../components/BaseSelect.vue';
 import BaseBadge from '../components/BaseBadge.vue';
 import BaseCounter from '../components/BaseCounter.vue';
-import BaseAppNotifications from '../components/BaseAppNotifications.vue';
+import BaseAppSnackbars from '../components/BaseAppSnackbars.vue';
 import BaseAppDialogs from '../components/BaseAppDialogs.vue';
 import BaseContainer from '../components/BaseContainer.vue';
 import { DateTime } from 'luxon';
@@ -83,7 +83,7 @@ const templateComponents = {
     BaseBoolean,
     BaseSelect,
     BaseBadge,
-    BaseAppNotifications,
+    BaseAppSnackbars,
     BaseAppDialogs,
     BaseCounter,
     BaseContainer,
@@ -111,7 +111,7 @@ const template = `
 
     ${templateDataTable}
 
-    <BaseAppNotifications></BaseAppNotifications>
+    <BaseAppSnackbars></BaseAppSnackbars>
     <BaseAppDialogs></BaseAppDialogs>
 </BaseContainer>
 </div>

package/src/stories/PageShow.vue

@@ -361,13 +361,13 @@
       </div>
     </BaseContainer>
 
-    <BaseAppNotifications />
+    <BaseAppSnackbars />
     <BaseAppDialogs />
   </div>
 </template>
 
 <script lang="ts" setup>
-import { useNotificationsStore } from '..';
+import { useSnackbarsStore } from '..';
 
 import BaseCard from '@/components/BaseCard.vue';
 import BaseCardRow from '@/components/BaseCardRow.vue';
@@ -380,7 +380,7 @@ import BaseTimeline from '@/components/BaseTimeline.vue';
 import { BaseIcon } from '../components/index';
 import BaseContainer from '@/components/BaseContainer.vue';
 import BaseClipboard from '@/components/BaseClipboard.vue';
-import BaseAppNotifications from '@/components/BaseAppNotifications.vue';
+import BaseAppSnackbars from '@/components/BaseAppSnackbars.vue';
 import BaseAppDialogs from '@/components/BaseAppDialogs.vue';
 
 const timelineItems = [
@@ -415,7 +415,7 @@ const timelineItems = [
 ];
 
 function showAlert(text: string) {
-  useNotificationsStore().push({
+  useSnackbarsStore().push({
     title: text,
     text: text,
     color: 'success'

package/src/types/index.ts

@@ -97,7 +97,7 @@ export interface ActionItem {
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type Row = Record<string, any>;
 
-export interface BaseTableColumn {
+export interface BaseTableColumnData {
   id: string;
   label: string;
   field: string;
@@ -116,9 +116,9 @@ export interface BaseTableColumn {
     width: undefined | number;
   };
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  thAttrs: (column: BaseTableColumn) => Record<string, any>;
+  thAttrs: (column: BaseTableColumnData) => Record<string, any>;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  tdAttrs: (row: Row, column: BaseTableColumn) => Record<string, any>;
+  tdAttrs: (row: Row, column: BaseTableColumnData) => Record<string, any>;
 }
 
 /**
@@ -170,17 +170,17 @@ export interface Dialog {
 }
 
 /**
- * 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;
@@ -189,7 +189,7 @@ export interface Notification {
 }
 
 /**
- * App Notification
+ * Notification
  */
 
 export interface NotificationsConfig {

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

@@ -1,10 +0,0 @@
-import { Notification, NotificationOptions } from '../types';
-export declare const useNotificationsStore: import("pinia").StoreDefinition<"notifications", {
-    count: number;
-    notifications: Notification[];
-    timeouts: Record<number, number>;
-}, {}, {
-    push(options: NotificationOptions): void;
-    remove(notification: Notification): void;
-    clear(): void;
-}>;