sprintify-ui 0.0.41 → 0.0.43

package/dist/types/src/components/BaseTextareaForm.vue.d.ts

@@ -0,0 +1,394 @@
+import { PropType } from 'vue';
+declare const _default: import("vue").DefineComponent<{
+    modelValue: {
+        required: true;
+        type: PropType<string | null>;
+    };
+    type: {
+        type: StringConstructor;
+        default: string;
+    };
+    rows: {
+        default: number;
+        type: NumberConstructor;
+    };
+    min: {
+        default: undefined;
+        type: NumberConstructor;
+    };
+    max: {
+        default: undefined;
+        type: NumberConstructor;
+    };
+}, unknown, unknown, {
+    normalizedModelValue(): string;
+}, {
+    transformInputValue(event: Event | null): string | null;
+}, import("vue").ComponentOptionsMixin, import("vue").DefineComponent<{
+    name: {
+        required: true;
+        type: StringConstructor;
+    };
+    placeholder: {
+        default: string;
+        type: StringConstructor;
+    };
+    label: {
+        default: string;
+        type: StringConstructor;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    required: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
+    autofocus: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
+    preventSubmit: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
+}, unknown, unknown, {
+    form(): ({
+        new (...args: any[]): {
+            $: import("vue").ComponentInternalInstance;
+            $data: {};
+            $props: Partial<{
+                axiosInstance: import("axios").AxiosInstance | null;
+                format: import("../types").DataFormat;
+                beforeSubmit: (next: () => void) => void;
+                successHandler: (response: any) => void;
+                errorHandler: (error: import("axios").AxiosError<any, any>) => void;
+                loadingMaskClass: string;
+            }> & Omit<Readonly<import("vue").ExtractPropTypes<{
+                url: {
+                    required: true;
+                    type: StringConstructor;
+                };
+                method: {
+                    required: true;
+                    type: PropType<import("../types").Method>;
+                    validator: (value: string) => boolean;
+                };
+                data: {
+                    required: true;
+                    type: PropType<Record<string, any>>;
+                };
+                axiosInstance: {
+                    default: null;
+                    type: PropType<import("axios").AxiosInstance | null>;
+                };
+                format: {
+                    type: PropType<import("../types").DataFormat>;
+                    default: import("../types").DataFormat;
+                    validator: (value: string) => boolean;
+                };
+                beforeSubmit: {
+                    default: (next: () => void) => void;
+                    type: PropType<(next: () => void) => void>;
+                };
+                successHandler: {
+                    default: undefined;
+                    type: PropType<(response: any) => void>;
+                };
+                errorHandler: {
+                    default: (error: import("axios").AxiosError<any, any>) => void;
+                    type: PropType<(error: import("axios").AxiosError<any, any>) => void>;
+                };
+                loadingMaskClass: {
+                    default: string;
+                    type: StringConstructor;
+                };
+            }>> & {
+                onError?: ((...args: any[]) => any) | undefined;
+                onSuccess?: ((...args: any[]) => any) | undefined;
+            } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "axiosInstance" | "format" | "beforeSubmit" | "successHandler" | "errorHandler" | "loadingMaskClass">;
+            $attrs: {
+                [x: string]: unknown;
+            };
+            $refs: {
+                [x: string]: unknown;
+            };
+            $slots: Readonly<{
+                [name: string]: import("vue").Slot | undefined;
+            }>;
+            $root: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null;
+            $parent: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null;
+            $emit: (event: "success" | "error", ...args: any[]) => void;
+            $el: any;
+            $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+                url: {
+                    required: true;
+                    type: StringConstructor;
+                };
+                method: {
+                    required: true;
+                    type: PropType<import("../types").Method>;
+                    validator: (value: string) => boolean;
+                };
+                data: {
+                    required: true;
+                    type: PropType<Record<string, any>>;
+                };
+                axiosInstance: {
+                    default: null;
+                    type: PropType<import("axios").AxiosInstance | null>;
+                };
+                format: {
+                    type: PropType<import("../types").DataFormat>;
+                    default: import("../types").DataFormat;
+                    validator: (value: string) => boolean;
+                };
+                beforeSubmit: {
+                    default: (next: () => void) => void;
+                    type: PropType<(next: () => void) => void>;
+                };
+                successHandler: {
+                    default: undefined;
+                    type: PropType<(response: any) => void>;
+                };
+                errorHandler: {
+                    default: (error: import("axios").AxiosError<any, any>) => void;
+                    type: PropType<(error: import("axios").AxiosError<any, any>) => void>;
+                };
+                loadingMaskClass: {
+                    default: string;
+                    type: StringConstructor;
+                };
+            }>> & {
+                onError?: ((...args: any[]) => any) | undefined;
+                onSuccess?: ((...args: any[]) => any) | undefined;
+            }, {
+                submit: () => void;
+                errors: import("vue").Ref<Record<string, string[]>>;
+                hasErrors: import("vue").ComputedRef<boolean>;
+                clearErrors: (name?: null) => void;
+                disabled: import("vue").Ref<boolean>;
+                loading: import("vue").Ref<boolean>;
+            }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("success" | "error")[], string, {
+                axiosInstance: import("axios").AxiosInstance | null;
+                format: import("../types").DataFormat;
+                beforeSubmit: (next: () => void) => void;
+                successHandler: (response: any) => void;
+                errorHandler: (error: import("axios").AxiosError<any, any>) => void;
+                loadingMaskClass: string;
+            }, {}, string> & {
+                beforeCreate?: ((() => void) | (() => void)[]) | undefined;
+                created?: ((() => void) | (() => void)[]) | undefined;
+                beforeMount?: ((() => void) | (() => void)[]) | undefined;
+                mounted?: ((() => void) | (() => void)[]) | undefined;
+                beforeUpdate?: ((() => void) | (() => void)[]) | undefined;
+                updated?: ((() => void) | (() => void)[]) | undefined;
+                activated?: ((() => void) | (() => void)[]) | undefined;
+                deactivated?: ((() => void) | (() => void)[]) | undefined;
+                beforeDestroy?: ((() => void) | (() => void)[]) | undefined;
+                beforeUnmount?: ((() => void) | (() => void)[]) | undefined;
+                destroyed?: ((() => void) | (() => void)[]) | undefined;
+                unmounted?: ((() => void) | (() => void)[]) | undefined;
+                renderTracked?: (((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[]) | undefined;
+                renderTriggered?: (((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[]) | undefined;
+                errorCaptured?: (((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null, info: string) => boolean | void)[]) | undefined;
+            };
+            $forceUpdate: () => void;
+            $nextTick: typeof import("vue").nextTick;
+            $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (args_0: R, args_1: R) => any : (...args: any) => any, options?: import("vue").WatchOptions<boolean> | undefined): import("vue").WatchStopHandle;
+        } & Readonly<import("vue").ExtractPropTypes<{
+            url: {
+                required: true;
+                type: StringConstructor;
+            };
+            method: {
+                required: true;
+                type: PropType<import("../types").Method>;
+                validator: (value: string) => boolean;
+            };
+            data: {
+                required: true;
+                type: PropType<Record<string, any>>;
+            };
+            axiosInstance: {
+                default: null;
+                type: PropType<import("axios").AxiosInstance | null>;
+            };
+            format: {
+                type: PropType<import("../types").DataFormat>;
+                default: import("../types").DataFormat;
+                validator: (value: string) => boolean;
+            };
+            beforeSubmit: {
+                default: (next: () => void) => void;
+                type: PropType<(next: () => void) => void>;
+            };
+            successHandler: {
+                default: undefined;
+                type: PropType<(response: any) => void>;
+            };
+            errorHandler: {
+                default: (error: import("axios").AxiosError<any, any>) => void;
+                type: PropType<(error: import("axios").AxiosError<any, any>) => void>;
+            };
+            loadingMaskClass: {
+                default: string;
+                type: StringConstructor;
+            };
+        }>> & {
+            onError?: ((...args: any[]) => any) | undefined;
+            onSuccess?: ((...args: any[]) => any) | undefined;
+        } & import("vue").ShallowUnwrapRef<{
+            submit: () => void;
+            errors: import("vue").Ref<Record<string, string[]>>;
+            hasErrors: import("vue").ComputedRef<boolean>;
+            clearErrors: (name?: null) => void;
+            disabled: import("vue").Ref<boolean>;
+            loading: import("vue").Ref<boolean>;
+        }> & {} & import("vue").ComponentCustomProperties & {};
+        __isFragment?: undefined;
+        __isTeleport?: undefined;
+        __isSuspense?: undefined;
+    } & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+        url: {
+            required: true;
+            type: StringConstructor;
+        };
+        method: {
+            required: true;
+            type: PropType<import("../types").Method>;
+            validator: (value: string) => boolean;
+        };
+        data: {
+            required: true;
+            type: PropType<Record<string, any>>;
+        };
+        axiosInstance: {
+            default: null;
+            type: PropType<import("axios").AxiosInstance | null>;
+        };
+        format: {
+            type: PropType<import("../types").DataFormat>;
+            default: import("../types").DataFormat;
+            validator: (value: string) => boolean;
+        };
+        beforeSubmit: {
+            default: (next: () => void) => void;
+            type: PropType<(next: () => void) => void>;
+        };
+        successHandler: {
+            default: undefined;
+            type: PropType<(response: any) => void>;
+        };
+        errorHandler: {
+            default: (error: import("axios").AxiosError<any, any>) => void;
+            type: PropType<(error: import("axios").AxiosError<any, any>) => void>;
+        };
+        loadingMaskClass: {
+            default: string;
+            type: StringConstructor;
+        };
+    }>> & {
+        onError?: ((...args: any[]) => any) | undefined;
+        onSuccess?: ((...args: any[]) => any) | undefined;
+    }, {
+        submit: () => void;
+        errors: import("vue").Ref<Record<string, string[]>>;
+        hasErrors: import("vue").ComputedRef<boolean>;
+        clearErrors: (name?: null) => void;
+        disabled: import("vue").Ref<boolean>;
+        loading: import("vue").Ref<boolean>;
+    }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("success" | "error")[], "success" | "error", {
+        axiosInstance: import("axios").AxiosInstance | null;
+        format: import("../types").DataFormat;
+        beforeSubmit: (next: () => void) => void;
+        successHandler: (response: any) => void;
+        errorHandler: (error: import("axios").AxiosError<any, any>) => void;
+        loadingMaskClass: string;
+    }, {}, string> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+        $slots: {
+            default: (_: {
+                errors: Record<string, string[]>;
+                loading: boolean;
+                disabled: boolean;
+                submit: () => void;
+            }) => any;
+            loading: (_: {}) => any;
+        };
+    })) | null;
+    errors(): any;
+    labelValue(): string;
+}, {
+    inputListener(payload: any): void;
+    errorMessage(name?: string | null): any;
+    hasError(name?: string | null): boolean;
+    clearErrors(name?: string | null): void;
+    disableForm(): void;
+    enableForm(): void;
+}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    name: {
+        required: true;
+        type: StringConstructor;
+    };
+    placeholder: {
+        default: string;
+        type: StringConstructor;
+    };
+    label: {
+        default: string;
+        type: StringConstructor;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    required: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
+    autofocus: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
+    preventSubmit: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
+    required: boolean;
+    label: string;
+    placeholder: string;
+    disabled: boolean;
+    preventSubmit: boolean;
+    autofocus: boolean;
+}>, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: {
+        required: true;
+        type: PropType<string | null>;
+    };
+    type: {
+        type: StringConstructor;
+        default: string;
+    };
+    rows: {
+        default: number;
+        type: NumberConstructor;
+    };
+    min: {
+        default: undefined;
+        type: NumberConstructor;
+    };
+    max: {
+        default: undefined;
+        type: NumberConstructor;
+    };
+}>>, {
+    type: string;
+    min: number;
+    max: number;
+    rows: number;
+}>;
+export default _default;

