sprintify-ui 0.0.7 → 0.0.9

package/dist/tailwindcss/index.js

@@ -0,0 +1,46 @@
+const plugin = require('tailwindcss/plugin');
+
+module.exports = plugin(
+  function () {
+    //
+  },
+  {
+    theme: {
+      zIndex: {
+        status: '20',
+        menu: '30',
+        modal: '40',
+        notifications: '50',
+        loading: '100',
+      },
+      animation: {
+        shake: 'shake 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955) both',
+        shimmer: 'shimmer 2s infinite both',
+      },
+      keyframes: {
+        shimmer: {
+          '100%': {
+            transform: 'translateX(100%)',
+          },
+        },
+        shake: {
+          '0%, 100%': {
+            transform: 'translateX(0)',
+          },
+          '10%, 30%, 50%, 70%': {
+            transform: 'translateX(-10px)',
+          },
+          '20%, 40%, 60%': {
+            transform: 'translateX(10px)',
+          },
+          '80%': {
+            transform: 'translateX(8px)',
+          },
+          '90%': {
+            transform: 'translateX(-8px)',
+          },
+        },
+      },
+    },
+  }
+);

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

@@ -45,13 +45,6 @@ declare const messages: {
             the_file_size_must_not_exceed_x: string;
             the_file_type_is_invalid: string;
             type_to_start_your_search: string;
-            up_to_x: string;
-            whoops: string;
-            x_rows_selected: string;
-            year: string;
-            yes_delete: string;
-            you_can_upload_up_to_n_files: string;
-            you_cannot_select_more_than_x_items: string;
             units: {
                 b: string;
                 gb: string;
@@ -59,6 +52,14 @@ declare const messages: {
                 mb: string;
                 tb: string;
             };
+            up_to_x: string;
+            upload_failed: string;
+            whoops: string;
+            x_rows_selected: string;
+            year: string;
+            yes_delete: string;
+            you_can_upload_up_to_n_files: string;
+            you_cannot_select_more_than_x_items: string;
         };
     };
     fr: {
@@ -101,13 +102,6 @@ declare const messages: {
             the_file_size_must_not_exceed_x: string;
             the_file_type_is_invalid: string;
             type_to_start_your_search: string;
-            up_to_x: string;
-            whoops: string;
-            x_rows_selected: string;
-            year: string;
-            yes_delete: string;
-            you_can_upload_up_to_n_files: string;
-            you_cannot_select_more_than_x_items: string;
             units: {
                 b: string;
                 gb: string;
@@ -115,6 +109,14 @@ declare const messages: {
                 mb: string;
                 tb: string;
             };
+            up_to_x: string;
+            upload_failed: string;
+            whoops: string;
+            x_rows_selected: string;
+            year: string;
+            yes_delete: string;
+            you_can_upload_up_to_n_files: string;
+            you_cannot_select_more_than_x_items: string;
         };
     };
 };
@@ -168,13 +170,6 @@ declare const config: {
                 the_file_size_must_not_exceed_x: string;
                 the_file_type_is_invalid: string;
                 type_to_start_your_search: string;
-                up_to_x: string;
-                whoops: string;
-                x_rows_selected: string;
-                year: string;
-                yes_delete: string;
-                you_can_upload_up_to_n_files: string;
-                you_cannot_select_more_than_x_items: string;
                 units: {
                     b: string;
                     gb: string;
@@ -182,6 +177,14 @@ declare const config: {
                     mb: string;
                     tb: string;
                 };
+                up_to_x: string;
+                upload_failed: string;
+                whoops: string;
+                x_rows_selected: string;
+                year: string;
+                yes_delete: string;
+                you_can_upload_up_to_n_files: string;
+                you_cannot_select_more_than_x_items: string;
             };
         };
         fr: {
@@ -224,13 +227,6 @@ declare const config: {
                 the_file_size_must_not_exceed_x: string;
                 the_file_type_is_invalid: string;
                 type_to_start_your_search: string;
-                up_to_x: string;
-                whoops: string;
-                x_rows_selected: string;
-                year: string;
-                yes_delete: string;
-                you_can_upload_up_to_n_files: string;
-                you_cannot_select_more_than_x_items: string;
                 units: {
                     b: string;
                     gb: string;
@@ -238,6 +234,14 @@ declare const config: {
                     mb: string;
                     tb: string;
                 };
+                up_to_x: string;
+                upload_failed: string;
+                whoops: string;
+                x_rows_selected: string;
+                year: string;
+                yes_delete: string;
+                you_can_upload_up_to_n_files: string;
+                you_cannot_select_more_than_x_items: string;
             };
         };
     }, {}, {}, string, true>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
     "docs:dev": "vitepress dev docs",
