sprintify-ui 0.8.35 → 0.8.38

package/src/components/BaseAddressForm.stories.js

@@ -1,35 +1,35 @@
-import BaseAddressForm from './BaseAddressForm.vue';
-import ShowValue from '../../.storybook/components/ShowValue.vue';
-import { sizes } from '../../.storybook/utils';
+import BaseAddressForm from "./BaseAddressForm.vue";
+import ShowValue from "../../.storybook/components/ShowValue.vue";
+import { sizes } from "../../.storybook/utils";
 
 export default {
-  title: 'Form/BaseAddressForm',
+  title: "Form/BaseAddressForm",
   component: BaseAddressForm,
   argTypes: {
     size: {
-      control: { type: 'select' },
+      control: { type: "select" },
       options: sizes,
     },
   },
   args: {
     countries: [
-      { name: 'United States', id: 'us' },
-      { name: 'Canada', id: 'ca' },
-      { name: 'Mexico', id: 'mx' },
+      { name: "United States", id: "us" },
+      { name: "Canada", id: "ca" },
+      { name: "Mexico", id: "mx" },
     ],
     regions: [
-      { name: 'Alabama', id: 'us-al', country_id: 'us' },
-      { name: 'Alaska', id: 'us-ak', country_id: 'us' },
-      { name: 'Arizona', id: 'us-az', country_id: 'us' },
-      { name: 'Alberta', id: 'ca-ab', country_id: 'ca' },
-      { name: 'British Columbia', id: 'ca-bc', country_id: 'ca' },
-      { name: 'Manitoba', id: 'ca-mb', country_id: 'ca' },
-      { name: 'Nova Scotia', id: 'ca-ns', country_id: 'ca' },
-      { name: 'Ontario', id: 'ca-on', country_id: 'ca' },
-      { name: 'Prince Edward Island', id: 'ca-pe', country_id: 'ca' },
-      { name: 'Quebec', id: 'ca-qc', country_id: 'ca' },
-      { name: 'Saskatchewan', id: 'ca-sk', country_id: 'ca' },
-      { name: 'Northwest Territories', id: 'ca-nt', country_id: 'ca' },
+      { name: "Alabama", id: "us-al", country_id: "us" },
+      { name: "Alaska", id: "us-ak", country_id: "us" },
+      { name: "Arizona", id: "us-az", country_id: "us" },
+      { name: "Alberta", id: "ca-ab", country_id: "ca" },
+      { name: "British Columbia", id: "ca-bc", country_id: "ca" },
+      { name: "Manitoba", id: "ca-mb", country_id: "ca" },
+      { name: "Nova Scotia", id: "ca-ns", country_id: "ca" },
+      { name: "Ontario", id: "ca-on", country_id: "ca" },
+      { name: "Prince Edward Island", id: "ca-pe", country_id: "ca" },
+      { name: "Quebec", id: "ca-qc", country_id: "ca" },
+      { name: "Saskatchewan", id: "ca-sk", country_id: "ca" },
+      { name: "Northwest Territories", id: "ca-nt", country_id: "ca" },
     ],
   },
 };