package/dist/types/src/components/index.d.ts

@@ -25,8 +25,11 @@ import BaseDateSelect from './BaseDateSelect.vue';
 import BaseDescriptionList from './BaseDescriptionList.vue';
 import BaseDescriptionListItem from './BaseDescriptionListItem.vue';
 import BaseDialog from './BaseDialog.vue';
+import BaseField from './BaseField.vue';
+import BaseFieldI18n from './BaseFieldI18n.vue';
 import BaseFilePicker from './BaseFilePicker.vue';
 import BaseFileUploader from './BaseFileUploader.vue';
+import BaseForm from './BaseForm.vue';
 import BaseHasMany from './BaseHasMany.vue';
 import { Icon as BaseIcon } from '@iconify/vue';
 import BaseInput from './BaseInput.vue';
@@ -70,4 +73,4 @@ import BaseLayoutStacked from './BaseLayoutStacked.vue';
 import BaseLayoutStackedConfigurable from './BaseLayoutStackedConfigurable.vue';
 import BaseLayoutSidebar from './BaseLayoutSidebar.vue';
 import BaseLayoutSidebarConfigurable from './BaseLayoutSidebarConfigurable.vue';
-export { BaseActionItem, BaseAlert, BaseApp, BaseAppDialogs, BaseAppNotifications, BaseAutocomplete, BaseAutocompleteFetch, BaseAvatar, BaseBadge, BaseBelongsTo, BaseBoolean, BaseBreadcrumbs, BaseButton, BaseButtonGroup, BaseCard, BaseCardRow, BaseCharacterCounter, BaseClipboard, BaseContainer, BaseCounter, BaseDataIterator, BaseDataTable, BaseDatePicker, BaseDateSelect, BaseDescriptionList, BaseDescriptionListItem, BaseDialog, BaseFilePicker, BaseFileUploader, BaseHasMany, BaseIcon, BaseInput, BaseInputLabel, BaseLoadingCover, BaseMediaItem, BaseMediaLibrary, BaseMediaPreview, BaseMenu, BaseMenuItem, BaseModalCenter, BaseModalSide, BaseNavbar, BaseNavbarItem, BaseNavbarItemContent, BasePagination, BasePanel, BasePassword, BaseProgressCircle, BaseRadioGroup, BaseReadMore, BaseSelect, BaseShortcut, BaseSideNavigation, BaseSideNavigationItem, BaseSkeleton, BaseStatistic, BaseSwitch, BaseSystemAlert, BaseTabs, BaseTabItem, BaseTagAutocomplete, BaseTagAutocompleteFetch, BaseTable, BaseTableColumn, BaseTextarea, BaseTextareaAutoresize, BaseTimeline, BaseTimelineItem, BaseLayoutStacked, BaseLayoutStackedConfigurable, BaseLayoutSidebar, BaseLayoutSidebarConfigurable, };
+export { BaseActionItem, BaseAlert, BaseApp, BaseAppDialogs, BaseAppNotifications, BaseAutocomplete, BaseAutocompleteFetch, BaseAvatar, BaseBadge, BaseBelongsTo, BaseBoolean, BaseBreadcrumbs, BaseButton, BaseButtonGroup, BaseCard, BaseCardRow, BaseCharacterCounter, BaseClipboard, BaseContainer, BaseCounter, BaseDataIterator, BaseDataTable, BaseDatePicker, BaseDateSelect, BaseDescriptionList, BaseDescriptionListItem, BaseDialog, BaseField, BaseFieldI18n, BaseFilePicker, BaseFileUploader, BaseForm, BaseHasMany, BaseIcon, BaseInput, BaseInputLabel, BaseLoadingCover, BaseMediaItem, BaseMediaLibrary, BaseMediaPreview, BaseMenu, BaseMenuItem, BaseModalCenter, BaseModalSide, BaseNavbar, BaseNavbarItem, BaseNavbarItemContent, BasePagination, BasePanel, BasePassword, BaseProgressCircle, BaseRadioGroup, BaseReadMore, BaseSelect, BaseShortcut, BaseSideNavigation, BaseSideNavigationItem, BaseSkeleton, BaseStatistic, BaseSwitch, BaseSystemAlert, BaseTabs, BaseTabItem, BaseTagAutocomplete, BaseTagAutocompleteFetch, BaseTable, BaseTableColumn, BaseTextarea, BaseTextareaAutoresize, BaseTimeline, BaseTimelineItem, BaseLayoutStacked, BaseLayoutStackedConfigurable, BaseLayoutSidebar, BaseLayoutSidebarConfigurable, };

