sprintify-ui 0.8.35 → 0.8.37

package/src/components/BaseMediaLibrary.stories.js

@@ -1,34 +1,34 @@
-import BaseApp from './BaseApp.vue';
-import BaseMediaLibrary from './BaseMediaLibrary.vue';
-import ShowValue from '../../.storybook/components/ShowValue.vue';
-import { createFieldStory } from '@/../.storybook/utils';
+import BaseApp from "./BaseApp.vue";
+import BaseMediaLibrary from "./BaseMediaLibrary.vue";
+import ShowValue from "../../.storybook/components/ShowValue.vue";
+import { createFieldStory } from "@/../.storybook/utils";
 
 const mediaModel = {
-  id: 'xxxxx',
-  name: 'picture0-1-2dfjjje-23refg-45t',
-  file_name: 'picture0-1-2dfjjje-23refg-45t.jpg',
-  mime_type: 'image/jpg',
-  url: 'https://images.unsplash.com/photo-1670139018938-af8bf748a1bc?auto=format&fit=crop&w=1200&h=800&q=80',
+  id: "xxxxx",
+  name: "picture0-1-2dfjjje-23refg-45t",
+  file_name: "picture0-1-2dfjjje-23refg-45t.jpg",
+  mime_type: "image/jpg",
+  url: "https://images.unsplash.com/photo-1670139018938-af8bf748a1bc?auto=format&fit=crop&w=1200&h=800&q=80",
   size: 430 * 1024,
 };
 
 const mediaModel2 = {
-  id: 'yyyyy',
-  name: 'photo-1678729465418-ee8127e8c5cd',
-  file_name: 'photo-1678729465418-ee8127e8c5cd.jpg',
-  mime_type: 'image/jpg',
-  url: 'https://images.unsplash.com/photo-1678729465418-ee8127e8c5cd?auto=format&fit=crop&w=800&q=80',
+  id: "yyyyy",
+  name: "photo-1678729465418-ee8127e8c5cd",
+  file_name: "photo-1678729465418-ee8127e8c5cd.jpg",
+  mime_type: "image/jpg",
+  url: "https://images.unsplash.com/photo-1678729465418-ee8127e8c5cd?auto=format&fit=crop&w=800&q=80",
   size: 430 * 1024,
 };
 
 export default {
-  title: 'Form/BaseMediaLibrary',
+  title: "Form/BaseMediaLibrary",
   component: BaseMediaLibrary,
   args: {
     max: null,
     min: 2,
-    acceptedExtensions: ['jpg', 'jpeg', 'png', 'webp'],
-    uploadUrl: 'https://faker.witify.io/api/todos/upload',
+    acceptedExtensions: ["jpg", "jpeg", "png", "webp"],
+    uploadUrl: "https://faker.witify.io/api/todos/upload",
   },
 };
 
@@ -43,35 +43,35 @@ const Template = (args) => ({
       mediaModel,
       mediaModel2,
       {
-        id: '1',
-        url: '',
-        mime_type: 'application/pdf',
-        name: 'document',
-        file_name: 'document.pdf',
+        id: "1",
+        url: "",
+        mime_type: "application/pdf",
+        name: "document",
+        file_name: "document.pdf",
         size: 40012,
       },
       {
-        id: '2',
-        url: '',
-        mime_type: 'application/excel',
-        name: 'finance-2022',
-        file_name: 'finance-2022.xlsx',
+        id: "2",
+        url: "",
+        mime_type: "application/excel",
+        name: "finance-2022",
+        file_name: "finance-2022.xlsx",
         size: 5461,
       },
       {
-        id: '3',
-        url: '',
-        mime_type: 'image/png',
-        name: '34345-1',
-        file_name: '34345-1.png',
+        id: "3",
+        url: "",
+        mime_type: "image/png",
+        name: "34345-1",
+        file_name: "34345-1.png",
         size: 40012,
       },
       {
-        id: '4',
-        url: '',
-        mime_type: 'audio/mp3',
-        name: 'test',
-        file_name: 'test.mp3',
+        id: "4",
+        url: "",
+        mime_type: "audio/mp3",
+        name: "test",
+        file_name: "test.mp3",
         size: 792834,
       },
     ]);
