sprintify-ui 0.8.34 → 0.8.37

package/src/components/BasePassword.stories.js

@@ -1,14 +1,14 @@
-import { sizes } from '../../.storybook/utils';
-import BasePassword from './BasePassword.vue';
-import { createFieldStory } from '@/../.storybook/utils';
+import { sizes } from "../../.storybook/utils";
+import BasePassword from "./BasePassword.vue";
+import { createFieldStory } from "@/../.storybook/utils";
 
 export default {
-  title: 'Form/BasePassword',
+  title: "Form/BasePassword",
   component: BasePassword,
   args: {},
   argTypes: {
     size: {
-      control: { type: 'select' },
+      control: { type: "select" },
       options: sizes,
     },
   },
@@ -19,7 +19,7 @@ const Template = (args) => ({
     BasePassword,
   },
   setup() {
-    const value = ref('');
+    const value = ref("");
     return { args, value };
   },
   template: `
@@ -32,22 +32,21 @@ const Template = (args) => ({
 export const Demo = Template.bind({});
 Demo.args = {
   required: true,
-  placeholder: 'Enter your password',
+  placeholder: "Enter your password",
 };
 
 export const Disabled = Template.bind({});
 Disabled.args = {
   disabled: true,
-  placeholder: 'Enter your password',
+  placeholder: "Enter your password",
 };
 
 export const Field = createFieldStory({
   component: BasePassword,
-  componentName: 'BasePassword',
-  label: 'Password',
+  componentName: "BasePassword",
+  label: "Password",
 });
 
-
 const FocusTemplate = (args) => ({
   components: { BasePassword },
   setup() {
@@ -78,4 +77,4 @@ const TemplateSizes = (args) => ({
 
 export const Sizes = TemplateSizes.bind({});
 
-export const Focus = FocusTemplate.bind({});
+export const Focus = FocusTemplate.bind({});

package/src/components/BaseProgressCircle.stories.js

@@ -1,10 +1,10 @@
-import BaseProgressCircle from './BaseProgressCircle.vue';
+import BaseProgressCircle from "./BaseProgressCircle.vue";
 
 export default {
-  title: 'Components/BaseProgressCircle',
+  title: "Components/BaseProgressCircle",
   component: BaseProgressCircle,
   args: {
-    class: 'text-primary-500',
+    class: "text-primary-500",
     radius: 100,
     stroke: 5,
     progress: 0.6,

package/src/components/BaseRadioGroup.stories.js

@@ -1,15 +1,15 @@
-import { options } from '../../.storybook/utils';
-import BaseRadioGroup from './BaseRadioGroup.vue';
-import { createFieldStory } from '@/../.storybook/utils';
-import ShowValue from '../../.storybook/components/ShowValue.vue';
+import { options } from "../../.storybook/utils";
+import BaseRadioGroup from "./BaseRadioGroup.vue";
+import { createFieldStory } from "@/../.storybook/utils";
+import ShowValue from "../../.storybook/components/ShowValue.vue";
 
 export default {
-  title: 'Form/BaseRadioGroup',
+  title: "Form/BaseRadioGroup",
   component: BaseRadioGroup,
   argTypes: {},
   args: {
-    labelKey: 'label',
-    valueKey: 'value',
+    labelKey: "label",
+    valueKey: "value",
     options: options,
   },
   decorators: [() => ({ template: '<div class="mb-36"><story/></div>' })],
@@ -20,7 +20,7 @@ const Template = (args) => ({
   setup() {
     const value = ref(options[0].value);
     function onSubmit() {
-      alert('submit');
+      alert("submit");
     }
     return { args, value, onSubmit };
   },
@@ -52,11 +52,11 @@ export const SlotOption = (args) => ({
     const value = ref(null);
 
     const options = [
-      { label: 'Red', value: 'red' },
-      { label: 'Blue', value: 'blue' },
-      { label: 'Green', value: 'green' },
-      { label: 'Black', value: 'black' },
-      { label: 'Gray', value: 'gray' },
+      { label: "Red", value: "red" },
+      { label: "Blue", value: "blue" },
+      { label: "Green", value: "green" },
+      { label: "Black", value: "black" },
+      { label: "Gray", value: "gray" },
     ];
 
     return { value, options, args };
@@ -82,6 +82,6 @@ export const SlotOption = (args) => ({
 
 export const Field = createFieldStory({
   component: BaseRadioGroup,
-  componentName: 'BaseRadioGroup',
-  label: 'Choose your character',
+  componentName: "BaseRadioGroup",
+  label: "Choose your character",
 });

package/src/components/BaseReadMore.stories.js

@@ -1,8 +1,8 @@
-import BaseReadMore from './BaseReadMore.vue';
-import BaseContainer from './BaseContainer.vue';
+import BaseReadMore from "./BaseReadMore.vue";
+import BaseContainer from "./BaseContainer.vue";
 
 export default {
-  title: 'Components/BaseReadMore',
+  title: "Components/BaseReadMore",
   component: BaseReadMore,
   args: {},
 };

package/src/components/BaseRichText.stories.js

@@ -1,20 +1,20 @@
-import BaseRichText from './BaseRichText.vue';
-import ShowValue from '@/../.storybook/components/ShowValue.vue';
-import { createFieldStory } from '@/../.storybook/utils';
-import { sizes } from '../../.storybook/utils';
+import BaseRichText from "./BaseRichText.vue";
+import ShowValue from "@/../.storybook/components/ShowValue.vue";
+import { createFieldStory } from "@/../.storybook/utils";
+import { sizes } from "../../.storybook/utils";
 
 const toolbarOptions = [
-  'full',
-  'essential',
-  'minimal',
-  ['bold', 'italic', 'underline', 'link'],
-  ['bold', 'italic', 'underline', 'strike'],
-  ['blockquote', 'code-block'],
-  ['clean'], // remove formatting button
+  "full",
+  "essential",
+  "minimal",
+  ["bold", "italic", "underline", "link"],
+  ["bold", "italic", "underline", "strike"],
+  ["blockquote", "code-block"],
+  ["clean"], // remove formatting button
 ];
 
 export default {
-  title: 'Form/BaseRichText',
+  title: "Form/BaseRichText",
   component: BaseRichText,
   decorators: [
     (story) => ({
@@ -26,19 +26,19 @@ export default {
     }),
   ],
   args: {
-    placeholder: 'Describe your complete life in 4 sentences...',
+    placeholder: "Describe your complete life in 4 sentences...",
   },
   argTypes: {
     size: {
-      control: { type: 'select' },
+      control: { type: "select" },
       options: sizes,
     },
     theme: {
-      control: { type: 'select' },
-      options: ['snow', 'bubble', ''],
+      control: { type: "select" },
+      options: ["snow", "bubble", ""],
     },
     toolbar: {
-      control: { type: 'select' },
+      control: { type: "select" },
       options: toolbarOptions,
     },
   },
@@ -60,48 +60,48 @@ export const Demo = Template.bind({});
 
 export const Basic = Template.bind({});
 Basic.args = {
-  placeholder: 'Describe your complete life in 4 sentences...',
+  placeholder: "Describe your complete life in 4 sentences...",
 };
 
 export const FullToolbar = Template.bind({});
 FullToolbar.args = {
-  toolbar: 'full',
-  placeholder: 'Describe your complete life in 4 sentences...',
+  toolbar: "full",
+  placeholder: "Describe your complete life in 4 sentences...",
 };
 
 export const EssentialToolbar = Template.bind({});
 EssentialToolbar.args = {
-  toolbar: 'essential',
-  placeholder: 'Describe your complete life in 4 sentences...',
+  toolbar: "essential",
+  placeholder: "Describe your complete life in 4 sentences...",
 };
 
 export const MinimalToolbar = Template.bind({});
 MinimalToolbar.args = {
-  toolbar: 'minimal',
-  placeholder: 'Describe your complete life in 4 sentences...',
+  toolbar: "minimal",
+  placeholder: "Describe your complete life in 4 sentences...",
 };
 
 export const SnowTheme = Template.bind({});
 SnowTheme.args = {
-  theme: 'snow',
-  placeholder: 'Describe your complete life in 4 sentences...',
+  theme: "snow",
+  placeholder: "Describe your complete life in 4 sentences...",
 };
 
 export const BubbleTheme = Template.bind({});
 BubbleTheme.args = {
-  theme: 'bubble',
-  placeholder: 'Describe your complete life in 4 sentences...',
+  theme: "bubble",
+  placeholder: "Describe your complete life in 4 sentences...",
 };
 
 export const Disabled = Template.bind({});
 Disabled.args = {
-  modelValue: 'Lorem ipsum...',
+  modelValue: "Lorem ipsum...",
   disabled: true,
-  placeholder: '',
+  placeholder: "",
 };
 
 export const Field = createFieldStory({
   component: BaseRichText,
-  componentName: 'BaseRichText',
-  label: 'Name',
+  componentName: "BaseRichText",
+  label: "Name",
 });

package/src/components/BaseSelect.stories.js

@@ -1,15 +1,15 @@
-import BaseSelect from './BaseSelect.vue';
-import BaseInputLabel from './BaseInputLabel.vue';
-import ShowValue from '../../.storybook/components/ShowValue.vue';
-import { createFieldStory, sizes } from '../../.storybook/utils.js';
-import { options } from '../../.storybook/utils';
-import { computed } from 'vue';
+import BaseSelect from "./BaseSelect.vue";
+import BaseInputLabel from "./BaseInputLabel.vue";
+import ShowValue from "../../.storybook/components/ShowValue.vue";
+import { createFieldStory, sizes } from "../../.storybook/utils.js";
+import { options } from "../../.storybook/utils";
+import { computed } from "vue";
 
 export default {
-  title: 'Form/BaseSelect',
+  title: "Form/BaseSelect",
   component: BaseSelect,
   args: {
-    class: 'w-full',
+    class: "w-full",
   },
 };
 
@@ -21,7 +21,7 @@ const Template = (args) => ({
   },
   setup() {
     function onSubmit() {
-      alert('submit');
+      alert("submit");
     }
     // To test, you should try the following scenarios
     // - valid (ex: 'javascript')
@@ -34,7 +34,7 @@ const Template = (args) => ({
 
     // For optional, make sure the default option is selected
     // For required, try to submit, it should be prevented
-    const value = ref('test');
+    const value = ref("test");
 
     // Test if dynamically added options are available & selected
     const showTest = ref(false);
@@ -62,19 +62,19 @@ const Template = (args) => ({
 export const Optional = Template.bind({});
 Optional.args = {
   required: false,
-  placeholder: 'I dont like programing languages',
+  placeholder: "I dont like programing languages",
 };
 
 export const Required = Template.bind({});
 Required.args = {
   required: true,
-  placeholder: 'Choose a language',
+  placeholder: "Choose a language",
 };
 
 export const Disabled = Template.bind({});
 Disabled.args = {
   required: true,
-  placeholder: 'Choose a language',
+  placeholder: "Choose a language",
   disabled: true,
 };
 
@@ -97,7 +97,7 @@ export const Sizes = TemplateSizes.bind({});
 export const OptionsAsProps = (args) => ({
   components: { BaseSelect, ShowValue },
   setup() {
-    const value = ref('test');
+    const value = ref("test");
     const showTest = ref(false);
 
     setTimeout(() => {
@@ -108,7 +108,7 @@ export const OptionsAsProps = (args) => ({
       if (!showTest.value) {
         return options;
       }
-      return [...options, { label: 'Test', value: 'test' }];
+      return [...options, { label: "Test", value: "test" }];
     });
     return { args, options2, value };
   },
@@ -118,8 +118,8 @@ export const OptionsAsProps = (args) => ({
 
 OptionsAsProps.args = {
   required: true,
-  labelKey: 'label',
-  valueKey: 'label',
+  labelKey: "label",
+  valueKey: "label",
 };
 
 const CustomClassesT = (args) => ({
@@ -141,11 +141,11 @@ export const CustomClasses = CustomClassesT.bind({});
 
 export const Field = createFieldStory({
   component: BaseSelect,
-  componentName: 'BaseSelect',
+  componentName: "BaseSelect",
   template: `<BaseSelect v-model="value" v-bind="args" class="w-full">
   <option value="javascript">JavaScript</option>
   <option value="typescript">Typescript</option>
   <option value="golang">Golang</option>
 </BaseSelect>`,
-  label: 'Choose your favorite programing language',
+  label: "Choose your favorite programing language",
 });

package/src/components/BaseShortcut.stories.js

@@ -1,19 +1,19 @@
-import BaseShortcut from './BaseShortcut.vue';
-import { palette } from '@/utils/colors';
+import BaseShortcut from "./BaseShortcut.vue";
+import { palette } from "@/utils/colors";
 
-const colors = [...Object.keys(palette), '#ff0000', '#dbeafe'];
+const colors = [...Object.keys(palette), "#ff0000", "#dbeafe"];
 
 export default {
-  title: 'Components/BaseShortcut',
+  title: "Components/BaseShortcut",
   component: BaseShortcut,
   argTypes: {
     color: {
-      control: { type: 'select' },
+      control: { type: "select" },
       options: colors,
     },
     contrast: {
-      control: { type: 'select' },
-      options: ['low', 'high'],
+      control: { type: "select" },
+      options: ["low", "high"],
     },
   },
 };
@@ -31,10 +31,10 @@ const Template = (args) => ({
 
 export const Basic = Template.bind({});
 Basic.args = {
-  to: '/restaurants',
-  title: 'Basic shortcut',
-  icon: 'heroicons:user-solid',
-  color: 'blue',
+  to: "/restaurants",
+  title: "Basic shortcut",
+  icon: "heroicons:user-solid",
+  color: "blue",
 };
 
 export const Colors = (args) => ({
@@ -51,12 +51,12 @@ export const Colors = (args) => ({
 });
 
 Colors.args = {
-  contrast: 'high',
-  to: '/restaurants',
-  title: 'Contrast example',
+  contrast: "high",
+  to: "/restaurants",
+  title: "Contrast example",
   description:
-    'Le lorem ipsum est, en imprimerie, une suite de mots sans signification utilisée à titre provisoire pour calibrer une mise en page',
-  linkText: 'Open app',
+    "Le lorem ipsum est, en imprimerie, une suite de mots sans signification utilisée à titre provisoire pour calibrer une mise en page",
+  linkText: "Open app",
 };
 
 export const Contrast = (args) => ({
@@ -73,20 +73,20 @@ export const Contrast = (args) => ({
 });
 
 Contrast.args = {
-  contrast: 'low',
-  to: '/restaurants',
-  title: 'Contrast example',
+  contrast: "low",
+  to: "/restaurants",
+  title: "Contrast example",
   description:
-    'Le lorem ipsum est, en imprimerie, une suite de mots sans signification utilisée à titre provisoire pour calibrer une mise en page',
-  linkText: 'Open app',
+    "Le lorem ipsum est, en imprimerie, une suite de mots sans signification utilisée à titre provisoire pour calibrer une mise en page",
+  linkText: "Open app",
 };
 
 export const Href = Template.bind({});
 Href.args = {
-  href: 'https://www.google.com',
-  title: 'Basic shortcut',
-  icon: 'heroicons:user-solid',
-  color: 'blue',
+  href: "https://www.google.com",
+  title: "Basic shortcut",
+  icon: "heroicons:user-solid",
+  color: "blue",
 };
 
 export const Action = Template.bind({});
@@ -94,7 +94,7 @@ Action.args = {
   action() {
     alert(1);
   },
-  title: 'Basic shortcut',
-  icon: 'heroicons:user-solid',
-  color: 'blue',
+  title: "Basic shortcut",
+  icon: "heroicons:user-solid",
+  color: "blue",
 };

package/src/components/BaseSideNavigation.stories.js

@@ -1,12 +1,12 @@
-import BaseSideNavigation from './BaseSideNavigation.vue';
-import BaseSideNavigationItem from './BaseSideNavigationItem.vue';
-import BaseContainer from './BaseContainer.vue';
-import BaseCard from './BaseCard.vue';
-import BaseCardRow from './BaseCardRow.vue';
-import BaseCounter from './BaseCounter.vue';
+import BaseSideNavigation from "./BaseSideNavigation.vue";
+import BaseSideNavigationItem from "./BaseSideNavigationItem.vue";
+import BaseContainer from "./BaseContainer.vue";
+import BaseCard from "./BaseCard.vue";
+import BaseCardRow from "./BaseCardRow.vue";
+import BaseCounter from "./BaseCounter.vue";
 
 export default {
-  title: 'Navigation/BaseSideNavigation',
+  title: "Navigation/BaseSideNavigation",
   component: BaseSideNavigation,
   args: {},
 };
@@ -66,20 +66,20 @@ 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",
 };
 
 export const SizeLG = Template.bind({});
 SizeLG.args = {
-  size: 'lg',
+  size: "lg",
 };

package/src/components/BaseSkeleton.stories.js

@@ -1,8 +1,8 @@
-import BaseSkeleton from './BaseSkeleton.vue';
-import BaseContainer from './BaseContainer.vue';
+import BaseSkeleton from "./BaseSkeleton.vue";
+import BaseContainer from "./BaseContainer.vue";
 
 export default {
-  title: 'Components/BaseSkeleton',
+  title: "Components/BaseSkeleton",
   component: BaseSkeleton,
   args: {},
 };

package/src/components/BaseStatistic.stories.js

@@ -1,12 +1,12 @@
-import BaseStatistic from './BaseStatistic.vue';
+import BaseStatistic from "./BaseStatistic.vue";
 
 export default {
-  title: 'Data/BaseStatistic',
+  title: "Data/BaseStatistic",
   component: BaseStatistic,
   argTypes: {
     trend: {
-      control: { type: 'select' },
-      options: ['up', 'down', null],
+      control: { type: "select" },
+      options: ["up", "down", null],
     },
   },
 };
@@ -24,28 +24,28 @@ const Template = (args) => ({
 
 export const Simple = Template.bind({});
 Simple.args = {
-  primaryValue: '$7,552.90',
+  primaryValue: "$7,552.90",
 };
 
 export const TrendUp = Template.bind({});
 TrendUp.args = {
-  primaryValue: '$15,289.63',
-  secondaryValue: '15%',
-  trend: 'up',
+  primaryValue: "$15,289.63",
+  secondaryValue: "15%",
+  trend: "up",
 };
 
 export const TrendDown = Template.bind({});
 TrendDown.args = {
-  primaryValue: '$10,123.25',
-  secondaryValue: '-22%',
-  trend: 'down',
+  primaryValue: "$10,123.25",
+  secondaryValue: "-22%",
+  trend: "down",
 };
 
 export const Complex = Template.bind({});
 Complex.args = {
-  label: 'Complex example',
-  primaryValue: '$10,123.25',
-  secondaryValue: '-22%',
-  trend: 'down',
-  caption: 'Since last week',
+  label: "Complex example",
+  primaryValue: "$10,123.25",
+  secondaryValue: "-22%",
+  trend: "down",
+  caption: "Since last week",
 };