package/dist/types/src/composables/field.d.ts

@@ -0,0 +1,17 @@
+import { Ref } from 'vue';
+interface Config {
+    name: Ref<string | null | undefined>;
+    required: Ref<boolean>;
+    hasError: Ref<boolean | undefined>;
+    emit: any;
+    errorType?: string;
+    labelClass?: string;
+}
+export declare function useField(config: Config): {
+    requiredInternal: import("vue").ComputedRef<boolean>;
+    nameInternal: import("vue").ComputedRef<string>;
+    hasErrorInternal: import("vue").ComputedRef<boolean>;
+    errorMessageInternal: import("vue").ComputedRef<string | null | undefined>;
+    emitUpdate: (value: any) => void;
+};
+export {};

package/dist/types/src/index.d.ts

@@ -135,10 +135,12 @@ declare const messages: {
     };
 };
 import './assets/main.css';
+import { Locales } from './types';
 export interface Options {
     i18n?: I18n<typeof messages, {}, {}, string, true>;
     http?: AxiosInstance;
     upload_url?: string;
+    locales?: Locales;
     formatQueryString?: (params: Record<string, any>) => string;
     parseQueryString?: (params: string) => Record<string, any>;
 }
@@ -274,6 +276,7 @@ declare const config: {
         };
     }, {}, {}, string, true>;
     http: AxiosInstance;
