sprintify-ui 0.8.35 → 0.8.38

package/src/components/BaseBelongsTo.stories.js

@@ -1,21 +1,21 @@
-import BaseBelongsTo from './BaseBelongsTo.vue';
-import ShowValue from '@/../.storybook/components/ShowValue.vue';
-import { options } from '@/../.storybook/utils';
-import { createFieldStory, sizes } from '../../.storybook/utils';
+import BaseBelongsTo from "./BaseBelongsTo.vue";
+import ShowValue from "@/../.storybook/components/ShowValue.vue";
+import { options } from "@/../.storybook/utils";
+import { createFieldStory, sizes } from "../../.storybook/utils";
 
 export default {
-  title: 'Form/BaseBelongsTo',
+  title: "Form/BaseBelongsTo",
   component: BaseBelongsTo,
   argTypes: {
     size: {
-      control: { type: 'select' },
+      control: { type: "select" },
       options: sizes,
     },
   },
   args: {
     options: options,
-    field: 'label',
-    primaryKey: 'value',
+    field: "label",
+    primaryKey: "value",
   },
   decorators: [() => ({ template: '<div class="mb-36"><story/></div>' })],
 };
@@ -38,7 +38,7 @@ Demo.args = {};
 export const AlwaysShowDropdown = Template.bind({});
 AlwaysShowDropdown.args = {
   inline: true,
-  dropdownShow: 'always',
+  dropdownShow: "always",
 };
 
 export const NoFocus = Template.bind({});