@@ -39,12 +39,12 @@ const Template = (args) => ({
   setup() {
     const form = ref({
       shipping_address: {
-        address_1: '333 rue Sherbrooke Est',
-        address_2: 'Suite 100',
-        city: 'Montreal',
-        country: 'ca',
-        region: 'ca-qc',
-        postal_code: 'H2X 4E3',
+        address_1: "333 rue Sherbrooke Est",
+        address_2: "Suite 100",
+        city: "Montreal",
+        country: "ca",
+        region: "ca-qc",
+        postal_code: "H2X 4E3",
       },
     });
     return { args, form };
@@ -56,12 +56,11 @@ const Template = (args) => ({
 });
 
 export const Demo = Template.bind({});
-Demo.args = {
-};
+Demo.args = {};
 
 export const Required = Template.bind({});
 Required.args = {
-  required: true
+  required: true,
 };
 
 const DefaultCountryTemplate = (args) => ({
@@ -69,7 +68,7 @@ const DefaultCountryTemplate = (args) => ({
   setup() {
     const form = ref({
       shipping_address: {
-        country: 'ca',
+        country: "ca",
       },
     });
     return { args, form };
@@ -88,13 +87,13 @@ const DefaultCountryAndRegionTemplate = (args) => ({
   setup() {
     const form = ref({
       shipping_address: {
-        country: 'ca',
-        region: 'ca-qc',
+        country: "ca",
+        region: "ca-qc",
       },
     });
 
     setTimeout(() => {
-      form.value.shipping_address.country = 'us';
+      form.value.shipping_address.country = "us";
     }, 2000);
 
     return { args, form };

package/src/components/BaseAlert.stories.js

@@ -1,15 +1,15 @@
-import BaseAlert from './BaseAlert.vue';
+import BaseAlert from "./BaseAlert.vue";
 
-import { palette } from '@/utils/colors';
+import { palette } from "@/utils/colors";
 
-const colors = [...Object.keys(palette), '#ff0000', '#dbeafe'];
+const colors = [...Object.keys(palette), "#ff0000", "#dbeafe"];
 
 export default {
-  title: 'Components/BaseAlert',
+  title: "Components/BaseAlert",
   component: BaseAlert,
   argTypes: {
     color: {
-      control: { type: 'select' },
+      control: { type: "select" },
       options: colors,
     },
   },
@@ -29,29 +29,29 @@ const Template = (args) => ({
 
 export const Demo = Template.bind({});
 Demo.args = {
-  title: 'Be careful',
-  color: 'warning',
+  title: "Be careful",
+  color: "warning",
   bordered: true,
 };
 
 export const Success = Template.bind({});
 Success.args = {
-  title: 'Success',
-  color: 'success',
+  title: "Success",
+  color: "success",
   bordered: true,
 };
 
 export const Danger = Template.bind({});
 Danger.args = {
-  title: 'Error',
-  color: 'danger',
+  title: "Error",
+  color: "danger",
   bordered: true,
 };
 
 export const Info = Template.bind({});
 Info.args = {
-  title: 'Information',
-  color: 'info',
+  title: "Information",
+  color: "info",
   bordered: true,
 };
 

package/src/components/BaseAutocomplete.stories.js

@@ -1,24 +1,24 @@
-import { createFieldStory, options, sizes } from '../../.storybook/utils';
-import BaseAutocomplete from './BaseAutocomplete.vue';
-import ShowValue from '@/../.storybook/components/ShowValue.vue';
-import { computed } from 'vue';
+import { createFieldStory, options, sizes } from "../../.storybook/utils";
+import BaseAutocomplete from "./BaseAutocomplete.vue";
+import ShowValue from "@/../.storybook/components/ShowValue.vue";
+import { computed } from "vue";
 
 export default {
-  title: 'Form/BaseAutocomplete',
+  title: "Form/BaseAutocomplete",
   component: BaseAutocomplete,
   argTypes: {
     size: {
-      control: { type: 'select' },
+      control: { type: "select" },
       options: sizes,
     },
     dropdownShow: {
-      control: { type: 'select' },
-      options: ['always', 'focus'],
+      control: { type: "select" },
+      options: ["always", "focus"],
     },
   },
   args: {
-    labelKey: 'label',
-    valueKey: 'value',
+    labelKey: "label",
+    valueKey: "value",
     options: options,
   },
   decorators: [() => ({ template: '<div class="mb-36"><story/></div>' })],
@@ -42,7 +42,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 @@ export const Disabled = Template.bind({});
 Disabled.args = {
   options: [],
   disabled: true,
-  modelValue: { label: 'Dark Maul', value: '1' },
+  modelValue: { label: "Dark Maul", value: "1" },
 };
 
 export const Loading = Template.bind({});
@@ -65,7 +65,7 @@ Loading.args = {
 export const ShowEmptyOption = Template.bind({});
 ShowEmptyOption.args = {
   showEmptyOption: true,
-  emptyOptionLabel: 'No Jedi',
+  emptyOptionLabel: "No Jedi",
 };
 
 export const Inline = Template.bind({});
@@ -93,11 +93,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 };
@@ -183,19 +183,19 @@ export const WithSelect = (args) => {
 
       const select = {
         options: [
-          { label: 'All', value: 'all' },
-          { label: 'Jedi', value: 'jedi' },
-          { label: 'Sith', value: 'sith' },
+          { label: "All", value: "all" },
+          { label: "Jedi", value: "jedi" },
+          { label: "Sith", value: "sith" },
         ],
-        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);
@@ -225,6 +225,6 @@ export const WithSelect = (args) => {
 
 export const Field = createFieldStory({
   component: BaseAutocomplete,
-  componentName: 'BaseAutocomplete',
-  label: 'Article',
+  componentName: "BaseAutocomplete",
+  label: "Article",
 });

package/src/components/BaseAutocomplete.vue

@@ -117,7 +117,9 @@ import BaseAutocompleteDrawer from './BaseAutocompleteDrawer.vue';
 import { SelectConfiguration } from '@/types';
 import { t } from '@/i18n';
 import { Size, sizes } from '@/utils/sizes';
-import { BaseInput, BaseSelect } from '.';
+import BaseInput from './BaseInput.vue';
+import BaseSelect from './BaseSelect.vue';
+import { twMerge } from 'tailwind-merge';
 
 const props = defineProps({
   modelValue: {
@@ -522,12 +524,17 @@ const inputClasses = computed(() => {
   const paddingRight = showRemoveButtonInternal.value ? 'pr-5' : '';
   const withSelect = props.select ? 'rounded-l-none' : '';
 
-  return [
+  const internalClasses = [
     base,
     withSelect,
     paddingRight,
-    props.twInput,
   ];
+
+  if (!props.twInput) {
+    return internalClasses;
+  }
+
+  return twMerge(internalClasses, props.twInput);
 })
 
 const showRemoveButtonInternal = computed(() => {

package/src/components/BaseAutocompleteFetch.stories.js

@@ -1,21 +1,21 @@
-import BaseAutocompleteFetch from './BaseAutocompleteFetch.vue';
-import ShowValue from '@/../.storybook/components/ShowValue.vue';
-import { options } from '@/../.storybook/utils';
-import { createFieldStory, sizes } from '../../.storybook/utils';
+import BaseAutocompleteFetch from "./BaseAutocompleteFetch.vue";
+import ShowValue from "@/../.storybook/components/ShowValue.vue";
+import { options } from "@/../.storybook/utils";
+import { createFieldStory, sizes } from "../../.storybook/utils";
 
 export default {
-  title: 'Form/BaseAutocompleteFetch',
+  title: "Form/BaseAutocompleteFetch",
   component: BaseAutocompleteFetch,
   argTypes: {
     size: {
-      control: { type: 'select' },
+      control: { type: "select" },
       options: sizes,
     },
   },
   args: {
-    url: 'https://faker.witify.io/api/todos',
-    labelKey: 'title',
-    valueKey: 'id',
+    url: "https://faker.witify.io/api/todos",
+    labelKey: "title",
+    valueKey: "id",
   },
   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({});
@@ -48,8 +48,8 @@ NoFocus.args = {
 
 export const Disabled = Template.bind({});
 Disabled.args = {
-  labelKey: 'label',
-  valueKey: 'value',
+  labelKey: "label",
+  valueKey: "value",
   modelValue: options[0],
   disabled: true,
 };
@@ -57,7 +57,7 @@ Disabled.args = {
 export const ShowEmptyOption = Template.bind({});
 ShowEmptyOption.args = {
   showEmptyOption: true,
-  emptyOptionLabel: 'No Jedi',
+  emptyOptionLabel: "No Jedi",
 };
 
 export const Inline = Template.bind({});
@@ -169,27 +169,23 @@ export const WithSelect = (args) => {
 
       const select = {
         options: [
-          { label: 'All', value: 'all' },
-          { label: 'Work', value: 'work' },
-          { label: 'Personal', value: 'personal' },
-          { label: 'Family', value: 'family' },
+          { label: "All", value: "all" },
+          { label: "Work", value: "work" },
+          { label: "Personal", value: "personal" },
+          { 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 };
@@ -216,6 +212,6 @@ export const WithSelect = (args) => {
 
 export const Field = createFieldStory({
   component: BaseAutocompleteFetch,
-  componentName: 'BaseAutocompleteFetch',
-  label: 'Article',
+  componentName: "BaseAutocompleteFetch",
+  label: "Article",
 });

package/src/components/BaseAvatar.stories.js

@@ -1,16 +1,16 @@
-import BaseAvatar from './BaseAvatar.vue';
+import BaseAvatar from "./BaseAvatar.vue";
 
 export default {
-  title: 'Data/BaseAvatar',
+  title: "Data/BaseAvatar",
   component: BaseAvatar,
   argTypes: {
     size: {
-      control: { type: 'select' },
-      options: ['xs', 'sm', 'base', 'lg', 'xl'],
+      control: { type: "select" },
+      options: ["xs", "sm", "base", "lg", "xl"],
     },
     detailsPosition: {
-      control: { type: 'select' },
-      options: ['left', 'right'],
+      control: { type: "select" },
+      options: ["left", "right"],
     },
   },
 };
@@ -29,11 +29,11 @@ export const Demo = Template.bind({});
 Demo.args = {
   showDetails: true,
   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",
   },
 };

package/src/components/BaseAvatarGroup.stories.js

@@ -1,21 +1,21 @@
-import BaseAvatarGroup from './BaseAvatarGroup.vue';
+import BaseAvatarGroup from "./BaseAvatarGroup.vue";
 
 export default {
-  title: 'Data/BaseAvatarGroup',
+  title: "Data/BaseAvatarGroup",
   component: BaseAvatarGroup,
   argTypes: {
     size: {
-      control: { type: 'select' },
-      options: ['xs', 'sm', 'base', 'lg', 'xl'],
+      control: { type: "select" },
+      options: ["xs", "sm", "base", "lg", "xl"],
     },
   },
 };
 
 const user = {
-  email: 'jane@witify.io',
-  full_name: 'Jane Doe with a very long name',
+  email: "jane@witify.io",
+  full_name: "Jane Doe with a very long name",
   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 n = 40;
@@ -44,7 +44,7 @@ export const Demo = Template.bind({});
 Demo.args = {
   users: users,
   to(user) {
-    return '/' + user.email;
+    return "/" + user.email;
   },
 };
 
@@ -66,6 +66,6 @@ export const MaxItems = TemplateWithMaxItems.bind({});
 MaxItems.args = {
   users: users,
   to(user) {
-    return '/' + user.email;
+    return "/" + user.email;
   },
 };

package/src/components/BaseBadge.stories.js

@@ -1,25 +1,25 @@
-import { sizes } from '../../.storybook/utils';
-import BaseBadge from './BaseBadge.vue';
+import { sizes } from "../../.storybook/utils";
+import BaseBadge from "./BaseBadge.vue";
 
-import { palette } from '@/utils/colors';
+import { palette } from "@/utils/colors";
 
-const colors = [...Object.keys(palette), '#ff0000', '#dbeafe'];
+const colors = [...Object.keys(palette), "#ff0000", "#dbeafe"];
 
 export default {
-  title: 'Components/BaseBadge',
+  title: "Components/BaseBadge",
   component: BaseBadge,
   argTypes: {
     color: {
-      control: { type: 'select' },
+      control: { type: "select" },
       options: colors,
     },
     size: {
-      control: { type: 'select' },
+      control: { type: "select" },
       options: sizes,
     },
     contrast: {
-      control: { type: 'select' },
-      options: ['low', 'high'],
+      control: { type: "select" },
+      options: ["low", "high"],
     },
   },
 };
@@ -38,9 +38,9 @@ const Template = (args) => ({
 
 export const Demo = Template.bind({});
 Demo.args = {
-  color: 'red',
-  icon: 'heroicons:exclamation-triangle-20-solid',
-  contrast: 'high',
+  color: "red",
+  icon: "heroicons:exclamation-triangle-20-solid",
+  contrast: "high",
 };
 
 export const Colors = (args) => ({
@@ -59,8 +59,8 @@ export const Colors = (args) => ({
 });
 
 Colors.args = {
-  contrast: 'high',
-  icon: 'heroicons:beaker-20-solid',
+  contrast: "high",
+  icon: "heroicons:beaker-20-solid",
 };
 
 export const Contrast = (args) => ({
@@ -79,8 +79,8 @@ export const Contrast = (args) => ({
 });
 
 Contrast.args = {
-  contrast: 'low',
-  icon: 'heroicons:beaker-20-solid',
+  contrast: "low",
+  icon: "heroicons:beaker-20-solid",
 };
 
 export const Sizes = (args) => ({
@@ -99,11 +99,10 @@ export const Sizes = (args) => ({
 });
 
 Sizes.args = {
-  contrast: 'high',
-  icon: 'heroicons:beaker-20-solid',
+  contrast: "high",
+  icon: "heroicons:beaker-20-solid",
 };
 
-
 export const Wrap = (args) => ({
   components: { BaseBadge },
   setup() {