@@ -88,30 +88,30 @@ const Template = (args) => ({
 
 export const LayoutGallery = Template.bind({});
 LayoutGallery.args = {
-  layout: 'gallery',
+  layout: "gallery",
 };
 
 export const LayoutGalleryMultiple = Template.bind({});
 LayoutGalleryMultiple.args = {
-  layout: 'gallery',
-  multiple: true
+  layout: "gallery",
+  multiple: true,
 };
 
 export const LayoutGalleryDisabled = Template.bind({});
 LayoutGalleryDisabled.args = {
-  layout: 'gallery',
+  layout: "gallery",
   disabled: true,
 };
 
 export const LayoutGalleryDraggable = Template.bind({});
 LayoutGalleryDraggable.args = {
-  layout: 'gallery',
+  layout: "gallery",
   draggable: true,
 };
 
 export const LayoutGalleryDraggableDisabled = Template.bind({});
 LayoutGalleryDraggableDisabled.args = {
-  layout: 'gallery',
+  layout: "gallery",
   disabled: true,
   draggable: true,
 };
@@ -120,24 +120,24 @@ LayoutGalleryDraggableDisabled.args = {
 
 export const LayoutList = Template.bind({});
 LayoutList.args = {
-  layout: 'list',
+  layout: "list",
 };
 
 export const LayoutListDisabled = Template.bind({});
 LayoutListDisabled.args = {
-  layout: 'list',
+  layout: "list",
   disabled: true,
 };
 
 export const LayoutListDraggable = Template.bind({});
 LayoutListDraggable.args = {
-  layout: 'list',
+  layout: "list",
   draggable: true,
 };
 
 export const LayoutListDraggableDisabled = Template.bind({});
 LayoutListDraggableDisabled.args = {
-  layout: 'list',
+  layout: "list",
   disabled: true,
   draggable: true,
 };
@@ -146,40 +146,40 @@ LayoutListDraggableDisabled.args = {
 
 export const LayoutImages = Template.bind({});
 LayoutImages.args = {
-  pickerComponent: 'BaseFilePickerCrop',
-  layout: 'images',
+  pickerComponent: "BaseFilePickerCrop",
+  layout: "images",
 };
 
 export const LayoutImagesDisabled = Template.bind({});
 LayoutImagesDisabled.args = {
-  pickerComponent: 'BaseFilePickerCrop',
-  layout: 'images',
+  pickerComponent: "BaseFilePickerCrop",
+  layout: "images",
   disabled: true,
 };
 
 export const LayoutImagesDraggable = Template.bind({});
 LayoutImagesDraggable.args = {
-  pickerComponent: 'BaseFilePickerCrop',
-  layout: 'images',
+  pickerComponent: "BaseFilePickerCrop",
+  layout: "images",
   draggable: true,
 };
 
 export const LayoutImagesDraggableDisabled = Template.bind({});
 LayoutImagesDraggableDisabled.args = {
-  pickerComponent: 'BaseFilePickerCrop',
-  layout: 'images',
+  pickerComponent: "BaseFilePickerCrop",
+  layout: "images",
   disabled: true,
   draggable: true,
 };
 
 export const Crop = Template.bind({});
 Crop.args = {
-  pickerComponent: 'BaseFilePickerCrop',
+  pickerComponent: "BaseFilePickerCrop",
   cropper: {
     config: {
       maxWidth: 300,
     },
-    preset: 'avatar',
+    preset: "avatar",
     presetOptions: {
       size: 300,
     },
@@ -193,7 +193,7 @@ MaxSize.args = {
 
 export const Field = createFieldStory({
   component: BaseMediaLibrary,
-  componentName: 'BaseMediaLibrary',
+  componentName: "BaseMediaLibrary",
 });
 
 // Slots

package/src/components/BaseMediaPreview.stories.js

@@ -1,7 +1,7 @@
-import BaseMediaPreview from './BaseMediaPreview.vue';
+import BaseMediaPreview from "./BaseMediaPreview.vue";
 
 export default {
-  title: 'Media/BaseMediaPreview',
+  title: "Media/BaseMediaPreview",
   component: BaseMediaPreview,
 };
 
@@ -20,9 +20,9 @@ const Template = (args) => ({
 export const Image = Template.bind({});
 Image.args = {
   media: {
-    id: 'xxxxxxxxxxx',
-    file_name: 'picture.jpg',
-    mime_type: 'image/jpg',
+    id: "xxxxxxxxxxx",
+    file_name: "picture.jpg",
+    mime_type: "image/jpg",
     size: 430 * 1024,
   },
 };
@@ -30,10 +30,10 @@ Image.args = {
 export const ImageUrl = Template.bind({});
 ImageUrl.args = {
   media: {
-    id: 'xxxxxxxxxxx',
-    file_name: 'picture.jpg',
-    mime_type: 'image/jpg',
-    url: 'https://images.unsplash.com/photo-1670139018938-af8bf748a1bc?auto=format&fit=crop&w=800&h=800&q=80',
+    id: "xxxxxxxxxxx",
+    file_name: "picture.jpg",
+    mime_type: "image/jpg",
+    url: "https://images.unsplash.com/photo-1670139018938-af8bf748a1bc?auto=format&fit=crop&w=800&h=800&q=80",
     size: 430 * 1024,
   },
 };
@@ -41,10 +41,10 @@ ImageUrl.args = {
 export const PDF = Template.bind({});
 PDF.args = {
   media: {
-    id: 'xxxxxxxxxxx',
-    file_name: 'picture.pdf',
-    mime_type: 'application/pdf',
-    url: 'https://images.unsplash.com/photo-1670139018938-af8bf748a1bc?auto=format&fit=crop&w=800&h=800&q=80',
+    id: "xxxxxxxxxxx",
+    file_name: "picture.pdf",
+    mime_type: "application/pdf",
+    url: "https://images.unsplash.com/photo-1670139018938-af8bf748a1bc?auto=format&fit=crop&w=800&h=800&q=80",
     size: 430 * 1024,
   },
 };
@@ -52,10 +52,10 @@ PDF.args = {
 export const Music = Template.bind({});
 Music.args = {
   media: {
-    id: 'xxxxxxxxxxx',
-    file_name: 'picture.mp3',
-    mime_type: 'audio/mpeg',
-    url: 'https://images.unsplash.com/photo-1670139018938-af8bf748a1bc?auto=format&fit=crop&w=800&h=800&q=80',
+    id: "xxxxxxxxxxx",
+    file_name: "picture.mp3",
+    mime_type: "audio/mpeg",
+    url: "https://images.unsplash.com/photo-1670139018938-af8bf748a1bc?auto=format&fit=crop&w=800&h=800&q=80",
     size: 430 * 1024,
   },
 };
@@ -63,10 +63,10 @@ Music.args = {
 export const Other = Template.bind({});
 Other.args = {
   media: {
-    id: 'xxxxxxxxxxx',
-    file_name: 'picture.mp3',
-    mime_type: 'application/excel',
-    url: 'https://images.unsplash.com/photo-1670139018938-af8bf748a1bc?auto=format&fit=crop&w=800&h=800&q=80',
+    id: "xxxxxxxxxxx",
+    file_name: "picture.mp3",
+    mime_type: "application/excel",
+    url: "https://images.unsplash.com/photo-1670139018938-af8bf748a1bc?auto=format&fit=crop&w=800&h=800&q=80",
     size: 430 * 1024,
   },
 };

package/src/components/BaseMenu.stories.js

@@ -1,22 +1,22 @@
-import BaseMenu from './BaseMenu.vue';
-import { Icon as BaseIcon } from '@iconify/vue';
-import BaseAvatar from './BaseAvatar.vue';
+import BaseMenu from "./BaseMenu.vue";
+import { Icon as BaseIcon } from "@iconify/vue";
+import BaseAvatar from "./BaseAvatar.vue";
 
 export default {
-  title: 'Components/BaseMenu',
+  title: "Components/BaseMenu",
   component: BaseMenu,
   args: {
-    position: 'bottom-right',
+    position: "bottom-right",
   },
   argTypes: {
     position: {
-      control: { type: 'select' },
-      options: ['bottom-left', 'bottom-right'],
+      control: { type: "select" },
+      options: ["bottom-left", "bottom-right"],
     },
     size: {
-      control: { type: 'select' },
-      options: ['xs', 'sm', 'md'],
-    }
+      control: { type: "select" },
+      options: ["xs", "sm", "md"],
+    },
   },
 };
 
@@ -29,46 +29,46 @@ const Template = (args) => ({
   setup() {
     const items = [
       {
-        label: 'Export file',
-        icon: 'mdi-export',
+        label: "Export file",
+        icon: "mdi-export",
         action() {
-          alert('Export!');
+          alert("Export!");
         },
       },
       {
-        label: 'Open the Google Website on new tab',
-        icon: 'mdi-google',
-        href: 'https://google.com',
+        label: "Open the Google Website on new tab",
+        icon: "mdi-google",
+        href: "https://google.com",
         count: 1000,
       },
       {
-        icon: 'mdi-access-point',
-        label: 'Reconnect',
-        to: 'home',
-        color: 'success',
+        icon: "mdi-access-point",
+        label: "Reconnect",
+        to: "home",
+        color: "success",
       },
       {
-        icon: 'mdi-archive',
-        label: 'Archive',
-        href: 'https://google.com',
-        color: 'warning',
+        icon: "mdi-archive",
+        label: "Archive",
+        href: "https://google.com",
+        color: "warning",
       },
       {
-        icon: 'mdi-trash-can',
-        label: 'Delete',
-        href: 'https://google.com',
-        color: 'danger',
+        icon: "mdi-trash-can",
+        label: "Delete",
+        href: "https://google.com",
+        color: "danger",
         count: 1,
       },
     ];
 
     const user = {
-      email: 'jane@witify.io',
-      first_name: 'Jane',
-      last_name: 'Doe',
-      full_name: 'Jane Doe',
+      email: "jane@witify.io",
+      first_name: "Jane",
+      last_name: "Doe",
+      full_name: "Jane Doe",
       avatar_url:
-        'https://images.unsplash.com/photo-1494790108377-be9c29b29330??auto=format&fit=crop&w=200&h=200&q=80&g=face',
+        "https://images.unsplash.com/photo-1494790108377-be9c29b29330??auto=format&fit=crop&w=200&h=200&q=80&g=face",
     };
 
     args.items = items;
@@ -130,5 +130,5 @@ Demo.args = {};
 
 export const FixedWidth = Template.bind({});
 FixedWidth.args = {
-  width: 280
+  width: 280,
 };

package/src/components/BaseModalCenter.stories.js

@@ -1,17 +1,17 @@
-import BaseModalCenter from './BaseModalCenter.vue';
-import { Icon as BaseIcon } from '@iconify/vue';
-import BaseAvatar from './BaseAvatar.vue';
+import BaseModalCenter from "./BaseModalCenter.vue";
+import { Icon as BaseIcon } from "@iconify/vue";
+import BaseAvatar from "./BaseAvatar.vue";
 
 export default {
-  title: 'Components/BaseModalCenter',
+  title: "Components/BaseModalCenter",
   component: BaseModalCenter,
   args: {
-    position: 'bottom-right',
+    position: "bottom-right",
   },
   argTypes: {
     verticalAlign: {
-      control: { type: 'select' },
-      options: ['center', 'top'],
+      control: { type: "select" },
+      options: ["center", "top"],
     },
   },
 };
@@ -49,7 +49,7 @@ Demo.args = {};
 
 export const VerticalAlignTop = Template.bind({});
 VerticalAlignTop.args = {
-  verticalAlign: 'top',
+  verticalAlign: "top",
 };
 
 export const NoCloseButton = Template.bind({});
@@ -59,7 +59,7 @@ NoCloseButton.args = {
 
 export const CustomBackdropClass = Template.bind({});
 CustomBackdropClass.args = {
-  backdropClass: 'bg-red-500 bg-opacity-70',
+  backdropClass: "bg-red-500 bg-opacity-70",
 };
 
 export const PreventLeave = Template.bind({});

package/src/components/BaseModalSide.stories.js

@@ -1,9 +1,9 @@
-import BaseModalSide from './BaseModalSide.vue';
-import { Icon as BaseIcon } from '@iconify/vue';
-import BaseAvatar from './BaseAvatar.vue';
+import BaseModalSide from "./BaseModalSide.vue";
+import { Icon as BaseIcon } from "@iconify/vue";
+import BaseAvatar from "./BaseAvatar.vue";
 
 export default {
-  title: 'Components/BaseModalSide',
+  title: "Components/BaseModalSide",
   component: BaseModalSide,
   args: {},
 };
@@ -41,12 +41,12 @@ Demo.args = {};
 
 export const CustomMaxWidth = Template.bind({});
 CustomMaxWidth.args = {
-  maxWidth: '16rem',
+  maxWidth: "16rem",
 };
 
 export const CustomBackdropClass = Template.bind({});
 CustomBackdropClass.args = {
-  backdropClass: 'bg-red-500 bg-opacity-70',
+  backdropClass: "bg-red-500 bg-opacity-70",
 };
 
 export const PreventLeave = Template.bind({});

package/src/components/BaseNavbar.stories.js

@@ -1,16 +1,16 @@
-import BaseNavbar from './BaseNavbar.vue';
-import BaseNavbarItem from './BaseNavbarItem.vue';
-import BaseNavbarSideItem from './BaseNavbarSideItem.vue';
-import BaseAvatar from './BaseAvatar.vue';
-import BaseMenu from './BaseMenu.vue';
-import { Icon as BaseIcon } from '@iconify/vue';
+import BaseNavbar from "./BaseNavbar.vue";
+import BaseNavbarItem from "./BaseNavbarItem.vue";
+import BaseNavbarSideItem from "./BaseNavbarSideItem.vue";
+import BaseAvatar from "./BaseAvatar.vue";
+import BaseMenu from "./BaseMenu.vue";
+import { Icon as BaseIcon } from "@iconify/vue";
 
 export default {
-  title: 'Navigation/BaseNavbar',
+  title: "Navigation/BaseNavbar",
   component: BaseNavbar,
   args: {},
   parameters: {
-    layout: 'fullscreen',
+    layout: "fullscreen",
   },
 };
 
@@ -25,43 +25,43 @@ const Template = (args) => ({
   },
   setup() {
     const user = {
-      email: 'jane@witify.io',
-      first_name: 'Jane',
-      last_name: 'Doe',
-      full_name: 'Jane Doe',
+      email: "jane@witify.io",
+      first_name: "Jane",
+      last_name: "Doe",
+      full_name: "Jane Doe",
       avatar_url:
-        'https://images.unsplash.com/photo-1494790108377-be9c29b29330??auto=format&fit=crop&w=200&h=200&q=80&g=face',
+        "https://images.unsplash.com/photo-1494790108377-be9c29b29330??auto=format&fit=crop&w=200&h=200&q=80&g=face",
     };
 
     const menu = [
       {
-        label: 'Home',
-        to: '/',
+        label: "Home",
+        to: "/",
       },
       {
-        label: 'Products',
-        to: '/setup',
+        label: "Products",
+        to: "/setup",
         count: 234,
       },
       {
-        label: 'Settings',
-        to: '/settings',
+        label: "Settings",
+        to: "/settings",
       },
     ];
 
     const userMenu = [
       {
-        label: 'Home',
-        icon: 'heroicons:home',
-        href: 'https://google.com',
+        label: "Home",
+        icon: "heroicons:home",
+        href: "https://google.com",
       },
       {
         meta: { line: true },
       },
       {
-        label: 'Logout',
-        icon: 'heroicons:arrow-right-on-rectangle',
-        href: 'https://google.com',
+        label: "Logout",
+        icon: "heroicons:arrow-right-on-rectangle",
+        href: "https://google.com",
       },
     ];
 
@@ -79,7 +79,7 @@ const Template = (args) => ({
               <RouterLink to="/" class="flex flex-shrink-0 items-center">
                 <img
                   class="block h-8 w-auto"
-                  src="https://sprintify.witify.io/img/logo/logo-side.svg"
+                  src="https://demo.sprintify.app/img/logo/logo-side.svg"
                   alt="Sprintify"
                 />
               </RouterLink>

package/src/components/BasePagination.stories.js

@@ -1,7 +1,7 @@
-import BasePagination from './BasePagination.vue';
+import BasePagination from "./BasePagination.vue";
 
 export default {
-  title: 'Components/BasePagination',
+  title: "Components/BasePagination",
   component: BasePagination,
   args: {
     totalVisible: 12,

package/src/components/BasePanel.stories.js

@@ -1,17 +1,17 @@
-import BaseContainer from './BaseContainer.vue';
-import BasePanel from './BasePanel.vue';
-import BaseCard from './BaseCard.vue';
-import BaseCardRow from './BaseCardRow.vue';
-import BaseInputLabel from './BaseInputLabel.vue';
-import BaseInput from './BaseInput.vue';
+import BaseContainer from "./BaseContainer.vue";
+import BasePanel from "./BasePanel.vue";
+import BaseCard from "./BaseCard.vue";
+import BaseCardRow from "./BaseCardRow.vue";
+import BaseInputLabel from "./BaseInputLabel.vue";
+import BaseInput from "./BaseInput.vue";
 
 export default {
-  title: 'Layout/BasePanel',
+  title: "Layout/BasePanel",
   component: BasePanel,
   args: {
-    title: 'General information',
+    title: "General information",
     description:
-      'Enter general user information, name and age. User must be more than 10 years old to participate.',
+      "Enter general user information, name and age. User must be more than 10 years old to participate.",
   },
 };