sprintify-ui 0.8.35 → 0.8.38

package/src/components/BaseDialog.stories.js

@@ -1,34 +1,33 @@
-import BaseDialog from './BaseDialog.vue';
+import BaseDialog from "./BaseDialog.vue";
 
-const colors = ['info', 'success', 'warning', 'danger'];
+const colors = ["info", "success", "warning", "danger"];
 
 export default {
-  title: 'Components/BaseDialog',
+  title: "Components/BaseDialog",
   component: BaseDialog,
   argTypes: {
     color: {
-      control: { type: 'select' },
-      options: ['success', 'info', 'warning', 'danger'],
+      control: { type: "select" },
+      options: ["success", "info", "warning", "danger"],
     },
   },
   args: {
-    color: 'info',
+    color: "info",
     message:
-      'Nisi Lorem sunt amet aliqua dolor ullamco deserunt enim irure non ad. Excepteur culpa consectetur dolore culpa sunt aliquip proident quis.',
+      "Nisi Lorem sunt amet aliqua dolor ullamco deserunt enim irure non ad. Excepteur culpa consectetur dolore culpa sunt aliquip proident quis.",
   },
 };
 
 const Template = (args) => ({
   components: { BaseDialog },
   setup() {
-
     const confirm = () => {
-      alert('Confirmed');
-    }
+      alert("Confirmed");
+    };
 
     const cancel = () => {
-      alert('Canceled');
-    }
+      alert("Canceled");
+    };
 
     return { args, confirm, cancel };
   },