@@ -43,7 +43,6 @@
     "@tailwindcss/line-clamp": "^0.4.2",
     "@tailwindcss/typography": "^0.5.8",
     "@types/luxon": "^3.1.0",
-    "@types/node": "^17.0.45",
     "@types/object-hash": "^2.2.1",
     "@types/pikaday": "^1.7.6",
     "@types/qs": "^6.9.7",
@@ -95,6 +94,7 @@
     ".": {
       "import": "./dist/sprintify-ui.es.js"
     },
-    "./dist/style.css": "./dist/style.css"
+    "./dist/style.css": "./dist/style.css",
+    "./tailwindcss": "./dist/tailwindcss/index.js"
   }
 }

package/src/components/BaseApp.vue

@@ -2,8 +2,8 @@
   <div class="min-h-full">
     <slot />
 
-    <!-- Notifications 
-    <BaseAppNotifications />-->
+    <!-- Notifications -->
+    <BaseAppNotifications />
 
     <!-- Dialogs -->
     <BaseAppDialogs />
@@ -12,4 +12,5 @@
 
 <script lang="ts" setup>
 import BaseAppDialogs from './BaseAppDialogs.vue';
+import BaseAppNotifications from './BaseAppNotifications.vue';
 </script>

package/src/components/BaseAutocomplete.stories.js