+    locales: Locales;
     upload_url: string;
     formatQueryString(params: Record<string, any>): string;
     parseQueryString(params: string): Record<string, any>;

package/dist/types/src/types/index.d.ts

@@ -1,6 +1,17 @@
 import { RouteLocationRaw } from 'vue-router';
 import { UploadedFile } from './UploadedFile';
 import { Notification as AppNotification } from './Notification';
+export type Locales = {
+    [locale: string]: string;
+};
+export declare enum Method {
+    post = "post",
+    patch = "patch"
+}
+export declare enum DataFormat {
+    json = "json",
+    formData = "formData"
+}
 export interface Breadcrumb {
     icon?: string;
     to: RouteLocationRaw;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.0.41",
+  "version": "0.0.43",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
     "build-fast": "rimraf dist && vite build",
@@ -21,6 +21,7 @@
     "humanize-duration": "^3.0.0",
     "lodash": "^4.17.21",
     "luxon": "^3.0.0",
+    "object-to-formdata": "^4.4.2",
     "pikaday": "^1.8.2",
     "pinia": "^2.0.0",
     "qs": "^6.0.0",
@@ -70,6 +71,7 @@
     "lodash": "^4.17.21",
     "luxon": "^3.1.0",
     "object-hash": "^3.0.0",
+    "object-to-formdata": "^4.4.2",
     "pikaday": "^1.8.2",
     "pinia": "^2.0.23",
     "postcss": "^8.4.19",
@@ -80,6 +82,7 @@
     "rimraf": "^3.0.2",
     "rollup-plugin-analyzer": "^4.0.0",
     "scroll-lock": "^2.1.5",
+    "storybook-addon-mock": "^3.2.0",
     "tailwindcss": "^3.2.4",
     "typescript": "^4.4.4",
     "unplugin-auto-import": "^0.11.4",

package/src/components/BaseAutocomplete.stories.js

@@ -1,30 +1,27 @@
+import { createFieldStory, options } from '../../.storybook/utils';
 import BaseAutocomplete from './BaseAutocomplete.vue';
+import ShowValue from '@/../.storybook/components/ShowValue.vue';
 
 export default {
   title: 'Form/BaseAutocomplete',
   component: BaseAutocomplete,
-  argTypes: {},
   args: {
     labelKey: 'label',
     valueKey: 'value',
-    options: [
-      { label: 'Dark Vader', value: 'dark_vader' },
-      { label: 'Darth Maul', value: 'darth_maul' },
-      { label: 'Dark Sidious', value: 'dark_sidious' },
-    ],
+    options: options,
   },
   decorators: [() => ({ template: '<div class="mb-36"><story/></div>' })],
 };
 
 const Template = (args) => ({
-  components: { BaseAutocomplete },
+  components: { BaseAutocomplete, ShowValue },
   setup() {
     const value = ref(null);
     return { args, value };
   },
   template: `
     <BaseAutocomplete v-model="value" v-bind="args"></BaseAutocomplete>
-    <p class="mt-5 text-sm">Value: <span class="bg-slate-200 font-mono px-1 py-px rounded">{{ value ?? 'NULL' }}</span></p>
+    <ShowValue :value="value" />
   `,
 });
 
@@ -59,27 +56,27 @@ export const SlotOption = (args) => ({
     return { value, options, args };
   },
   template: `
-  <BaseAutocomplete
-    v-bind="args"
-    v-model="value"
-    :options="options"
-  >
-    <template #option="{ option, active, selected }">
-      <div
-        class="rounded px-2 font-semibold py-1 text-sm"
-        :class="{
-          'hover:bg-slate-100': !active && !selected,
-          'bg-slate-200 hover:bg-slate-300': active && !selected,
-          'bg-blue-500 text-white hover:bg-blue-600': !active && selected,
-          'bg-blue-600 text-white hover:bg-blue-700': active && selected,
-        }"
-        :style="{ color: selected ? '' : option.value }"
-      >
-        {{ option.label }}
-      </div>
-    </template>
-  </BaseAutocomplete>
-  `,
+<BaseAutocomplete
+  v-bind="args"
+  v-model="value"
+  :options="options"
+>
+  <template #option="{ option, active, selected }">
+    <div
+      class="rounded px-2 font-semibold py-1 text-sm"
+      :class="{
+        'hover:bg-slate-100': !active && !selected,
+        'bg-slate-200 hover:bg-slate-300': active && !selected,
+        'bg-blue-500 text-white hover:bg-blue-600': !active && selected,
+        'bg-blue-600 text-white hover:bg-blue-700': active && selected,
+      }"
+      :style="{ color: selected ? '' : option.value }"
+    >
+      {{ option.label }}
+    </div>
+  </template>
+</BaseAutocomplete>
+`,
 });
 
 export const SlotFooter = (args) => {
@@ -88,22 +85,24 @@ export const SlotFooter = (args) => {
     setup() {
       const value = ref(null);
       function onClick() {
-        alert(1);
+        setTimeout(() => {
+          alert(1);
+        }, 150);
       }
       return { args, value, onClick };
     },
     template: `
-    <BaseAutocomplete
-      v-model="value"
-      v-bind="args" 
-    >
-      <template #footer>
-        <div class="text-center p-2 border-t">
-          <button @click=onClick class="btn btn-sm w-full btn-slate-200-outline">This is the footer 💯</button>
-        </div>
-      </template>
-    </BaseAutocomplete>
-  `,
+  <BaseAutocomplete
+    v-model="value"
+    v-bind="args" 
+  >
+    <template #footer>
+      <div class="text-center p-2 border-t">
+        <button @click=onClick class="btn btn-sm w-full btn-slate-200-outline">This is the footer 💯</button>
+      </div>
+    </template>
+  </BaseAutocomplete>
+`,
   };
 };
 
@@ -115,15 +114,21 @@ export const SlotEmpty = (args) => {
       return { args, value };
     },
     template: `
-    <BaseAutocomplete
-      v-model="value"
-      v-bind="args"
-      :options="[]"
-    >
-      <template #empty>
-        <div class="text-center p-6 py-10 flex items-center justify-center">🤓🤓🤓</div>
-      </template>
-    </BaseAutocomplete>
-  `,
+  <BaseAutocomplete
+    v-model="value"
+    v-bind="args"
+    :options="[]"
+  >
+    <template #empty>
+      <div class="text-center p-6 py-10 flex items-center justify-center">🤓🤓🤓</div>
+    </template>
+  </BaseAutocomplete>
+`,
   };
 };
+
+export const Field = createFieldStory({
+  component: BaseAutocomplete,
+  componentName: 'BaseAutocomplete',
+  label: 'Article',
+});