@@ -40,13 +39,14 @@ const Template = (args) => ({
 
 export const Demo = Template.bind({});
 Demo.args = {
-  title: 'Be careful',
+  title: "Be careful",
 };
 
 export const Html = Template.bind({});
 Html.args = {
-  title: 'Be careful',
-  message: '<strong>HTML</strong> is allowed. <a href="#">Link</a><p>Eiusmod id Lorem est ullamco et ex exercitation cupidatat do velit nisi Lorem officia et.</p>',
+  title: "Be careful",
+  message:
+    '<strong>HTML</strong> is allowed. <a href="#">Link</a><p>Eiusmod id Lorem est ullamco et ex exercitation cupidatat do velit nisi Lorem officia et.</p>',
   html: true,
 };
 
@@ -66,30 +66,30 @@ const ColorsTemplate = (args) => ({
 
 export const Colors = ColorsTemplate.bind({});
 Colors.args = {
-  title: 'Be careful',
+  title: "Be careful",
 };
 
 export const WithInput = Template.bind({});
 WithInput.args = {
   input: {
-    label: 'Enter your password',
-    type: 'password',
-    size: 'sm',
+    label: "Enter your password",
+    type: "password",
+    size: "sm",
     required: true,
-    placeholder: 'Password',
+    placeholder: "Password",
   },
 };
 
 export const ErrorMessage = Template.bind({});
 ErrorMessage.args = {
-  color: 'danger',
-  title: 'Please confirm your password',
-  errorMessage: 'Invalid password',
+  color: "danger",
+  title: "Please confirm your password",
+  errorMessage: "Invalid password",
   input: {
-    label: 'Enter your password',
-    type: 'password',
-    size: 'sm',
+    label: "Enter your password",
+    type: "password",
+    size: "sm",
     required: true,
-    placeholder: 'Password',
+    placeholder: "Password",
   },
 };

package/src/components/BaseDisplayRelativeTime.stories.js

@@ -1,12 +1,12 @@
-import BaseDisplayRelativeTime from './BaseDisplayRelativeTime.vue';
-import { DateTime } from 'luxon';
+import BaseDisplayRelativeTime from "./BaseDisplayRelativeTime.vue";
+import { DateTime } from "luxon";
 
 export default {
-  title: 'Data/BaseDisplayRelativeTime',
+  title: "Data/BaseDisplayRelativeTime",
   component: BaseDisplayRelativeTime,
   argTypes: {
     showTooltip: {
-      control: { type: 'boolean' },
+      control: { type: "boolean" },
     },
   },
   args: {

package/src/components/BaseDropdown.stories.js

@@ -1,9 +1,9 @@
-import BaseBadge from './BaseBadge.vue';
-import BaseAutocomplete from './BaseAutocomplete.vue';
-import BaseModalCenter from './BaseModalCenter.vue';
-import BaseDropdown from './BaseDropdown.vue';
-import BaseDatePicker from './BaseDatePicker.vue';
-import { options } from '../../.storybook/utils';
+import BaseBadge from "./BaseBadge.vue";
+import BaseAutocomplete from "./BaseAutocomplete.vue";
+import BaseModalCenter from "./BaseModalCenter.vue";
+import BaseDropdown from "./BaseDropdown.vue";
+import BaseDatePicker from "./BaseDatePicker.vue";
+import { options } from "../../.storybook/utils";
 
 const items = [];
 
@@ -14,16 +14,16 @@ for (let i = 0; i < 100; i++) {
 }
 
 export default {
-  title: 'Components/BaseDropdown',
+  title: "Components/BaseDropdown",
   component: BaseDropdown,
   argTypes: {
     placement: {
-      control: { type: 'select' },
-      options: ['top-start', 'top-end', 'bottom-start', 'bottom-end'],
+      control: { type: "select" },
+      options: ["top-start", "top-end", "bottom-start", "bottom-end"],
     },
   },
   args: {
-    placement: 'bottom-start',
+    placement: "bottom-start",
   },
 };
 
@@ -106,13 +106,13 @@ export const WithAutocomplete = (args) => ({
 
 WithAutocomplete.args = {
   animated: true,
-  placement: 'bottom-start',
+  placement: "bottom-start",
 };
 
 export const WithDatePicker = (args) => ({
   components: { BaseDropdown, BaseDatePicker },
   setup() {
-    const date = ref('2022-01-01');
+    const date = ref("2022-01-01");
     return { args, items, date };
   },
   template: `
@@ -131,7 +131,7 @@ export const WithDatePicker = (args) => ({
 
 WithDatePicker.args = {
   animated: true,
-  placement: 'bottom-start',
+  placement: "bottom-start",
 };
 
 export const ModalWithScroll = (args) => ({

package/src/components/BaseDropdownAutocomplete.stories.js

@@ -1,21 +1,21 @@
-import BaseBadge from './BaseBadge.vue';
-import BaseDropdownAutocomplete from './BaseDropdownAutocomplete.vue';
-import ShowValue from '@/../.storybook/components/ShowValue.vue';
-import { options } from '../../.storybook/utils';
+import BaseBadge from "./BaseBadge.vue";
+import BaseDropdownAutocomplete from "./BaseDropdownAutocomplete.vue";
+import ShowValue from "@/../.storybook/components/ShowValue.vue";
+import { options } from "../../.storybook/utils";
 
 export default {
-  title: 'Components/BaseDropdownAutocomplete',
+  title: "Components/BaseDropdownAutocomplete",
   component: BaseDropdownAutocomplete,
   argTypes: {
     placement: {
-      control: { type: 'select' },
-      options: ['top-start', 'top-end', 'bottom-start', 'bottom-end'],
+      control: { type: "select" },
+      options: ["top-start", "top-end", "bottom-start", "bottom-end"],
     },
   },
   args: {
-    placement: 'bottom-start',
+    placement: "bottom-start",
     padding: 8,
-    emptyOptionLabel: 'Nothing',
+    emptyOptionLabel: "Nothing",
   },
 };
 
@@ -46,7 +46,7 @@ const template = `<template #button="{ newValue }">
           {{ option.label }}
         </span>
       </div>
-    </template>`
+    </template>`;
 
 export const Autocomplete = (args) => ({
   components: { BaseDropdownAutocomplete, BaseBadge, ShowValue },
@@ -68,16 +68,16 @@ export const Autocomplete = (args) => ({
 Autocomplete.args = {
   options: options,
   multiple: false,
-  labelKey: 'label',
-  valueKey: 'value',
+  labelKey: "label",
+  valueKey: "value",
   select: {
     options: [
-      { label: 'Option 1', value: 'option-1' },
-      { label: 'Option 2', value: 'option-2' },
-      { label: 'Option 3', value: 'option-3' },
+      { label: "Option 1", value: "option-1" },
+      { label: "Option 2", value: "option-2" },
+      { label: "Option 3", value: "option-3" },
     ],
-    labelKey: 'label',
-    valueKey: 'value',
+    labelKey: "label",
+    valueKey: "value",
   },
 };
 
@@ -113,9 +113,9 @@ export const AutocompleteFetch = (args) => ({
 });
 
 AutocompleteFetch.args = {
-  valueKey: 'id',
-  labelKey: 'name',
-  url: 'https://effettandem.com/api/content/tags',
+  valueKey: "id",
+  labelKey: "name",
+  url: "https://effettandem.com/api/content/tags",
   multiple: false,
 };
 
@@ -155,8 +155,8 @@ export const TagAutocomplete = (args) => ({
 TagAutocomplete.args = {
   options: options,
   multiple: true,
-  labelKey: 'label',
-  valueKey: 'value',
+  labelKey: "label",
+  valueKey: "value",
 };
 
 export const TagAutocompleteFetch = (args) => ({
@@ -193,8 +193,8 @@ export const TagAutocompleteFetch = (args) => ({
 });
 
 TagAutocompleteFetch.args = {
-  valueKey: 'id',
-  labelKey: 'name',
-  url: 'https://effettandem.com/api/content/tags',
+  valueKey: "id",
+  labelKey: "name",
+  url: "https://effettandem.com/api/content/tags",
   multiple: true,
 };

package/src/components/BaseFieldI18n.stories.js

@@ -1,15 +1,15 @@
-import BaseFieldI18n from './BaseFieldI18n.vue';
-import BaseForm from './BaseForm.vue';
-import ShowValue from '@/../.storybook/components/ShowValue.vue';
+import BaseFieldI18n from "./BaseFieldI18n.vue";
+import BaseForm from "./BaseForm.vue";
+import ShowValue from "@/../.storybook/components/ShowValue.vue";
 
 export default {
-  title: 'Form/BaseFieldI18n',
+  title: "Form/BaseFieldI18n",
   component: BaseFieldI18n,
   args: {
-    component: 'BaseInput',
+    component: "BaseInput",
     required: true,
-    name: 'name',
-    label: 'Name',
+    name: "name",
+    label: "Name",
   },
 };
 
@@ -19,8 +19,8 @@ const Template = (args) => ({
     const form = ref({
       _status: 422,
       name: {
-        en: 'Name',
-        fr: 'Nom',
+        en: "Name",
+        fr: "Nom",
       },
     });
     return { args, form };

package/src/components/BaseFilePicker.stories.js

@@ -1,11 +1,11 @@
-import BaseFilePicker from './BaseFilePicker.vue';
-import { Icon as BaseIcon } from '@iconify/vue';
-import ShowValue from '../../.storybook/components/ShowValue.vue';
-import BaseAppSnackbars from '@/components/BaseAppSnackbars.vue';
-import { t } from '@/i18n';
+import BaseFilePicker from "./BaseFilePicker.vue";
+import { Icon as BaseIcon } from "@iconify/vue";
+import ShowValue from "../../.storybook/components/ShowValue.vue";
+import BaseAppSnackbars from "@/components/BaseAppSnackbars.vue";
+import { t } from "@/i18n";
 
 export default {
-  title: 'Media/BaseFilePicker',
+  title: "Media/BaseFilePicker",
   component: BaseFilePicker,
   args: {},
 };
@@ -70,12 +70,12 @@ MaxSize.args = {
 
 export const FileExtension = Template.bind({});
 FileExtension.args = {
-  acceptedExtensions: ['xlsx', 'xls'],
+  acceptedExtensions: ["xlsx", "xls"],
 };
 
 export const Multiple = Template.bind({});
 Multiple.args = {
-  multiple: true
+  multiple: true,
 };
 
 export const Disabled = Template.bind({});

package/src/components/BaseFilePickerCrop.stories.js

@@ -1,19 +1,19 @@
-import BaseFilePickerCrop from '@/components/BaseFilePickerCrop.vue';
-import BaseLoadingCover from '@/components/BaseLoadingCover.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';
-import { Icon as BaseIcon } from '@iconify/vue';
-import ShowValue from '../../.storybook/components/ShowValue.vue';
-import { t } from '@/i18n';
+import BaseFilePickerCrop from "@/components/BaseFilePickerCrop.vue";
+import BaseLoadingCover from "@/components/BaseLoadingCover.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";
+import { Icon as BaseIcon } from "@iconify/vue";
+import ShowValue from "../../.storybook/components/ShowValue.vue";
+import { t } from "@/i18n";
 
 export default {
-  title: 'Media/BaseFilePickerCrop',
+  title: "Media/BaseFilePickerCrop",
   component: BaseFilePickerCrop,
   args: {
-    twButton: 'w-full',
-    acceptedExtensions: ['jpg', 'jpeg', 'png'],
+    twButton: "w-full",
+    acceptedExtensions: ["jpg", "jpeg", "png"],
   },
 };
 
@@ -87,7 +87,7 @@ Demo.args = {};
 export const Avatar = Template.bind({});
 Avatar.args = {
   cropper: {
-    preset: 'avatar',
+    preset: "avatar",
     presetOptions: {
       size: 300,
     },
@@ -100,7 +100,7 @@ Avatar.args = {
 export const Cover = Template.bind({});
 Cover.args = {
   cropper: {
-    preset: 'cover',
+    preset: "cover",
     presetOptions: {
       size: 600,
     },
@@ -117,7 +117,7 @@ Resize.args = {
     config: {
       initialResize: 100,
     },
-    preset: 'cover',
+    preset: "cover",
     presetOptions: {
       size: 600,
     },

package/src/components/BaseFileUploader.stories.js

@@ -1,18 +1,18 @@
-import BaseFileUploader from '@/components/BaseFileUploader.vue';
-import BaseLoadingCover from '@/components/BaseLoadingCover.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';
+import BaseFileUploader from "@/components/BaseFileUploader.vue";
+import BaseLoadingCover from "@/components/BaseLoadingCover.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";
 
 export default {
-  title: 'Media/BaseFileUploader',
+  title: "Media/BaseFileUploader",
   component: BaseFileUploader,
   args: {
-    twButton: 'w-full',
-    acceptedExtensions: ['jpg', 'png'],
+    twButton: "w-full",
+    acceptedExtensions: ["jpg", "png"],
     maxSize: 1024 * 1024 * 20, // 20MB
-    url: 'https://faker.witify.io/api/todos/upload',
+    url: "https://faker.witify.io/api/todos/upload",
   },
 };
 
@@ -25,7 +25,6 @@ const Template = (args) => ({
     ShowValue,
   },
   setup() {
-
     const files = ref([]);
 
     function onSuccess(payload) {
@@ -80,9 +79,9 @@ Demo.args = {};
 
 export const ImagePicker = Template.bind({});
 ImagePicker.args = {
-  component: 'BaseFilePickerCrop',
+  component: "BaseFilePickerCrop",
   cropper: {
-    preset: 'avatar',
+    preset: "avatar",
   },
 };
 

package/src/components/BaseForm.stories.js

@@ -1,12 +1,12 @@
-import BaseForm from './BaseForm.vue';
-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';
+import BaseForm from "./BaseForm.vue";
+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',
+  title: "Form/BaseForm",
   component: BaseForm,
 };
 

package/src/components/BaseGantt.stories.js

@@ -1,22 +1,31 @@
-import { DateTime } from 'luxon';
-import BaseGantt from './BaseGantt.vue';
-import defaultColors from 'tailwindcss/colors';
-import { Icon } from '@iconify/vue';
-import BaseCard from './BaseCard.vue';
-import { random } from 'lodash';
+import { DateTime } from "luxon";
+import BaseGantt from "./BaseGantt.vue";
+import defaultColors from "tailwindcss/colors";
+import { Icon } from "@iconify/vue";
+import BaseCard from "./BaseCard.vue";
+import { random } from "lodash";
 
 const rows = [];
 
 for (let i = 0; i < 10; i++) {
-
   const items = [];
 
   for (let j = 0; j < 1; j++) {
-
-    const start = DateTime.now().minus({ days: 50 }).plus({ days: i * 2 });
+    const start = DateTime.now()
+      .minus({ days: 50 })
+      .plus({ days: i * 2 });
     const end = start.plus({ days: 50 });
 
-    const colors = ['blue', 'green', 'red', 'yellow', 'indigo', 'pink', 'purple', 'gray'];
+    const colors = [
+      "blue",
+      "green",
+      "red",
+      "yellow",
+      "indigo",
+      "pink",
+      "purple",
+      "gray",
+    ];
 
     const colorKey = random(0, colors.length - 1);
 
@@ -38,14 +47,13 @@ for (let i = 0; i < 10; i++) {
   });
 }
 
-
 export default {
-  title: 'Data/BaseGantt',
+  title: "Data/BaseGantt",
   component: BaseGantt,
   args: {
     rows,
     maxHeight: 300,
-  }
+  },
 };
 
 const Template = (args) => ({
@@ -54,7 +62,6 @@ const Template = (args) => ({
     BaseGantt,
   },
   setup() {
-
     function onItemClick(item) {
       alert(`Item "${item.name}" clicked`);
     }
@@ -114,7 +121,6 @@ const SlotSidebarItemTemplate = (args) => ({
     Icon,
   },
   setup() {
-
     function onItemClick(item) {
       alert(`Item "${item.name}" clicked`);
     }
@@ -136,4 +142,4 @@ const SlotSidebarItemTemplate = (args) => ({
 });
 
 export const SlotSidebarItem = SlotSidebarItemTemplate.bind({});
-SlotSidebarItem.args = {};
+SlotSidebarItem.args = {};

package/src/components/BaseHasMany.stories.js

@@ -1,27 +1,27 @@
-import BaseHasMany from './BaseHasMany.vue';
-import ShowValue from '@/../.storybook/components/ShowValue.vue';
-import { createFieldStory, options, sizes } from '../../.storybook/utils';
-import BaseAppSnackbars from './BaseAppSnackbars.vue';
-import QueryString from 'qs';
-import { random } from 'lodash';
+import BaseHasMany from "./BaseHasMany.vue";
+import ShowValue from "@/../.storybook/components/ShowValue.vue";
+import { createFieldStory, options, sizes } from "../../.storybook/utils";
+import BaseAppSnackbars from "./BaseAppSnackbars.vue";
+import QueryString from "qs";
+import { random } from "lodash";
 
 export default {
-  title: 'Form/BaseHasMany',
+  title: "Form/BaseHasMany",
   component: BaseHasMany,
   argTypes: {
     size: {
-      control: { type: 'select' },
+      control: { type: "select" },
       options: sizes,
     },
   },
   args: {
-    url: 'https://faker.witify.io/api/todos',
-    field: 'name',
-    primaryKey: 'id',
+    url: "https://faker.witify.io/api/todos",
+    field: "name",
+    primaryKey: "id",
     showRouteUrl: (ids) => {
       const params = QueryString.stringify({ filter: { id: ids } });
       return `https://faker.witify.io/api/todos?${params}`;
-    }
+    },
   },
   decorators: [() => ({ template: '<div class="mb-36"><story/></div>' })],
 };
@@ -32,9 +32,9 @@ const Template = (args) => {
     setup() {
       const value = ref(4);
       const currentModels = ref([
-        { id: 4, name: 'Todo 4 (local)' },
-        { id: 6, name: 'Todo 6 (local)' },
-      ])
+        { id: 4, name: "Todo 4 (local)" },
+        { id: 6, name: "Todo 6 (local)" },
+      ]);
       return { args, value, currentModels };
     },
     template: `
@@ -225,11 +225,7 @@ const RaceConditionTemplate = (args) => {
   return {
     components: { BaseHasMany, ShowValue, BaseAppSnackbars },
     setup() {
-
-      const value = ref([
-        "4",
-        "6",
-      ]);
+      const value = ref(["4", "6"]);
 
       const valueExternal = ref([]);
 
@@ -270,6 +266,6 @@ RaceCondition.args = {};
 
 export const Field = createFieldStory({
   component: BaseHasMany,
-  componentName: 'BaseHasMany',
-  label: 'Name',
+  componentName: "BaseHasMany",
+  label: "Name",
 });