@@ -7,7 +7,6 @@ export default {
   args: {
     labelKey: 'label',
     valueKey: 'value',
-    inputClass: 'w-full border-slate-300',
     options: [
       { label: 'Dark Vader', value: 'dark_vader' },
       { label: 'Darth Maul', value: 'darth_maul' },

package/src/components/BaseAutocompleteFetch.stories.js

@@ -8,7 +8,6 @@ export default {
     url: 'https://effettandem.com/api/content/articles',
     labelKey: 'title',
     valueKey: 'id',
-    inputClass: 'w-full border-slate-300',
     disabled: false,
   },
   decorators: [() => ({ template: '<div class="mb-36"><story/></div>' })],

package/src/components/BaseBelongsTo.stories.js

@@ -7,7 +7,6 @@ export default {
   args: {
     url: 'https://effettandem.com/api/content/articles',
     field: 'title',
-    inputClass: 'w-full border-slate-300',
   },
   decorators: [() => ({ template: '<div class="mb-36"><story/></div>' })],
 };

package/src/components/BaseDataTable.vue

@@ -167,7 +167,7 @@ import {
   MenuItemInterface,
 } from '@/types/types';
 import { useDialogsStore } from '@/stores/dialogs';
-//import { useNotificationsStore } from '../stores/notifications';
+import { useNotificationsStore } from '../stores/notifications';
 import BaseDataIterator from './BaseDataIterator.vue';
 import { isArray } from 'lodash';
 
@@ -183,7 +183,7 @@ const i18n = useI18n();
 const http = config.http;
 
 const dialogs = useDialogsStore();
-//const notifications = useNotificationsStore();
+const notifications = useNotificationsStore();
 
 const table = ref(null) as Ref<null | InstanceType<typeof BaseTable>>;
 
@@ -401,11 +401,11 @@ const onDelete = (row: CollectionItem) => {
 
   http.delete(props.deleteUrl(row)).then((response) => {
     if (response.data && response.data.message) {
-      /* notifications.push({
+      notifications.push({
         title: i18n.t('sui.success'),
         text: response.data.message,
         color: 'success',
-      }); */
+      });
     }
     emit('delete', row);
 

package/src/components/BaseDatePicker.stories.js

@@ -21,33 +21,28 @@ const Template = (args) => ({
 export const Demo = Template.bind({});
 Demo.args = {
   modelValue: '2023-01-01',
-  inputClass: 'border-slate-300',
 };
 
 export const YearRange = Template.bind({});
 YearRange.args = {
   modelValue: '1980-11-16',
-  inputClass: 'border-slate-300',
   yearRange: [1920, 2020],
 };
 
 export const MinDate = Template.bind({});
 MinDate.args = {
   modelValue: '2022-11-16',
-  inputClass: 'border-slate-300',
   minDate: DateTime.fromISO('2022-11-10').toJSDate(),
 };
 
 export const MaxDate = Template.bind({});
 MaxDate.args = {
   modelValue: '2022-11-16',
-  inputClass: 'border-slate-300',
   maxDate: DateTime.fromISO('2022-11-20').toJSDate(),
 };
 
 export const Disabled = Template.bind({});
 Disabled.args = {
   modelValue: '2022-11-16',
-  inputClass: 'border-slate-300',
   disabled: true,
 };

package/src/components/BaseDateSelect.stories.js

@@ -0,0 +1,41 @@
+import BaseDateSelect from './BaseDateSelect.vue';
+
+export default {
+  title: 'Form/BaseDateSelect',
+  component: BaseDateSelect,
+  argTypes: {},
+};
+
+const Template = (args) => ({
+  components: { BaseDateSelect },
+  setup() {
+    return { args };
+  },
+  template: `
+    <BaseDateSelect v-bind="args">
+    </BaseDateSelect>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {
+  modelValue: '2021-01-01',
+};
+
+export const MinYear = Template.bind({});
+MinYear.args = {
+  modelValue: '2022-11-16',
+  minYear: 1980,
+};
+
+export const MaxYear = Template.bind({});
+MaxYear.args = {
+  modelValue: '2002-11-16',
+  maxYear: 2010,
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  modelValue: '2022-11-16',
+  disabled: true,
+};

package/src/components/BaseDateSelect.vue

@@ -80,7 +80,7 @@
     <button
       type="button"
       :disabled="disabled"
-      class="mt-1 appearance-none border-transparent bg-transparent text-sm text-slate-700 underline outline-none"
+      class="mt-1 appearance-none border-transparent bg-transparent text-sm text-slate-700 underline outline-none disabled:cursor-not-allowed disabled:opacity-50"
       @click="clear()"
     >
       <span>{{ $t('sui.clear') }}</span>

package/src/components/BaseDescriptionList.stories.js

@@ -0,0 +1,35 @@
+import BaseBadge from './BaseBadge.vue';
+import BaseDescriptionList from './BaseDescriptionList.vue';
+import BaseDescriptionListItem from './BaseDescriptionListItem.vue';
+
+export default {
+  title: 'Components/BaseDescriptionList',
+  component: BaseDescriptionList,
+  argTypes: {},
+};
+
+const Template = (args) => ({
+  components: { BaseDescriptionList, BaseDescriptionListItem, BaseBadge },
+  setup() {
+    return { args };
+  },
+  template: `
+    <BaseDescriptionList v-bind="args">
+      <BaseDescriptionListItem>
+        <template #left>Full name</template>
+        <template #right>Full name</template>
+      </BaseDescriptionListItem>
+      <BaseDescriptionListItem>
+        <template #left>Age</template>
+        <template #right>66 years old</template>
+      </BaseDescriptionListItem>
+      <BaseDescriptionListItem>
+        <template #left>Role</template>
+        <template #right><BaseBadge color="indigo">admin</BaseBadge></template>
+      </BaseDescriptionListItem>
+    </BaseDescriptionList>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {};

package/src/components/BaseDescriptionList.vue

@@ -8,4 +8,6 @@
   </BaseCard>
 </template>
 
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import BaseCard from './BaseCard.vue';
+</script>

package/src/components/BaseFileUploader.vue

@@ -36,11 +36,11 @@ import { config } from '@/index';
 import { PropType } from 'vue';
 import { UploadedFile } from '@/types/UploadedFile';
 import { toHumanList, fileSizeFormat } from '../utils';
-//import { useNotificationsStore } from '../stores/notifications';
+import { useNotificationsStore } from '../stores/notifications';
 
 const http = config.http;
 const i18n = useI18n();
-//const notifications = useNotificationsStore();
+const notifications = useNotificationsStore();
 
 const props = defineProps({
   url: {
@@ -95,13 +95,13 @@ async function onPictureUpload(file: File) {
 
   try {
     if (file.size > props.maxSize) {
-      /* notifications.push({
+      notifications.push({
         color: 'danger',
         title: i18n.t('sui.error'),
         text: i18n.t('sui.the_file_size_must_not_exceed_x', {
           x: fileSizeFormat(props.maxSize),
         }),
-      }); */
+      });
       return;
     }
 
@@ -113,7 +113,7 @@ async function onPictureUpload(file: File) {
       props.acceptedExtensions.length
     ) {
       if (!props.acceptedExtensions.includes(extension)) {
-        /* notifications.push({
+        notifications.push({
           color: 'danger',
           title: i18n.t('sui.error'),
           text:
@@ -123,7 +123,7 @@ async function onPictureUpload(file: File) {
             ' ' +
             toHumanList(props.acceptedExtensions, i18n.t('sui.or')) +
             '.',
-        }); */
+        });
         return;
       }
     }
@@ -158,6 +158,11 @@ async function onPictureUpload(file: File) {
     }
   } catch (e: unknown) {
     emit('upload:fail');
+    notifications.push({
+      color: 'danger',
+      title: i18n.t('sui.error'),
+      text: i18n.t('sui.upload_failed'),
+    });
   } finally {
     emit('upload:end');
     uploading.value = false;

package/src/components/BaseMediaLibrary.vue

@@ -91,15 +91,15 @@ import { Media } from '@/types/Media';
 import _, { cloneDeep, get } from 'lodash';
 import { PropType } from 'vue';
 import { MediaLibraryPayload } from '@/types/types';
-//import { useDialogsStore } from '../stores/dialogs';
-//import { useNotificationsStore } from '../stores/notifications';
+import { useDialogsStore } from '../stores/dialogs';
+import { useNotificationsStore } from '../stores/notifications';
 import { capitalize } from 'lodash';
 import { fileSizeFormat } from 'src/utils';
 
 const i18n = useI18n();
 
-//const dialogs = useDialogsStore();
-//const notifications = useNotificationsStore();
+const dialogs = useDialogsStore();
+const notifications = useNotificationsStore();
 
 const emit = defineEmits([
   'update',
@@ -188,11 +188,11 @@ function onUploadSuccess(file: UploadedFile) {
   }
 
   if (numberOfFiles.value >= props.max && props.max > 1) {
-    /* notifications.push({
+    notifications.push({
       title: i18n.t('sui.whoops'),
       text: i18n.t('sui.you_can_upload_up_to_n_files', { count: props.max }),
       color: 'danger',
-    }); */
+    });
     return;
   }
 
@@ -213,25 +213,25 @@ function onUploadSuccess(file: UploadedFile) {
 }
 
 function promptRemoveUploadedFile(index: number, length = 1) {
-  /* dialogs.push({
+  dialogs.push({
     title: i18n.t('sui.remove_file'),
     message: i18n.t('sui.remove_file_description'),
     color: 'warning',
     onConfirm() {
       removeUploadedFile(index, length);
     },
-  }); */
+  });
 }
 
 function promptRemoveMedia(index: number) {
-  /* dialogs.push({
+  dialogs.push({
     title: i18n.t('sui.remove_file'),
     message: i18n.t('sui.remove_file_description'),
     color: 'warning',
     onConfirm() {
       removeMedia(index);
     },
-  }); */
+  });
 }
 
 function removeUploadedFile(index: number, length = 1) {

package/src/components/BaseSkeleton.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="relative isolate overflow-hidden rounded" :class="[background]">
     <div
-      class="absolute inset-0 -translate-x-full animate-[shimmer_2s_infinite] border-t border-white/80 bg-gradient-to-r from-transparent via-white/80 to-transparent"
+      class="animate-shimmer absolute inset-0 -translate-x-full border-t border-white/80 bg-gradient-to-r from-transparent via-white/80 to-transparent"
       :style="{
         animationDelay: delay,
       }"

package/src/components/BaseTagAutocomplete.vue

@@ -83,7 +83,7 @@ import { PropType, Ref, ComputedRef } from 'vue';
 import { NormalizedOption, Option, OptionValue } from '@/types/types';
 import { useInfiniteScroll } from '@vueuse/core';
 import BaseLoadingCover from './BaseLoadingCover.vue';
-//import { useNotificationsStore } from '../../stores/notifications';
+import { useNotificationsStore } from '@/stores/notifications';
 
 const props = defineProps({
   modelValue: {
@@ -140,7 +140,7 @@ const emit = defineEmits([
 ]);
 
 const i18n = useI18n();
-//const notifications = useNotificationsStore();
+const notifications = useNotificationsStore();
 
 const timerId = ref(0);
 const keywords = ref('');
@@ -308,11 +308,11 @@ const toggleOption = (option: NormalizedOption) => {
 
 const addOption = (option: NormalizedOption) => {
   if (props.max && normalizedModelValue.value.length >= props.max) {
-    /* notifications.push({
+    notifications.push({
       title: i18n.t('sui.whoops'),
       text: i18n.t('sui.you_cannot_select_more_than_x_items', { x: props.max }),
       color: 'warning',
-    }); */
+    });
     return;
   }
 

package/src/index.ts

@@ -24,6 +24,8 @@ export interface Options {
 
 const config = {
   i18n: createI18n({
+    locale: 'en',
+    fallbackLocale: 'en',
     messages: { en, fr },
   }),
   http: axios.create(),

package/src/lang/en.json

@@ -38,19 +38,20 @@
     "the_file_size_must_not_exceed_x": "The file size must not exceed {x}",
     "the_file_type_is_invalid": "The file type is invalid",
     "type_to_start_your_search": "Type to start your search",
-    "up_to_x": "Up to {x}",
-    "whoops": "Whoops",
-    "x_rows_selected": "1 item selected | {count} items selected",
-    "year": "Year",
-    "yes_delete": "Yes, delete",
-    "you_can_upload_up_to_n_files": "You can upload one file at most|You can upload up to {count} files",
-    "you_cannot_select_more_than_x_items": "You can't select more than one item|You can't select more than {x} items",
     "units": {
       "b": "B",
       "gb": "GB",
       "kb": "kB",
       "mb": "MB",
       "tb": "TB"
-    }
+    },
+    "up_to_x": "Up to {x}",
+    "upload_failed": "Upload failed",
+    "whoops": "Whoops",
+    "x_rows_selected": "1 item selected | {count} items selected",
+    "year": "Year",
+    "yes_delete": "Yes, delete",
+    "you_can_upload_up_to_n_files": "You can upload one file at most|You can upload up to {count} files",
+    "you_cannot_select_more_than_x_items": "You can't select more than one item|You can't select more than {x} items"
   }
 }

package/src/lang/fr.json

@@ -38,19 +38,20 @@
     "the_file_size_must_not_exceed_x": "La taille du fichier ne doit pas dépasser {x}",
     "the_file_type_is_invalid": "Le type de fichier n'est pas valide",
     "type_to_start_your_search": "Tapez pour lancer votre recherche",
-    "up_to_x": "Jusqu'à {x}",
-    "whoops": "Oups",
-    "x_rows_selected": "1 item sélectionné | \n{count} items sélectionnés",
-    "year": "An",
-    "yes_delete": "Oui, supprimer",
-    "you_can_upload_up_to_n_files": "Vous pouvez télécharger un fichier au maximum|Vous pouvez télécharger jusqu'à {count} fichiers",
-    "you_cannot_select_more_than_x_items": "Vous ne pouvez pas sélectionner plus de un élément|Vous ne pouvez pas sélectionner plus de {x} éléments",
     "units": {
       "b": "o",
       "gb": "Go",
       "kb": "Ko",
       "mb": "Mo",
       "tb": "To"
-    }
+    },
+    "up_to_x": "Jusqu'à {x}",
+    "upload_failed": "Le téléchargement a échoué",
+    "whoops": "Oups",
+    "x_rows_selected": "1 item sélectionné | \n{count} items sélectionnés",
+    "year": "An",
+    "yes_delete": "Oui, supprimer",
+    "you_can_upload_up_to_n_files": "Vous pouvez télécharger un fichier au maximum|Vous pouvez télécharger jusqu'à {count} fichiers",
+    "you_cannot_select_more_than_x_items": "Vous ne pouvez pas sélectionner plus de un élément|Vous ne pouvez pas sélectionner plus de {x} éléments"
   }
 }