sprintify-ui 0.0.10 → 0.0.12

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

@@ -1,4 +1,160 @@
-declare const _default: import("vue").DefineComponent<{
+declare const _default: {
+    new (...args: any[]): {
+        $: import("vue").ComponentInternalInstance;
+        $data: {};
+        $props: Partial<{
+            modelValue: string;
+            placeholder: string;
+            disabled: boolean;
+            maxHeight: number;
+            submitOnEnter: boolean;
+        }> & Omit<Readonly<import("vue").ExtractPropTypes<{
+            modelValue: {
+                default: string;
+                type: StringConstructor;
+            };
+            placeholder: {
+                default: string;
+                type: StringConstructor;
+            };
+            name: {
+                required: true;
+                type: StringConstructor;
+            };
+            maxHeight: {
+                default: number;
+                type: NumberConstructor;
+            };
+            /**
+             * Setting this to true will trigger the 'submit' event while pressing Enter.
+             * Users will be able to add a line break while pressing Shift + Enter.
+             */
+            submitOnEnter: {
+                default: boolean;
+                type: BooleanConstructor;
+            };
+            disabled: {
+                default: boolean;
+                type: BooleanConstructor;
+            };
+        }>> & {
+            onFocus?: ((...args: any[]) => any) | undefined;
+            onInput?: ((...args: any[]) => any) | undefined;
+            onSubmit?: ((...args: any[]) => any) | undefined;
+            "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "modelValue" | "placeholder" | "disabled" | "maxHeight" | "submitOnEnter">;
+        $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: "input" | "submit" | "update:modelValue" | "focus", ...args: any[]) => void;
+        $el: any;
+        $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+            modelValue: {
+                default: string;
+                type: StringConstructor;
+            };
+            placeholder: {
+                default: string;
+                type: StringConstructor;
+            };
+            name: {
+                required: true;
+                type: StringConstructor;
+            };
+            maxHeight: {
+                default: number;
+                type: NumberConstructor;
+            };
+            /**
+             * Setting this to true will trigger the 'submit' event while pressing Enter.
+             * Users will be able to add a line break while pressing Shift + Enter.
+             */
+            submitOnEnter: {
+                default: boolean;
+                type: BooleanConstructor;
+            };
+            disabled: {
+                default: boolean;
+                type: BooleanConstructor;
+            };
+        }>> & {
+            onFocus?: ((...args: any[]) => any) | undefined;
+            onInput?: ((...args: any[]) => any) | undefined;
+            onSubmit?: ((...args: any[]) => any) | undefined;
+            "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+        }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("input" | "submit" | "update:modelValue" | "focus")[], string, {
+            modelValue: string;
+            placeholder: string;
+            disabled: boolean;
+            maxHeight: number;
+            submitOnEnter: boolean;
+        }, {}, 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<{
+        modelValue: {
+            default: string;
+            type: StringConstructor;
+        };
+        placeholder: {
+            default: string;
+            type: StringConstructor;
+        };
+        name: {
+            required: true;
+            type: StringConstructor;
+        };
+        maxHeight: {
+            default: number;
+            type: NumberConstructor;
+        };
+        /**
+         * Setting this to true will trigger the 'submit' event while pressing Enter.
+         * Users will be able to add a line break while pressing Shift + Enter.
+         */
+        submitOnEnter: {
+            default: boolean;
+            type: BooleanConstructor;
+        };
+        disabled: {
+            default: boolean;
+            type: BooleanConstructor;
+        };
+    }>> & {
+        onFocus?: ((...args: any[]) => any) | undefined;
+        onInput?: ((...args: any[]) => any) | undefined;
+        onSubmit?: ((...args: any[]) => any) | undefined;
+        "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    } & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {};
+    __isFragment?: undefined;
+    __isTeleport?: undefined;
+    __isSuspense?: undefined;
+} & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         default: string;
         type: StringConstructor;
@@ -11,34 +167,32 @@ declare const _default: import("vue").DefineComponent<{
         required: true;
         type: StringConstructor;
     };
-}, {
-    mobile: boolean;
-}, unknown, {}, {
-    onInput(e: any): void;
-    updateReplicatedValue(value: string): void;
-    onKeyDown(event: any): void;
-    onKeyUp(event: any): void;
-    onFocus(event: any): void;
-}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("input" | "submit" | "update:modelValue" | "focus")[], "input" | "submit" | "update:modelValue" | "focus", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    modelValue: {
-        default: string;
-        type: StringConstructor;
+    maxHeight: {
+        default: number;
+        type: NumberConstructor;
     };
-    placeholder: {
-        default: string;
-        type: StringConstructor;
+    /**
+     * Setting this to true will trigger the 'submit' event while pressing Enter.
+     * Users will be able to add a line break while pressing Shift + Enter.
+     */
+    submitOnEnter: {
+        default: boolean;
+        type: BooleanConstructor;
     };
-    name: {
-        required: true;
-        type: StringConstructor;
+    disabled: {
+        default: boolean;
+        type: BooleanConstructor;
     };
 }>> & {
     onFocus?: ((...args: any[]) => any) | undefined;
     onInput?: ((...args: any[]) => any) | undefined;
     onSubmit?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-}, {
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("input" | "submit" | "update:modelValue" | "focus")[], "input" | "submit" | "update:modelValue" | "focus", {
     modelValue: string;
     placeholder: string;
-}>;
+    disabled: boolean;
+    maxHeight: number;
+    submitOnEnter: boolean;
+}, {}, string> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
 export default _default;

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

@@ -25,9 +25,32 @@ import BaseDialog from './BaseDialog.vue';
 import BaseFilePicker from './BaseFilePicker.vue';
 import BaseFileUploader from './BaseFileUploader.vue';
 import { Icon as BaseIcon } from '@iconify/vue';
+import BaseInput from './BaseInput.vue';
+import BaseInputLabel from './BaseInputLabel.vue';
 import BaseLoadingCover from './BaseLoadingCover.vue';
 import BaseMenu from './BaseMenu.vue';
 import BaseMenuItem from './BaseMenuItem.vue';
+import BaseModalCenter from './BaseModalCenter.vue';
+import BaseModalSide from './BaseModalSide.vue';
+import BaseNavbar from './BaseNavbar.vue';
+import BaseNavbarItem from './BaseNavbarItem.vue';
+import BaseNavbarItemContent from './BaseNavbarItemContent.vue';
+import BasePagination from './BasePagination.vue';
+import BasePanel from './BasePanel.vue';
+import BasePassword from './BasePassword.vue';
+import BaseProcessRing from './BaseProcessRing.vue';
+import BaseReadMore from './BaseReadMore.vue';
+import BaseSelect from './BaseSelect.vue';
+import BaseSideNavigation from './BaseSideNavigation.vue';
+import BaseSideNavigationItem from './BaseSideNavigationItem.vue';
+import BaseSkeleton from './BaseSkeleton.vue';
+import BaseSwitch from './BaseSwitch.vue';
+import BaseSystemAlert from './BaseSystemAlert.vue';
+import BaseTextarea from './BaseTextarea.vue';
+import BaseTextareaAutoresize from './BaseTextareaAutoresize.vue';
+import BaseCharacterCounter from './BaseCharacterCounter.vue';
+import BaseTabs from './BaseTabs.vue';
+import BaseTabItem from './BaseTabItem.vue';
 import BaseTable from './BaseTable.vue';
 import BaseTableColumn from './BaseTableColumn.vue';
-export { BaseAlert, BaseApp, BaseAppDialogs, BaseAppNotifications, BaseAutocomplete, BaseAutocompleteFetch, BaseAvatar, BaseBadge, BaseBelongsTo, BaseBoolean, BaseBreadcrumbs, BaseButton, BaseCard, BaseCardRow, BaseClipboard, BaseContainer, BaseCounter, BaseDataIterator, BaseDataTable, BaseDatePicker, BaseDateSelect, BaseDescriptionList, BaseDescriptionListItem, BaseDialog, BaseFilePicker, BaseFileUploader, BaseIcon, BaseLoadingCover, BaseMenu, BaseMenuItem, BaseTable, BaseTableColumn, };
+export { BaseAlert, BaseApp, BaseAppDialogs, BaseAppNotifications, BaseAutocomplete, BaseAutocompleteFetch, BaseAvatar, BaseBadge, BaseBelongsTo, BaseBoolean, BaseBreadcrumbs, BaseButton, BaseCard, BaseCardRow, BaseClipboard, BaseContainer, BaseCounter, BaseDataIterator, BaseDataTable, BaseDatePicker, BaseDateSelect, BaseDescriptionList, BaseDescriptionListItem, BaseDialog, BaseFilePicker, BaseFileUploader, BaseIcon, BaseInput, BaseInputLabel, BaseLoadingCover, BaseMenu, BaseMenuItem, BaseModalCenter, BaseModalSide, BaseNavbar, BaseNavbarItem, BaseNavbarItemContent, BasePagination, BasePanel, BasePassword, BaseProcessRing, BaseReadMore, BaseSelect, BaseSideNavigation, BaseSideNavigationItem, BaseSkeleton, BaseSwitch, BaseSystemAlert, BaseTextarea, BaseTextareaAutoresize, BaseCharacterCounter, BaseTabs, BaseTabItem, BaseTable, BaseTableColumn, };

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

@@ -30,6 +30,7 @@ declare const messages: {
             month: string;
             next: string;
             next_month: string;
+            none: string;
             nothing_found: string;
             or: string;
             pagination_detail: string;
@@ -87,6 +88,7 @@ declare const messages: {
             month: string;
             next: string;
             next_month: string;
+            none: string;
             nothing_found: string;
             or: string;
             pagination_detail: string;
@@ -155,6 +157,7 @@ declare const config: {
                 month: string;
                 next: string;
                 next_month: string;
+                none: string;
                 nothing_found: string;
                 or: string;
                 pagination_detail: string;
@@ -212,6 +215,7 @@ declare const config: {
                 month: string;
                 next: string;
                 next_month: string;
+                none: string;
                 nothing_found: string;
                 or: string;
                 pagination_detail: string;

package/dist/types/src/svg/BaseEmptyState.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

package/dist/types/src/svg/BaseSpinnerSmall.vue.d.ts

@@ -0,0 +1,44 @@
+declare const _default: {
+    new (...args: any[]): {
+        $: import("vue").ComponentInternalInstance;
+        $data: {};
+        $props: Partial<{}> & Omit<Readonly<import("vue").ExtractPropTypes<{}>> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>;
+        $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: string, ...args: any[]) => void;
+        $el: any;
+        $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, 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<{}>> & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {};
+    __isFragment?: undefined;
+    __isTeleport?: undefined;
+    __isSuspense?: undefined;
+} & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {}, {}, string> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
+export default _default;

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

@@ -77,7 +77,7 @@ export interface BaseTableColumn {
     searchable: boolean;
     sortable: boolean;
     visible: boolean;
-    alwaysVisible: boolean;
+    toggle: boolean;
     optional: boolean;
     width: number;
     style: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.0.10",
+  "version": "0.0.12",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
     "docs:dev": "vitepress dev docs",
@@ -23,7 +23,8 @@
     "tailwindcss": "^3.0.0",
     "vue": "^3.0.0",
     "vue-i18n": "^9.0.0",
-    "vue-router": "^4.0.0"
+    "vue-router": "^4.0.0",
+    "pikaday": "^1.8.2"
   },
   "dependencies": {
     "@headlessui/vue": "^1.7.4"
@@ -72,6 +73,7 @@
     "prettier-plugin-tailwindcss": "^0.1.13",
     "qs": "^6.11.0",
     "rimraf": "^3.0.2",
+    "rollup-plugin-analyzer": "^4.0.0",
     "scroll-lock": "^2.1.5",
     "tailwindcss": "^3.2.4",
     "typescript": "^4.4.4",

package/src/components/BaseAutocomplete.stories.js

@@ -87,16 +87,19 @@ export const SlotFooter = (args) => {
     components: { BaseAutocomplete },
     setup() {
       const value = ref(null);
-      return { args, value };
+      function onClick() {
+        alert(1);
+      }
+      return { args, value, onClick };
     },
     template: `
     <BaseAutocomplete
       v-model="value"
-      v-bind="args"
+      v-bind="args" 
     >
       <template #footer>
-        <div class="text-center p-1 pt-2 mt-2 border-t">
-          <button class="btn btn-sm w-full btn-slate-200-outline">This is the footer 💯</button>
+        <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>

package/src/components/BaseAutocomplete.vue

@@ -50,7 +50,10 @@
         v-show="showDropdown"
         class="absolute top-1 z-[1] min-h-[110px] w-full overflow-hidden rounded border border-slate-300 bg-white shadow-md"
       >
-        <div ref="dropdown" class="max-h-[214px] w-full overflow-y-auto p-1">
+        <div
+          ref="dropdown"
+          class="max-h-[214px] min-h-[75px] w-full overflow-y-auto"
+        >
           <slot v-if="filteredNormalizedOptions.length == 0" name="empty">
             <div
               class="flex items-center justify-center px-5 py-10 text-center text-slate-600"
@@ -59,7 +62,7 @@
             </div>
           </slot>
 
-          <ul v-else>
+          <ul v-else class="p-1">
             <li
               v-for="option in filteredNormalizedOptions"
               :key="option.value"
@@ -70,7 +73,7 @@
                 type="button"
                 tabindex="-1"
                 @click="onSelect(option)"
-                @mousedown="dontLooseFocus"
+                @mousedown.prevent="dontLooseFocus"
               >
                 <slot
                   name="option"
@@ -91,12 +94,12 @@
               </button>
             </li>
           </ul>
+        </div>
 
-          <slot
-            :options="filteredNormalizedOptions"
-            :dont-loose-focus="dontLooseFocus"
-            name="footer"
-          />
+        <div ref="footer">
+          <div v-if="$slots.footer" class="bg-white">
+            <slot :options="filteredNormalizedOptions" name="footer" />
+          </div>
         </div>
 
         <Transition>
@@ -131,7 +134,7 @@ import {
   Selection,
   NormalizedSelection,
 } from '@/types/types';
-import { useInfiniteScroll } from '@vueuse/core';
+import { useInfiniteScroll, useMutationObserver } from '@vueuse/core';
 import BaseSkeleton from './BaseSkeleton.vue';
 
 const props = defineProps({
@@ -198,7 +201,7 @@ onMounted(() => {
     () => {
       emit('scrollBottom');
     },
-    { distance: 10 }
+    { distance: 60 }
   );
 });
 
@@ -255,12 +258,18 @@ const filteredNormalizedOptions = computed((): NormalizedOption[] => {
   });
 });
 
-const dontLooseFocus = (event: Event, next: null | (() => void) = null) => {
-  event.preventDefault();
+function preventUnfocus(elements: HTMLElement[]) {
+  elements.forEach((e) => {
+    e.removeEventListener('mousedown', dontLooseFocus);
+  });
+  elements.forEach((e) => {
+    e.addEventListener('mousedown', dontLooseFocus);
+  });
+}
+
+const dontLooseFocus = (event: Event) => {
   inputElement.value?.focus();
-  if (next) {
-    next();
-  }
+  event.preventDefault();
 };
 
 const onTextFocus = () => {
@@ -373,4 +382,24 @@ const setKeywords = (input: string) => {
   keywords.value = input;
   emit('typing', input);
 };
+
+const footer = ref(null) as Ref<HTMLDivElement | null>;
+
+function preventUnfocusOnFooter() {
+  const elements = (footer.value?.querySelectorAll('button, a') ??
+    []) as HTMLElement[];
+  preventUnfocus(elements);
+}
+
+onMounted(() => {
+  preventUnfocusOnFooter();
+});
+
+useMutationObserver(
+  footer,
+  () => {
+    preventUnfocusOnFooter();
+  },
+  { attributes: false, childList: true }
+);
 </script>

package/src/components/BaseAutocompleteFetch.stories.js

@@ -79,7 +79,10 @@ export const SlotFooter = (args) => {
     components: { BaseAutocompleteFetch },
     setup() {
       const value = ref(null);
-      return { args, value };
+      function onClick() {
+        alert(1);
+      }
+      return { args, value, onClick };
     },
     template: `
     <BaseAutocompleteFetch
@@ -87,8 +90,8 @@ export const SlotFooter = (args) => {
       v-bind="args"
     >
       <template #footer>
-        <div class="text-center p-1 pt-2 mt-2 border-t">
-          <button class="btn btn-sm w-full btn-slate-200-outline">This is the footer 💯</button>
+        <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>
     </BaseAutocompleteFetch>

package/src/components/BaseAutocompleteFetch.vue

@@ -22,12 +22,17 @@
 
     <template #footer="footerProps">
       <slot name="footer" v-bind="footerProps" :keywords="keywords">
-        <div v-if="createNewUrl" class="p-2">
+        <div
+          v-if="createNewUrl"
+          class="p-2"
+          :class="{
+            'border-t border-slate-300': footerProps.options.length > 0,
+          }"
+        >
           <router-link
             :to="createNewUrl"
             target="_blank"
-            class="btn flex items-center justify-center font-normal shadow"
-            @mousedown="footerProps.dontLooseFocus"
+            class="btn btn-slate-200-outline flex items-center justify-center"
           >
             <BaseIcon
               icon="heroicons-solid:plus"

package/src/components/BaseBelongsTo.stories.js

@@ -40,10 +40,12 @@ export const Disabled = (args) => {
   return {
     components: { BaseBelongsTo },
     setup() {
-      return { args };
+      const value = ref(null);
+      return { args, value };
     },
     template: `<BaseBelongsTo
       v-bind="args"
+      v-model="value"
       :current-model="{title: 'Dark Vader', id: 1}"
       :disabled="true"
     ></BaseBelongsTo>`,
@@ -88,7 +90,10 @@ export const SlotFooter = (args) => {
     components: { BaseBelongsTo },
     setup() {
       const value = ref(null);
-      return { args, value };
+      function onClick() {
+        alert(1);
+      }
+      return { args, value, onClick };
     },
     template: `
     <BaseBelongsTo
@@ -96,8 +101,8 @@ export const SlotFooter = (args) => {
       v-bind="args"
     >
       <template #footer>
-        <div class="text-center p-1 pt-2 mt-2 border-t">
-          <button class="btn btn-sm w-full btn-slate-200-outline">This is the footer 💯</button>
+        <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>
     </BaseBelongsTo>

package/src/components/BaseBelongsTo.vue

@@ -29,6 +29,7 @@ import { PropType } from 'vue';
 import { RouteLocationRaw } from 'vue-router';
 import { AxiosResponse } from 'axios';
 import { config } from '@/index';
+import BaseAutocompleteFetch from './BaseAutocompleteFetch.vue';
 
 const props = defineProps({
   modelValue: {

package/src/components/BaseCard.vue

@@ -4,7 +4,7 @@
     class="border-t border-b border-slate-300 bg-white"
     :class="{
       'rounded-lg border-r border-l shadow-sm': width != windowWidth,
-      'overflow-hidden': clipped,
+      'relative isolate overflow-hidden': clipped,
     }"
   >
     <slot />

package/src/components/BaseCharacterCounter.stories.js

@@ -0,0 +1,30 @@
+import BaseCharacterCounter from './BaseCharacterCounter.vue';
+import BaseInput from './BaseInput.vue';
+
+export default {
+  title: 'Components/BaseCharacterCounter',
+  component: BaseCharacterCounter,
+  args: {
+    text: 'Test',
+    max: 100,
+    min: 10,
+  },
+};
+
+const Template = (args) => ({
+  components: {
+    BaseCharacterCounter,
+    BaseInput,
+  },
+  setup() {
+    const text = ref('bla bla');
+    return { args, text };
+  },
+  template: `
+    <BaseInput v-model="text" name="test" class="w-full mb-1"></BaseInput>
+    <BaseCharacterCounter v-bind="args" :text="text" class="text-xs text-slate-500"></BaseCharacterCounter>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {};