sprintify-ui 0.8.35 → 0.8.37

package/src/components/BaseCalendar.stories.js

@@ -1,14 +1,14 @@
-import BaseCalendar from './BaseCalendar.vue';
+import BaseCalendar from "./BaseCalendar.vue";
 
 export default {
-  title: 'Components/BaseCalendar',
+  title: "Components/BaseCalendar",
   component: BaseCalendar,
   args: {},
   argTypes: {
     locale: {
-      control: { type: 'select' },
-      options: ['en', 'fr']
-    }
+      control: { type: "select" },
+      options: ["en", "fr"],
+    },
   },
 };
 
@@ -25,11 +25,38 @@ function getDateByDay(day) {
 }
 
 const events = [
-  { id: 1, title: 'Reserved', start: getDateByDay(15) + ' 10:30:00', end: getDateByDay(20) + ' 13:25:00' },
-  { id: 2, title: 'Accepted', start: getDateByDay(11), end: getDateByDay(17), backgroundColor: 'green', borderColor: 'green' },
-  { id: 3, title: 'Blocked', start: getDateByDay(5), end: getDateByDay(5), backgroundColor: '#000', borderColor: '#000' },
-  { id: 4, title: 'Removed', start: getDateByDay(25), end: getDateByDay(26), backgroundColor: 'orange', borderColor: 'red', textColor: 'blue' },
-]
+  {
+    id: 1,
+    title: "Reserved",
+    start: getDateByDay(15) + " 10:30:00",
+    end: getDateByDay(20) + " 13:25:00",
+  },
+  {
+    id: 2,
+    title: "Accepted",
+    start: getDateByDay(11),
+    end: getDateByDay(17),
+    backgroundColor: "green",
+    borderColor: "green",
+  },
+  {
+    id: 3,
+    title: "Blocked",
+    start: getDateByDay(5),
+    end: getDateByDay(5),
+    backgroundColor: "#000",
+    borderColor: "#000",
+  },
+  {
+    id: 4,
+    title: "Removed",
+    start: getDateByDay(25),
+    end: getDateByDay(26),
+    backgroundColor: "orange",
+    borderColor: "red",
+    textColor: "blue",
+  },
+];
 
 const Template = (args) => ({
   components: { BaseCalendar },
@@ -42,39 +69,69 @@ const Template = (args) => ({
   `,
 });
 
-
 const TemplateWithAllEvents = (args) => ({
   components: { BaseCalendar },
   setup() {
     function onSelect(payload) {
-      alert('selected: start = ' + payload.start + ', end = ' + payload.end);
+      alert("selected: start = " + payload.start + ", end = " + payload.end);
     }
 
     function onClick(payload) {
-      alert('clicked: title = ' + payload.event.title + ', start = ' + payload.event.start + ', end = ' + payload.event.end)
+      alert(
+        "clicked: title = " +
+          payload.event.title +
+          ", start = " +
+          payload.event.start +
+          ", end = " +
+          payload.event.end,
+      );
     }
 
     function onAdd() {
-      alert('added')
+      alert("added");
     }
 
     function onChange(payload) {
-      alert('changed: start = ' + payload.event.start + ', end = ' + payload.event.end)
+      alert(
+        "changed: start = " +
+          payload.event.start +
+          ", end = " +
+          payload.event.end,
+      );
     }
 
     function onResize(payload) {
-      alert('resized: start = ' + payload.event.start + ', end = ' + payload.event.end)
+      alert(
+        "resized: start = " +
+          payload.event.start +
+          ", end = " +
+          payload.event.end,
+      );
     }
 
     function onDrop(payload) {
-      alert('dropped: start = ' + payload.event.start + ', end = ' + payload.event.end)
+      alert(
+        "dropped: start = " +
+          payload.event.start +
+          ", end = " +
+          payload.event.end,
+      );
     }
 
     function onDateClick(payload) {
-      alert('date clicked = ' + payload.date);
+      alert("date clicked = " + payload.date);
     }
 
-    return { args, onSelect, onClick, onAdd, onChange, onResize, onDrop, onDateClick };
+    return {
+      args,
+      onSelect,
+      onClick,
+      onAdd,
+      onChange,
+      onResize,
+      onDrop,
+      onDateClick,
+    };
   },
   template: `
     <BaseCalendar 
@@ -96,11 +153,25 @@ const TemplateWithHoverEvents = (args) => ({
   components: { BaseCalendar },
   setup() {
     function onMouseenter(payload) {
-      alert('mouseenter: title = ' + payload.event.title + ', start = ' + payload.event.start + ', end = ' + payload.event.end)
+      alert(
+        "mouseenter: title = " +
+          payload.event.title +
+          ", start = " +
+          payload.event.start +
+          ", end = " +
+          payload.event.end,
+      );
     }
 
     function onMouseleave(payload) {
-      alert('mouseleave: title = ' + payload.event.title + ', start = ' + payload.event.start + ', end = ' + payload.event.end)
+      alert(
+        "mouseleave: title = " +
+          payload.event.title +
+          ", start = " +
+          payload.event.start +
+          ", end = " +
+          payload.event.end,
+      );
     }
     return { args, onMouseenter, onMouseleave };
   },
@@ -134,8 +205,7 @@ const TemplateWithSlot = (args) => ({
 });
 
 export const Demo = Template.bind({});
-Demo.args = {
-};
+Demo.args = {};
 
 export const Event = TemplateWithAllEvents.bind({});
 Event.args = {
@@ -144,59 +214,65 @@ Event.args = {
 
 export const HoverEvent = TemplateWithHoverEvents.bind({});
 HoverEvent.args = {
-  events: events
+  events: events,
 };
 
 export const CustomSlot = TemplateWithSlot.bind({});
 CustomSlot.args = {
-  events: events
+  events: events,
 };
 
 export const ToolbarHeaderAll1 = Template.bind({});
 ToolbarHeaderAll1.args = {
-  headerToolbarLeft: 'multiMonthYear dayGridMonth timeGridWeek timeGridDay listWeek',
-  headerToolbarCenter: 'title',
-  headerToolbarRight: 'prev,next today',
+  headerToolbarLeft:
+    "multiMonthYear dayGridMonth timeGridWeek timeGridDay listWeek",
+  headerToolbarCenter: "title",
+  headerToolbarRight: "prev,next today",
 };
 
 export const ToolbarHeaderAll2 = Template.bind({});
 ToolbarHeaderAll2.args = {
-  headerToolbarLeft: 'title',
-  headerToolbarCenter: 'multiMonthYear dayGridMonth timeGridWeek timeGridDay listWeek',
-  headerToolbarRight: 'prev,next today',
+  headerToolbarLeft: "title",
+  headerToolbarCenter:
+    "multiMonthYear dayGridMonth timeGridWeek timeGridDay listWeek",
+  headerToolbarRight: "prev,next today",
 };
 
 export const ToolbarHeaderAll3 = Template.bind({});
 ToolbarHeaderAll3.args = {
-  headerToolbarLeft: 'multiMonthYear dayGridMonth timeGridWeek timeGridDay listWeek',
-  headerToolbarCenter: 'prev,next today',
-  headerToolbarRight: 'title',
+  headerToolbarLeft:
+    "multiMonthYear dayGridMonth timeGridWeek timeGridDay listWeek",
+  headerToolbarCenter: "prev,next today",
+  headerToolbarRight: "title",
 };
 
 export const ToolbarHeaderAll4 = Template.bind({});
 ToolbarHeaderAll4.args = {
-  headerToolbarLeft: 'prev,next today',
-  headerToolbarCenter: 'multiMonthYear dayGridMonth timeGridWeek timeGridDay listWeek',
-  headerToolbarRight: 'title',
+  headerToolbarLeft: "prev,next today",
+  headerToolbarCenter:
+    "multiMonthYear dayGridMonth timeGridWeek timeGridDay listWeek",
+  headerToolbarRight: "title",
 };
 
 export const ToolbarHeaderAll5 = Template.bind({});
 ToolbarHeaderAll5.args = {
-  headerToolbarLeft: 'title',
-  headerToolbarCenter: 'prev,next today',
-  headerToolbarRight: 'multiMonthYear dayGridMonth timeGridWeek timeGridDay listWeek',
+  headerToolbarLeft: "title",
+  headerToolbarCenter: "prev,next today",
+  headerToolbarRight:
+    "multiMonthYear dayGridMonth timeGridWeek timeGridDay listWeek",
 };
 
 export const ToolbarHeaderAll6 = Template.bind({});
 ToolbarHeaderAll6.args = {
-  headerToolbarLeft: 'prev,next today',
-  headerToolbarCenter: 'title',
-  headerToolbarRight: 'multiMonthYear dayGridMonth timeGridWeek timeGridDay listWeek',
+  headerToolbarLeft: "prev,next today",
+  headerToolbarCenter: "title",
+  headerToolbarRight:
+    "multiMonthYear dayGridMonth timeGridWeek timeGridDay listWeek",
 };
 
 export const ToolbarHeaderSome = Template.bind({});
 ToolbarHeaderSome.args = {
-  headerToolbarRight: 'dayGridMonth timeGridWeek',
-  headerToolbarCenter: 'title',
-  headerToolbarLeft: 'prev,next'
+  headerToolbarRight: "dayGridMonth timeGridWeek",
+  headerToolbarCenter: "title",
+  headerToolbarLeft: "prev,next",
 };

package/src/components/BaseCard.stories.js

@@ -1,8 +1,8 @@
-import BaseCard from './BaseCard.vue';
-import BaseCardRow from './BaseCardRow.vue';
+import BaseCard from "./BaseCard.vue";
+import BaseCardRow from "./BaseCardRow.vue";
 
 export default {
-  title: 'Layout/BaseCard',
+  title: "Layout/BaseCard",
   component: BaseCard,
   argTypes: {},
 };

package/src/components/BaseCharacterCounter.stories.js

@@ -1,11 +1,11 @@
-import BaseCharacterCounter from './BaseCharacterCounter.vue';
-import BaseInput from '@/components/BaseInput.vue';
+import BaseCharacterCounter from "./BaseCharacterCounter.vue";
+import BaseInput from "@/components/BaseInput.vue";
 
 export default {
-  title: 'Data/BaseCharacterCounter',
+  title: "Data/BaseCharacterCounter",
   component: BaseCharacterCounter,
   args: {
-    text: 'Test',
+    text: "Test",
     max: 100,
     min: 10,
   },
@@ -17,7 +17,7 @@ const Template = (args) => ({
     BaseInput,
   },
   setup() {
-    const text = ref('bla bla');
+    const text = ref("bla bla");
     return { args, text };
   },
   template: `

package/src/components/BaseClipboard.stories.js

@@ -1,8 +1,8 @@
-import BaseClipboard from './BaseClipboard.vue';
-import BaseModalCenter from './BaseModalCenter.vue';
+import BaseClipboard from "./BaseClipboard.vue";
+import BaseModalCenter from "./BaseModalCenter.vue";
 
 export default {
-  title: 'Components/BaseClipboard',
+  title: "Components/BaseClipboard",
   component: BaseClipboard,
   args: {},
   argTypes: {},
@@ -29,7 +29,7 @@ const Template = (args) => ({
 
 export const Demo = Template.bind({});
 Demo.args = {
-  value: '168.192.0.1',
+  value: "168.192.0.1",
 };
 
 const TemplateModal = (args) => ({
@@ -51,5 +51,5 @@ const TemplateModal = (args) => ({
 
 export const Modal = TemplateModal.bind({});
 Modal.args = {
-  value: 'testtest',
-};
+  value: "testtest",
+};

package/src/components/BaseCollapse.stories.js

@@ -1,48 +1,48 @@
-import { method } from 'lodash';
-import BaseCollapse from './BaseCollapse.vue';
+import { method } from "lodash";
+import BaseCollapse from "./BaseCollapse.vue";
 
 export default {
-    title: 'Components/BaseCollapse',
-    component: BaseCollapse,
-    args: {},
-    argTypes: {
-        defaultOpen: {
-            control: { type: 'boolean' },
-        },
-        icon: {
-            control: { type: 'text' },
-        },
-        isOpenIconClass: {
-            control: { type: 'text' },
-        },
-        isCloseIconClass: {
-            control: { type: 'text' },
-        },
-        twIcon: {
-            control: { type: 'text' },
-        },
-        twHeader: {
-            control: { type: 'text' },
-        },
-        twContent: {
-            control: { type: 'text' },
-        },
-        twTitle: {
-            control: { type: 'text' },
-        },
-        iconPosition: {
-            control: { type: 'select' },
-            options: ['left', 'right'],
-        },
+  title: "Components/BaseCollapse",
+  component: BaseCollapse,
+  args: {},
+  argTypes: {
+    defaultOpen: {
+      control: { type: "boolean" },
     },
+    icon: {
+      control: { type: "text" },
+    },
+    isOpenIconClass: {
+      control: { type: "text" },
+    },
+    isCloseIconClass: {
+      control: { type: "text" },
+    },
+    twIcon: {
+      control: { type: "text" },
+    },
+    twHeader: {
+      control: { type: "text" },
+    },
+    twContent: {
+      control: { type: "text" },
+    },
+    twTitle: {
+      control: { type: "text" },
+    },
+    iconPosition: {
+      control: { type: "select" },
+      options: ["left", "right"],
+    },
+  },
 };
 
 const Template = (args) => ({
-    components: { BaseCollapse },
-    setup() {
-        return { args };
-    },
-    template: `
+  components: { BaseCollapse },
+  setup() {
+    return { args };
+  },
+  template: `
     <BaseCollapse v-bind="args" class="mb-1">
         <template #title>
             <h6 class="font-semibold"> Qu'est-ce que le Lorem Ipsum? </h6>
@@ -81,21 +81,20 @@ const Template = (args) => ({
 
 export const Demo = Template.bind({});
 Demo.args = {
-    defaultOpen: false,
+  defaultOpen: false,
 };
 
-
 const CustomHeaderTemplate = (args) => ({
-    components: { BaseCollapse },
-    setup() {
-        return { args };
-    },
-    method: {
-        toggle() {
-            this.defaultOpen = !this.defaultOpen;
-        },
+  components: { BaseCollapse },
+  setup() {
+    return { args };
+  },
+  method: {
+    toggle() {
+      this.defaultOpen = !this.defaultOpen;
     },
-    template: `
+  },
+  template: `
     
     <BaseCollapse v-bind="args" class="mb-3">
         <template #header={toggle}>
@@ -131,39 +130,39 @@ const CustomHeaderTemplate = (args) => ({
     </BaseCollapse>
 
     `,
-    argTypes: {
-        defaultOpen: {
-            control: { type: 'boolean' },
-        },
-        icon: {
-            control: { type: 'text' },
-        },
-        isOpenIconClass: {
-            control: { type: 'text' },
-        },
-        isCloseIconClass: {
-            control: { type: 'text' },
-        },
-        twIcon: {
-            control: { type: 'text' },
-        },
-        twHeader: {
-            control: { type: 'text' },
-        },
-        twContent: {
-            control: { type: 'text' },
-        },
-        twTitle: {
-            control: { type: 'text' },
-        },
-        iconPosition: {
-            control: { type: 'select' },
-            options: ['left', 'right'],
-        },
-    }
+  argTypes: {
+    defaultOpen: {
+      control: { type: "boolean" },
+    },
+    icon: {
+      control: { type: "text" },
+    },
+    isOpenIconClass: {
+      control: { type: "text" },
+    },
+    isCloseIconClass: {
+      control: { type: "text" },
+    },
+    twIcon: {
+      control: { type: "text" },
+    },
+    twHeader: {
+      control: { type: "text" },
+    },
+    twContent: {
+      control: { type: "text" },
+    },
+    twTitle: {
+      control: { type: "text" },
+    },
+    iconPosition: {
+      control: { type: "select" },
+      options: ["left", "right"],
+    },
+  },
 });
 export const CustomHeader = CustomHeaderTemplate.bind({});
 
 CustomHeader.args = {
-    defaultOpen: false,
-};
+  defaultOpen: false,
+};

package/src/components/BaseColor.stories.js

@@ -1,14 +1,14 @@
-import { createFieldStory, sizes } from '../../.storybook/utils';
-import BaseColor from './BaseColor.vue';
-import ShowValue from '../../.storybook/components/ShowValue.vue';
+import { createFieldStory, sizes } from "../../.storybook/utils";
+import BaseColor from "./BaseColor.vue";
+import ShowValue from "../../.storybook/components/ShowValue.vue";
 
 export default {
-  title: 'Form/BaseColor',
+  title: "Form/BaseColor",
   component: BaseColor,
   decorators: [() => ({ template: '<div class="mb-36"><story/></div>' })],
   argTypes: {
     size: {
-      control: { type: 'select' },
+      control: { type: "select" },
       options: sizes,
     },
   },
@@ -42,7 +42,7 @@ Multiple.args = {
 export const Disabled = Template.bind({});
 Disabled.args = {
   disabled: true,
-  modelValue: '#16a34a',
+  modelValue: "#16a34a",
 };
 
 export const Sizes = (args) => ({
@@ -61,6 +61,6 @@ export const Sizes = (args) => ({
 
 export const Field = createFieldStory({
   component: BaseColor,
-  componentName: 'BaseColor',
-  label: 'Choose your favorite color',
+  componentName: "BaseColor",
+  label: "Choose your favorite color",
 });

package/src/components/BaseContainer.stories.js

@@ -1,13 +1,13 @@
-import BaseContainer from './BaseContainer.vue';
+import BaseContainer from "./BaseContainer.vue";
 
 export default {
-  title: 'Layout/BaseContainer',
-  description: 'Lorem',
+  title: "Layout/BaseContainer",
+  description: "Lorem",
   component: BaseContainer,
   argTypes: {
     size: {
-      control: { type: 'select' },
-      options: ['lg', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl', '7xl', 'full'],
+      control: { type: "select" },
+      options: ["lg", "xl", "2xl", "3xl", "4xl", "5xl", "6xl", "7xl", "full"],
     },
   },
 };
@@ -30,5 +30,5 @@ const Template = (args) => ({
 export const Demo = Template.bind({});
 
 Demo.args = {
-  size: '7xl',
+  size: "7xl",
 };

package/src/components/BaseCounter.stories.js

@@ -1,16 +1,16 @@
-import BaseCounter from './BaseCounter.vue';
+import BaseCounter from "./BaseCounter.vue";
 
 export default {
-  title: 'Data/BaseCounter',
+  title: "Data/BaseCounter",
   component: BaseCounter,
   argTypes: {
     color: {
-      control: { type: 'select' },
-      options: ['primary', 'secondary', 'danger', 'dark', 'light', 'white'],
+      control: { type: "select" },
+      options: ["primary", "secondary", "danger", "dark", "light", "white"],
     },
     size: {
-      control: { type: 'select' },
-      options: ['xs', 'sm', 'base'],
+      control: { type: "select" },
+      options: ["xs", "sm", "base"],
     },
   },
 };
@@ -33,15 +33,15 @@ Demo.args = {
 
 export const SizeXS = Template.bind({});
 SizeXS.args = {
-  size: 'xs',
+  size: "xs",
 };
 
 export const SizeSM = Template.bind({});
 SizeSM.args = {
-  size: 'sm',
+  size: "sm",
 };
 
 export const SizeMD = Template.bind({});
 SizeMD.args = {
-  size: 'md',
+  size: "md",
 };