sprintify-ui 0.8.34 → 0.8.37

package/src/components/BaseCropper.stories.js

@@ -1,14 +1,14 @@
-import BaseCropper from '@/components/BaseCropper.vue';
-import BaseLoadingCover from '@/components/BaseLoadingCover.vue';
-import BaseAppSnackbars from '@/components/BaseAppSnackbars.vue';
-import { Icon as BaseIcon } from '@iconify/vue';
+import BaseCropper from "@/components/BaseCropper.vue";
+import BaseLoadingCover from "@/components/BaseLoadingCover.vue";
+import BaseAppSnackbars from "@/components/BaseAppSnackbars.vue";
+import { Icon as BaseIcon } from "@iconify/vue";
 
 export default {
-  title: 'Media/BaseCropper',
+  title: "Media/BaseCropper",
   component: BaseCropper,
   args: {
     source:
-      'https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&q=80',
+      "https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&q=80",
   },
 };
 
@@ -24,8 +24,8 @@ const Template = (args) => ({
 
     function saveAsCanvas() {
       cropperRef.value.save({
-        type: 'canvas',
-        size: 'original',
+        type: "canvas",
+        size: "original",
       });
     }
 
@@ -87,7 +87,7 @@ Demo.args = {
     viewport: {
       width: 200,
       height: 200,
-      type: 'rectangle',
+      type: "rectangle",
     },
     boundary: {
       width: 200,
@@ -99,13 +99,13 @@ Demo.args = {
 export const Avatar = Template.bind({});
 
 Avatar.args = {
-  preset: 'avatar',
+  preset: "avatar",
 };
 
 export const Cover = Template.bind({});
 
 Cover.args = {
-  preset: 'cover',
+  preset: "cover",
   presetOptions: {
     size: 400,
     ratio: 16 / 9,

package/src/components/BaseCropperModal.stories.js

@@ -1,11 +1,11 @@
-import BaseCropperModal from '@/components/BaseCropperModal.vue';
-import BaseAppSnackbars from '@/components/BaseAppSnackbars.vue';
+import BaseCropperModal from "@/components/BaseCropperModal.vue";
+import BaseAppSnackbars from "@/components/BaseAppSnackbars.vue";
 
 const source =
-  'https://images.unsplash.com/photo-1560250097-0b93528c311a?auto=format&fit=crop&q=80';
+  "https://images.unsplash.com/photo-1560250097-0b93528c311a?auto=format&fit=crop&q=80";
 
 export default {
-  title: 'Media/BaseCropperModal',
+  title: "Media/BaseCropperModal",
   component: BaseCropperModal,
   args: {},
 };
@@ -32,7 +32,7 @@ Avatar.args = {
     config: {
       maxWidth: 300,
     },
-    preset: 'avatar',
+    preset: "avatar",
     presetOptions: {
       size: 300,
     },
@@ -46,7 +46,7 @@ Cover.args = {
     config: {
       maxWidth: 600,
     },
-    preset: 'cover',
+    preset: "cover",
     presetOptions: {
       size: 600,
     },

package/src/components/BaseDataIterator.stories.js

@@ -1,26 +1,26 @@
-import BaseDataIterator from './BaseDataIterator.vue';
-import BaseSelect from './BaseSelect.vue';
-import BaseCard from './BaseCard.vue';
-import BaseCardRow from './BaseCardRow.vue';
-import BaseLoadingCover from './BaseLoadingCover.vue';
-import { options, sizes } from '../../.storybook/utils';
-import { computed } from 'vue';
+import BaseDataIterator from "./BaseDataIterator.vue";
+import BaseSelect from "./BaseSelect.vue";
+import BaseCard from "./BaseCard.vue";
+import BaseCardRow from "./BaseCardRow.vue";
+import BaseLoadingCover from "./BaseLoadingCover.vue";
+import { options, sizes } from "../../.storybook/utils";
+import { computed } from "vue";
 
 export default {
-  title: 'Data/BaseDataIterator',
+  title: "Data/BaseDataIterator",
   component: BaseDataIterator,
   argTypes: {
     size: {
-      control: { type: 'select' },
+      control: { type: "select" },
       options: sizes,
     },
     filtersPosition: {
-      control: { type: 'select' },
-      options: ['top', 'section'],
+      control: { type: "select" },
+      options: ["top", "section"],
     },
   },
   args: {
-    url: 'https://effettandem.com/api/content/articles',
+    url: "https://effettandem.com/api/content/articles",
     urlQuery: {
       per_page: 5,
     },
@@ -121,7 +121,7 @@ const Template = (args) => ({
 
     setTimeout(() => {
       urlQuery.value = {
-        type: 'video',
+        type: "video",
       };
     }, 3000);
 
@@ -135,21 +135,21 @@ Demo.args = {
   searchable: true,
   actions: [
     {
-      label: 'Open Google',
-      icon: 'heroicons:link',
-      href: 'https://google.com',
+      label: "Open Google",
+      icon: "heroicons:link",
+      href: "https://google.com",
     },
     {
-      label: 'Export',
-      icon: 'heroicons:table-cells',
-      action: () => alert('export!'),
+      label: "Export",
+      icon: "heroicons:table-cells",
+      action: () => alert("export!"),
     },
     { meta: { line: true } },
     {
-      label: 'Delete all',
-      icon: 'heroicons:trash',
-      action: () => alert('Delete All!'),
-      color: 'danger',
+      label: "Delete all",
+      icon: "heroicons:trash",
+      action: () => alert("Delete All!"),
+      color: "danger",
     },
   ],
 };
@@ -216,21 +216,18 @@ const LocalDataTemplate = (args) => ({
     BaseSelect,
   },
   setup() {
-
     const baseDataIteratorRef = ref(null);
 
     const filteredItems = computed(() => {
-      return options
-        .filter((item) => {
-
-          const type = baseDataIteratorRef.value?.query?.filter?.type ?? null;
+      return options.filter((item) => {
+        const type = baseDataIteratorRef.value?.query?.filter?.type ?? null;
 
-          if (type) {
-            return item.type === type;
-          }
+        if (type) {
+          return item.type === type;
+        }
 
-          return true;
-        });
+        return true;
+      });
     });
 
     return { args, filteredItems, baseDataIteratorRef };

package/src/components/BaseDataTable.stories.js

@@ -1,34 +1,34 @@
-import BaseDataTable from './BaseDataTable.vue';
-import BaseTableColumn from './BaseTableColumn.vue';
-import BaseBoolean from './BaseBoolean.vue';
-import BaseSelect from './BaseSelect.vue';
-import BaseBadge from './BaseBadge.vue';
-import BaseAppSnackbars from './BaseAppSnackbars.vue';
-import BaseAppDialogs from './BaseAppDialogs.vue';
-import { computed, onBeforeUnmount } from 'vue';
-import { DateTime } from 'luxon';
-import { optionsLarge, templateDataTable } from '../../.storybook/utils';
-import { cloneDeep } from 'lodash';
+import BaseDataTable from "./BaseDataTable.vue";
+import BaseTableColumn from "./BaseTableColumn.vue";
+import BaseBoolean from "./BaseBoolean.vue";
+import BaseSelect from "./BaseSelect.vue";
+import BaseBadge from "./BaseBadge.vue";
+import BaseAppSnackbars from "./BaseAppSnackbars.vue";
+import BaseAppDialogs from "./BaseAppDialogs.vue";
+import { computed, onBeforeUnmount } from "vue";
+import { DateTime } from "luxon";
+import { optionsLarge, templateDataTable } from "../../.storybook/utils";
+import { cloneDeep } from "lodash";
 
 export default {
-  title: 'Data/BaseDataTable',
+  title: "Data/BaseDataTable",
   component: BaseDataTable,
   argTypes: {
     layout: {
-      control: { type: 'select' },
-      options: ['default', 'compact'],
+      control: { type: "select" },
+      options: ["default", "compact"],
     },
     size: {
-      control: { type: 'select' },
-      options: ['sm', 'md'],
+      control: { type: "select" },
+      options: ["sm", "md"],
     },
     filtersPosition: {
-      control: { type: 'select' },
-      options: ['top', 'section'],
+      control: { type: "select" },
+      options: ["top", "section"],
     },
   },
   args: {
-    url: 'https://effettandem.com/api/content/articles',
+    url: "https://effettandem.com/api/content/articles",
     urlQuery: {
       per_page: 100,
     },
@@ -51,10 +51,10 @@ const componentProps = {
     return `/articles/${row.id}`;
   },
   editUrl() {
-    return '/';
+    return "/";
   },
   deleteUrl() {
-    return '/';
+    return "/";
   },
   detailed: true,
   searchable: true,
@@ -62,51 +62,51 @@ const componentProps = {
   checkable: true,
   actions: [
     {
-      label: 'Open Google',
-      icon: 'heroicons:link-20-solid',
-      href: 'https://google.com',
+      label: "Open Google",
+      icon: "heroicons:link-20-solid",
+      href: "https://google.com",
     },
     {
-      label: 'Export',
-      icon: 'heroicons:arrow-down-tray',
-      action: () => alert('export!'),
+      label: "Export",
+      icon: "heroicons:arrow-down-tray",
+      action: () => alert("export!"),
     },
     { meta: { line: true } },
     {
-      label: 'Delete all',
-      icon: 'heroicons:trash',
-      action: () => alert('Delete All!'),
-      color: 'danger',
+      label: "Delete all",
+      icon: "heroicons:trash",
+      action: () => alert("Delete All!"),
+      color: "danger",
     },
   ],
   checkableActions: [
     {
-      label: 'Delete all',
+      label: "Delete all",
       action: () => {
-        alert('delete!');
+        alert("delete!");
       },
     },
   ],
   rowActions: [
     {
-      label: 'Href',
-      icon: 'heroicons:link-20-solid',
-      href: () => 'https://google.com',
+      label: "Href",
+      icon: "heroicons:link-20-solid",
+      href: () => "https://google.com",
     },
     {
-      label: 'Action',
-      icon: 'heroicons:arrow-right-20-solid',
+      label: "Action",
+      icon: "heroicons:arrow-right-20-solid",
       action() {
-        alert('hit');
+        alert("hit");
       },
     },
   ],
   sections: [
     {
-      name: 'test',
-      title: 'Section Test',
-      icon: 'heroicons:link',
-      closeText: 'Close',
+      name: "test",
+      title: "Section Test",
+      icon: "heroicons:link",
+      closeText: "Close",
     },
   ],
 };
@@ -131,7 +131,14 @@ const templateSetup = (args) => {
     lastFetch.value = new Date();
   }
 
-  return { args, onRowClick, ownerIsVisible: true, onFetch, lastFetch, DateTime };
+  return {
+    args,
+    onRowClick,
+    ownerIsVisible: true,
+    onFetch,
+    lastFetch,
+    DateTime,
+  };
 };
 
 const Template = (args) => ({
@@ -147,8 +154,8 @@ Demo.args = componentProps;
 
 export const Small = Template.bind({});
 Small.args = {
-  size: 'sm',
-}
+  size: "sm",
+};
 
 const VIfOnBaseTableColumn = (args) => ({
   components: templateComponents,
@@ -231,25 +238,23 @@ Simple.args = {
 const LocalTemplate = (args) => ({
   components: templateComponents,
   setup() {
-
     const baseDataTableRef = ref(null);
 
     const onCellClick = (...args) => {
-      alert('Cell clicked! View console log for details.');
+      alert("Cell clicked! View console log for details.");
       console.log(JSON.parse(JSON.stringify(args)));
     };
 
     const filteredItems = computed(() => {
-      return optionsLarge
-        .filter((item) => {
-          const type = baseDataTableRef.value?.query.filter?.type ?? '';
+      return optionsLarge.filter((item) => {
+        const type = baseDataTableRef.value?.query.filter?.type ?? "";
 
-          if (!type) {
-            return true;
-          }
+        if (!type) {
+          return true;
+        }
 
-          return item.type === type;
-        });
+        return item.type === type;
+      });
     });
 
     return { args, filteredItems, baseDataTableRef, onCellClick };

package/src/components/BaseDatePicker.stories.js

@@ -1,33 +1,33 @@
-import BaseDatePicker from './BaseDatePicker.vue';
-import ShowValue from '@/../.storybook/components/ShowValue.vue';
-import { DateTime } from 'luxon';
-import { createFieldStory, sizes } from '../../.storybook/utils';
+import BaseDatePicker from "./BaseDatePicker.vue";
+import ShowValue from "@/../.storybook/components/ShowValue.vue";
+import { DateTime } from "luxon";
+import { createFieldStory, sizes } from "../../.storybook/utils";
 
 export default {
-  title: 'Form/BaseDatePicker',
+  title: "Form/BaseDatePicker",
   component: BaseDatePicker,
   argTypes: {
     minDate: {
-      control: { type: 'text' },
+      control: { type: "text" },
     },
     maxDate: {
-      control: { type: 'text' },
+      control: { type: "text" },
     },
     mode: {
-      control: { type: 'select' },
-      options: ['single', 'multiple', 'range', 'time'],
+      control: { type: "select" },
+      options: ["single", "multiple", "range", "time"],
     },
     size: {
-      control: { type: 'select' },
+      control: { type: "select" },
       options: sizes,
-    }
+    },
   },
 };
 
 const Template = (args) => ({
   components: { BaseDatePicker, ShowValue },
   setup() {
-    const value = ref('2022-01-01');
+    const value = ref("2022-01-01");
     return { value, args };
   },
   template: `
@@ -41,12 +41,12 @@ export const Demo = Template.bind({});
 
 export const MinDate = Template.bind({});
 MinDate.args = {
-  minDate: DateTime.fromISO('2023-01-05').toISODate(),
+  minDate: DateTime.fromISO("2023-01-05").toISODate(),
 };
 
 export const MaxDate = Template.bind({});
 MaxDate.args = {
-  maxDate: '2023-01-18',
+  maxDate: "2023-01-18",
 };
 
 export const Disabled = Template.bind({});
@@ -56,12 +56,12 @@ Disabled.args = {
 
 export const Range = Template.bind({});
 Range.args = {
-  mode: 'range',
+  mode: "range",
 };
 
 export const Multiple = Template.bind({});
 Multiple.args = {
-  mode: 'multiple',
+  mode: "multiple",
 };
 
 export const DateAndTime = Template.bind({});
@@ -72,9 +72,9 @@ DateAndTime.args = {
 export const DisableDates = Template.bind({});
 DisableDates.args = {
   disableDates: [
-    '2023-01-12',
-    '2023-01-18',
-    '2023-01-24',
+    "2023-01-12",
+    "2023-01-18",
+    "2023-01-24",
     new Date(2023, 0, 16), // '2023-01-16'
   ],
 };
@@ -82,12 +82,12 @@ DisableDates.args = {
 const DisableMondayAndTuesdayTemplate = (args) => ({
   components: { BaseDatePicker, ShowValue },
   setup() {
-    const value = ref('2022-01-03');
+    const value = ref("2022-01-03");
     const disableDates = [
       (date) => {
         return date.getDay() == 1 || date.getDay() == 2;
-      }
-    ]
+      },
+    ];
     return { value, args, disableDates };
   },
   template: `
@@ -103,12 +103,12 @@ export const RangeDisableDates = Template.bind({});
 RangeDisableDates.args = {
   disableDates: [
     {
-      from: '2023-01-09',
-      to: '2023-01-15',
+      from: "2023-01-09",
+      to: "2023-01-15",
     },
     {
-      from: '2023-01-20',
-      to: '2023-01-25',
+      from: "2023-01-20",
+      to: "2023-01-25",
     },
   ],
 };
@@ -140,7 +140,7 @@ export const DateTimeConversion = (args) => {
   };
 };
 DateTimeConversion.args = {
-  modelValue: '2023-01-05T00:00:00Z',
+  modelValue: "2023-01-05T00:00:00Z",
 };
 
 const TemplateSizes = (args) => ({
@@ -161,6 +161,6 @@ export const Sizes = TemplateSizes.bind({});
 
 export const Field = createFieldStory({
   component: BaseDatePicker,
-  componentName: 'BaseDatePicker',
-  label: 'Date',
+  componentName: "BaseDatePicker",
+  label: "Date",
 });

package/src/components/BaseDateSelect.stories.js

@@ -1,15 +1,15 @@
-import BaseDateSelect from './BaseDateSelect.vue';
-import ShowValue from '@/../.storybook/components/ShowValue.vue';
-import { createFieldStory, sizes } from '../../.storybook/utils';
+import BaseDateSelect from "./BaseDateSelect.vue";
+import ShowValue from "@/../.storybook/components/ShowValue.vue";
+import { createFieldStory, sizes } from "../../.storybook/utils";
 
 export default {
-  title: 'Form/BaseDateSelect',
+  title: "Form/BaseDateSelect",
   component: BaseDateSelect,
   argTypes: {
     size: {
-      control: { type: 'select' },
+      control: { type: "select" },
       options: sizes,
-    }
+    },
   },
 };
 
@@ -41,7 +41,7 @@ MaxYear.args = {
 
 export const Disabled = Template.bind({});
 Disabled.args = {
-  modelValue: '2022-11-16',
+  modelValue: "2022-11-16",
   disabled: true,
 };
 
@@ -63,6 +63,6 @@ export const Sizes = TemplateSizes.bind({});
 
 export const Field = createFieldStory({
   component: BaseDateSelect,
-  componentName: 'BaseDateSelect',
-  label: 'Date',
+  componentName: "BaseDateSelect",
+  label: "Date",
 });

package/src/components/BaseDescriptionList.stories.js

@@ -1,9 +1,9 @@
-import BaseBadge from './BaseBadge.vue';
-import BaseDescriptionList from './BaseDescriptionList.vue';
-import BaseDescriptionListItem from './BaseDescriptionListItem.vue';
+import BaseBadge from "./BaseBadge.vue";
+import BaseDescriptionList from "./BaseDescriptionList.vue";
+import BaseDescriptionListItem from "./BaseDescriptionListItem.vue";
 
 export default {
-  title: 'Data/BaseDescriptionList',
+  title: "Data/BaseDescriptionList",
   component: BaseDescriptionList,
   argTypes: {},
 };