@@ -54,7 +54,7 @@ Inline.args = {
 export const ShowEmptyOption = Template.bind({});
 ShowEmptyOption.args = {
   showEmptyOption: true,
-  emptyOptionLabel: 'No Jedi',
+  emptyOptionLabel: "No Jedi",
 };
 
 export const Sizes = (args) => ({
@@ -74,8 +74,8 @@ export const Sizes = (args) => ({
 export const Disabled = Template.bind({});
 Disabled.args = {
   currentModel: options[0],
-  primaryKey: 'value',
-  field: 'label',
+  primaryKey: "value",
+  field: "label",
   disabled: true,
 };
 
@@ -166,19 +166,19 @@ export const WithSelect = (args) => {
 
       const select = {
         options: [
-          { label: 'All', value: 'all' },
-          { label: 'Sith', value: 'sith' },
-          { label: 'Jedi', value: 'jedi' },
+          { label: "All", value: "all" },
+          { label: "Sith", value: "sith" },
+          { label: "Jedi", value: "jedi" },
         ],
-        labelKey: 'label',
-        valueKey: 'value',
+        labelKey: "label",
+        valueKey: "value",
         onChange: (option) => {
           selected.value = option.value;
         },
       };
 
       const options2 = computed(() => {
-        if (selected.value == 'all' || !selected.value) {
+        if (selected.value == "all" || !selected.value) {
           return options;
         }
         return options.filter((option) => option.type === selected.value);
@@ -208,6 +208,6 @@ export const WithSelect = (args) => {
 
 export const Field = createFieldStory({
   component: BaseBelongsTo,
-  componentName: 'BaseBelongsTo',
-  label: 'Article',
+  componentName: "BaseBelongsTo",
+  label: "Article",
 });

package/src/components/BaseBelongsToFetch.stories.js

@@ -1,20 +1,20 @@
-import BaseBelongsToFetch from './BaseBelongsToFetch.vue';
-import ShowValue from '@/../.storybook/components/ShowValue.vue';
-import { createFieldStory, sizes } from '../../.storybook/utils';
+import BaseBelongsToFetch from "./BaseBelongsToFetch.vue";
+import ShowValue from "@/../.storybook/components/ShowValue.vue";
+import { createFieldStory, sizes } from "../../.storybook/utils";
 
 export default {
-  title: 'Form/BaseBelongsToFetch',
+  title: "Form/BaseBelongsToFetch",
   component: BaseBelongsToFetch,
   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(id) {
       return `https://faker.witify.io/api/todos/${id}`;
     },
@@ -40,7 +40,7 @@ Demo.args = {};
 export const AlwaysShowDropdown = Template.bind({});
 AlwaysShowDropdown.args = {
   inline: true,
-  dropdownShow: 'always',
+  dropdownShow: "always",
 };
 
 export const NoFocus = Template.bind({});
@@ -56,7 +56,7 @@ Inline.args = {
 export const ShowEmptyOption = Template.bind({});
 ShowEmptyOption.args = {
   showEmptyOption: true,
-  emptyOptionLabel: 'No Jedi',
+  emptyOptionLabel: "No Jedi",
 };
 
 export const Sizes = (args) => ({
@@ -168,27 +168,23 @@ export const WithSelect = (args) => {
 
       const select = {
         options: [
-          { label: 'All', value: 'all' },
-          { label: 'Personal', value: 'personal' },
-          { label: 'Work', value: 'work' },
-          { label: 'Family', value: 'family' },
+          { label: "All", value: "all" },
+          { label: "Personal", value: "personal" },
+          { label: "Work", value: "work" },
+          { label: "Family", value: "family" },
         ],
-        labelKey: 'label',
-        valueKey: 'value',
+        labelKey: "label",
+        valueKey: "value",
         onChange: (option) => {
           selected.value = option.value;
         },
       };
 
       const url = computed(() => {
-        if (selected.value == 'all' || !selected.value) {
-          return 'https://faker.witify.io/api/todos';
+        if (selected.value == "all" || !selected.value) {
+          return "https://faker.witify.io/api/todos";
         }
-        return (
-          'https://faker.witify.io/api/todos' +
-          '?type=' +
-          selected.value
-        );
+        return "https://faker.witify.io/api/todos" + "?type=" + selected.value;
       });
 
       return { args, value, url, selected, select };
@@ -215,6 +211,6 @@ export const WithSelect = (args) => {
 
 export const Field = createFieldStory({
   component: BaseBelongsToFetch,
-  componentName: 'BaseBelongsToFetch',
-  label: 'Article',
+  componentName: "BaseBelongsToFetch",
+  label: "Article",
 });

package/src/components/BaseBoolean.stories.js

@@ -1,11 +1,11 @@
-import BaseBoolean from './BaseBoolean.vue';
+import BaseBoolean from "./BaseBoolean.vue";
 
 export default {
-  title: 'Data/BaseBoolean',
+  title: "Data/BaseBoolean",
   component: BaseBoolean,
   argTypes: {
     modelValue: {
-      control: { type: 'boolean' },
+      control: { type: "boolean" },
     },
   },
 };

package/src/components/BaseBreadcrumbs.stories.js

@@ -1,33 +1,33 @@
-import BaseBreadcrumbs from './BaseBreadcrumbs.vue';
+import BaseBreadcrumbs from "./BaseBreadcrumbs.vue";
 
 const breadcrumbs = [
   {
-    label: 'Home',
-    icon: 'heroicons:home-20-solid',
-    to: '/',
+    label: "Home",
+    icon: "heroicons:home-20-solid",
+    to: "/",
   },
   {
-    label: 'Users',
-    to: '/users',
+    label: "Users",
+    to: "/users",
   },
   {
-    label: 'John Doe',
-    to: '/users/1',
+    label: "John Doe",
+    to: "/users/1",
   },
   {
-    label: 'Very long title this is a very long title that will be truncated',
-    to: '/users/1/settings',
+    label: "Very long title this is a very long title that will be truncated",
+    to: "/users/1/settings",
   },
 ];
 
 export default {
-  title: 'Layout/BaseBreadcrumbs',
+  title: "Layout/BaseBreadcrumbs",
   component: BaseBreadcrumbs,
   argTypes: {
     size: {
-      control: { type: 'select' },
-      options: ['sm', 'md']
-    }
+      control: { type: "select" },
+      options: ["sm", "md"],
+    },
   },
   args: {
     breadcrumbs: breadcrumbs,

package/src/components/BaseButton.stories.js

@@ -1,52 +1,52 @@
-import { sizes } from '../../.storybook/utils';
-import BaseButton from './BaseButton.vue';
+import { sizes } from "../../.storybook/utils";
+import BaseButton from "./BaseButton.vue";
 
 const colors = [
-  '#6fc3fc',
-  '#ff00ff',
-  '#111111',
-  '#f1f1f1',
-  'primary',
-  'secondary',
-  'secondary-outline',
-  'success',
-  'success-outline',
-  'danger',
-  'danger-outline',
-  'warning',
-  'warning-outline',
-  'info',
-  'info-outline',
-  'white',
-  'black',
-  'slate-100',
-  'slate-100-outline',
-  'slate-200',
-  'slate-200-outline',
+  "#6fc3fc",
+  "#ff00ff",
+  "#111111",
+  "#f1f1f1",
+  "primary",
+  "secondary",
+  "secondary-outline",
+  "success",
+  "success-outline",
+  "danger",
+  "danger-outline",
+  "warning",
+  "warning-outline",
+  "info",
+  "info-outline",
+  "white",
+  "black",
+  "slate-100",
+  "slate-100-outline",
+  "slate-200",
+  "slate-200-outline",
 ];
 
 export default {
-  title: 'Components/BaseButton',
+  title: "Components/BaseButton",
   component: BaseButton,
   argTypes: {
     class: {
-      type: 'string',
+      type: "string",
     },
     icon: {
-      type: 'string',
+      type: "string",
     },
     iconPosition: {
-      control: { type: 'select' },
-      options: ['start', 'end'],
+      control: { type: "select" },
+      options: ["start", "end"],
     },
     color: {
-      control: { type: 'select' },
+      control: { type: "select" },
       options: colors,
     },
     size: {
-      control: { type: 'select' },
+      control: { type: "select" },
       options: sizes,
-    }
+    },
   },
 };
 
@@ -64,7 +64,7 @@ const Template = (args) => ({
 
 export const Demo = Template.bind({});
 Demo.args = {
-  class: '',
+  class: "",
 };
 
 export const Loading = Template.bind({});
@@ -115,6 +115,6 @@ const IconTemplate = (args) => ({
 
 export const Icon = IconTemplate.bind({});
 Icon.args = {
-  icon: 'mdi:plus',
-  color: 'primary',
+  icon: "mdi:plus",
+  color: "primary",
 };

package/src/components/BaseButton.vue

@@ -9,6 +9,9 @@
     :disabled="disabled"
     :type="type"
     @click="$emit('click', $event)"
+    @mouseenter="$emit('mouseenter', $event)"
+    @mouseover="$emit('mouseover', $event)"
+    @mouseleave="$emit('mouseleave', $event)"
   >
     <div
       :class="containerClass"
@@ -109,7 +112,7 @@ const props = withDefaults(defineProps<{
   to: undefined,
 });
 
-defineEmits(['click']);
+defineEmits(['click', 'mouseover', 'mouseleave', 'mouseenter']);
 
 const sizeInternal = computed(() => {
 

package/src/components/BaseButtonGroup.stories.js

@@ -1,23 +1,23 @@
-import { createFieldStory, options, sizes } from '../../.storybook/utils';
-import BaseButtonGroup from './BaseButtonGroup.vue';
-import ShowValue from '../../.storybook/components/ShowValue.vue';
+import { createFieldStory, options, sizes } from "../../.storybook/utils";
+import BaseButtonGroup from "./BaseButtonGroup.vue";
+import ShowValue from "../../.storybook/components/ShowValue.vue";
 
 export default {
-  title: 'Form/BaseButtonGroup',
+  title: "Form/BaseButtonGroup",
   component: BaseButtonGroup,
   argTypes: {
     spacing: {
-      control: { type: 'select' },
-      options: ['none', 'default'],
+      control: { type: "select" },
+      options: ["none", "default"],
     },
     size: {
-      control: { type: 'select' },
+      control: { type: "select" },
       options: sizes,
     },
   },
   args: {
-    labelKey: 'label',
-    valueKey: 'value',
+    labelKey: "label",
+    valueKey: "value",
     options: options,
   },
   decorators: [() => ({ template: '<div class="mb-36"><story/></div>' })],
@@ -51,12 +51,12 @@ Multiple.args = {
 export const Disabled = Template.bind({});
 Disabled.args = {
   disabled: true,
-  modelValue: { label: 'Dark Maul', value: 'darth_maul' },
+  modelValue: { label: "Dark Maul", value: "darth_maul" },
 };
 
 export const NoSpace = Template.bind({});
 NoSpace.args = {
-  spacing: 'none',
+  spacing: "none",
 };
 
 export const SlotOption = (args) => ({
@@ -65,11 +65,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 };
@@ -109,6 +109,6 @@ export const Sizes = (args) => ({
 
 export const Field = createFieldStory({
   component: BaseButtonGroup,
-  componentName: 'BaseButtonGroup',
-  label: 'Choose your Jedi ou Sith',
+  componentName: "BaseButtonGroup",
+  label: "Choose your Jedi ou Sith",
 });