sprintify-ui 0.0.76 → 0.0.78

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

@@ -0,0 +1,131 @@
+import { Placement } from '@popperjs/core';
+import { PropType } from 'vue';
+declare const _default: {
+    new (...args: any[]): {
+        $: import("vue").ComponentInternalInstance;
+        $data: {};
+        $props: Partial<{
+            placement: Placement;
+            offset: [number, number];
+            animated: boolean;
+        }> & Omit<Readonly<import("vue").ExtractPropTypes<{
+            placement: {
+                type: PropType<Placement>;
+                default(): "bottom";
+            };
+            offset: {
+                default(): number[];
+                type: PropType<[number, number]>;
+            };
+            animated: {
+                default: boolean;
+                type: BooleanConstructor;
+            };
+        }>> & {
+            onOpen?: ((...args: any[]) => any) | undefined;
+            onClose?: ((...args: any[]) => any) | undefined;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "placement" | "offset" | "animated">;
+        $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: "open" | "close", ...args: any[]) => void;
+        $el: any;
+        $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+            placement: {
+                type: PropType<Placement>;
+                default(): "bottom";
+            };
+            offset: {
+                default(): number[];
+                type: PropType<[number, number]>;
+            };
+            animated: {
+                default: boolean;
+                type: BooleanConstructor;
+            };
+        }>> & {
+            onOpen?: ((...args: any[]) => any) | undefined;
+            onClose?: ((...args: any[]) => any) | undefined;
+        }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("open" | "close")[], string, {
+            placement: Placement;
+            offset: [number, number];
+            animated: 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<{
+        placement: {
+            type: PropType<Placement>;
+            default(): "bottom";
+        };
+        offset: {
+            default(): number[];
+            type: PropType<[number, number]>;
+        };
+        animated: {
+            default: boolean;
+            type: BooleanConstructor;
+        };
+    }>> & {
+        onOpen?: ((...args: any[]) => any) | undefined;
+        onClose?: ((...args: any[]) => any) | undefined;
+    } & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {};
+    __isFragment?: undefined;
+    __isTeleport?: undefined;
+    __isSuspense?: undefined;
+} & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+    placement: {
+        type: PropType<Placement>;
+        default(): "bottom";
+    };
+    offset: {
+        default(): number[];
+        type: PropType<[number, number]>;
+    };
+    animated: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
+}>> & {
+    onOpen?: ((...args: any[]) => any) | undefined;
+    onClose?: ((...args: any[]) => any) | undefined;
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("open" | "close")[], "open" | "close", {
+    placement: Placement;
+    offset: [number, number];
+    animated: boolean;
+}, {}, string> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+    $slots: {
+        button: (_: {}) => any;
+        dropdown: (_: {
+            close: () => void;
+            open: () => void;
+            toggle: () => void;
+        }) => any;
+    };
+});
+export default _default;

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

@@ -148,9 +148,9 @@ declare const _default: import("vue").DefineComponent<{
     placeholder: string;
     disabled: boolean;
     hasError: boolean;
+    autocomplete: boolean;
     min: number;
     max: number;
-    autocomplete: boolean;
     preventSubmit: boolean;
     iconLeft: string;
     iconRight: string;

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

@@ -430,10 +430,10 @@ declare const _default: import("vue").DefineComponent<{
     };
 }>>, {
     props: Record<string, any>;
+    inputClass: string;
     component: string;
     defaultValue: string | number | boolean;
     locales: Locales;
-    inputClass: string;
     layout: string;
 }>;
 export default _default;

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

@@ -11,7 +11,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     actionsVisible: {
         default: string;
-        type: PropType<"toggle" | "always">;
+        type: PropType<"always" | "toggle">;
     };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click"[], "click", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     item: {
@@ -24,12 +24,12 @@ declare const _default: import("vue").DefineComponent<{
     };
     actionsVisible: {
         default: string;
-        type: PropType<"toggle" | "always">;
+        type: PropType<"always" | "toggle">;
     };
 }>> & {
     onClick?: ((...args: any[]) => any) | undefined;
 }, {
     dark: boolean;
-    actionsVisible: "toggle" | "always";
+    actionsVisible: "always" | "toggle";
 }>;
 export default _default;

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

@@ -9,8 +9,8 @@ declare const _default: {
             modelValue: Option | undefined;
             disabled: boolean;
             hasError: boolean;
-            labelClass: string;
             inputClass: string;
+            labelClass: string;
         }> & Omit<Readonly<import("vue").ExtractPropTypes<{
             modelValue: {
                 default: undefined;
@@ -54,7 +54,7 @@ declare const _default: {
             };
         }>> & {
             "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "required" | "modelValue" | "disabled" | "hasError" | "labelClass" | "inputClass">;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "required" | "modelValue" | "disabled" | "hasError" | "inputClass" | "labelClass">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -116,8 +116,8 @@ declare const _default: {
             modelValue: Option | undefined;
             disabled: boolean;
             hasError: boolean;
-            labelClass: string;
             inputClass: string;
+            labelClass: string;
         }, {}, string> & {
             beforeCreate?: ((() => void) | (() => void)[]) | undefined;
             created?: ((() => void) | (() => void)[]) | undefined;
@@ -233,8 +233,8 @@ declare const _default: {
     modelValue: Option | undefined;
     disabled: boolean;
     hasError: boolean;
-    labelClass: string;
     inputClass: string;
+    labelClass: string;
 }, {}, string> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
     $slots: {
         option: (_: {

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

@@ -79,7 +79,7 @@ declare const _default: {
         }>;
         $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: "update:modelValue" | "typing" | "focus" | "scrollBottom", ...args: any[]) => void;
+        $emit: (event: "update:modelValue" | "focus" | "typing" | "scrollBottom", ...args: any[]) => void;
         $el: any;
         $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
             modelValue: {
@@ -135,7 +135,7 @@ declare const _default: {
             "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
             onTyping?: ((...args: any[]) => any) | undefined;
             onScrollBottom?: ((...args: any[]) => any) | undefined;
-        }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "typing" | "focus" | "scrollBottom")[], string, {
+        }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "focus" | "typing" | "scrollBottom")[], string, {
             filter: (option: NormalizedOption) => boolean;
             required: boolean;
             name: string;
@@ -276,7 +276,7 @@ declare const _default: {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onTyping?: ((...args: any[]) => any) | undefined;
     onScrollBottom?: ((...args: any[]) => any) | undefined;
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "typing" | "focus" | "scrollBottom")[], "update:modelValue" | "typing" | "focus" | "scrollBottom", {
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "focus" | "typing" | "scrollBottom")[], "update:modelValue" | "focus" | "typing" | "scrollBottom", {
     filter: (option: NormalizedOption) => boolean;
     required: boolean;
     name: string;

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

@@ -69,7 +69,7 @@ declare const _default: {
         }>;
         $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: "update:modelValue" | "typing" | "focus" | "scrollBottom", ...args: any[]) => void;
+        $emit: (event: "update:modelValue" | "focus" | "typing" | "scrollBottom", ...args: any[]) => void;
         $el: any;
         $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
             modelValue: {
@@ -117,7 +117,7 @@ declare const _default: {
             "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
             onTyping?: ((...args: any[]) => any) | undefined;
             onScrollBottom?: ((...args: any[]) => any) | undefined;
-        }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "typing" | "focus" | "scrollBottom")[], string, {
+        }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "focus" | "typing" | "scrollBottom")[], string, {
             required: boolean;
             placeholder: string;
             disabled: boolean;
@@ -240,7 +240,7 @@ declare const _default: {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onTyping?: ((...args: any[]) => any) | undefined;
     onScrollBottom?: ((...args: any[]) => any) | undefined;
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "typing" | "focus" | "scrollBottom")[], "update:modelValue" | "typing" | "focus" | "scrollBottom", {
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "focus" | "typing" | "scrollBottom")[], "update:modelValue" | "focus" | "typing" | "scrollBottom", {
     required: boolean;
     placeholder: string;
     disabled: boolean;

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

@@ -26,6 +26,7 @@ import BaseDateSelect from './BaseDateSelect.vue';
 import BaseDescriptionList from './BaseDescriptionList.vue';
 import BaseDescriptionListItem from './BaseDescriptionListItem.vue';
 import BaseDialog from './BaseDialog.vue';
+import BaseDropdown from './BaseDropdown.vue';
 import BaseField from './BaseField.vue';
 import BaseFieldI18n from './BaseFieldI18n.vue';
 import BaseFilePicker from './BaseFilePicker.vue';
@@ -74,4 +75,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, BaseAvatarGroup, 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, };
+export { BaseActionItem, BaseAlert, BaseApp, BaseAppDialogs, BaseAppNotifications, BaseAutocomplete, BaseAutocompleteFetch, BaseAvatar, BaseAvatarGroup, BaseBadge, BaseBelongsTo, BaseBoolean, BaseBreadcrumbs, BaseButton, BaseButtonGroup, BaseCard, BaseCardRow, BaseCharacterCounter, BaseClipboard, BaseContainer, BaseCounter, BaseDataIterator, BaseDataTable, BaseDatePicker, BaseDateSelect, BaseDescriptionList, BaseDescriptionListItem, BaseDialog, BaseDropdown, 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.0.76",
+  "version": "0.0.78",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
     "build-fast": "rimraf dist && vite build",
@@ -12,6 +12,7 @@
     "prepack": "npm run build"
   },
   "peerDependencies": {
+    "@popperjs/core": "^2.11.6",
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/forms": "^0.5.3",
     "@tailwindcss/line-clamp": "^0.4.2",
@@ -37,6 +38,7 @@
   "devDependencies": {
     "@babel/core": "^7.20.2",
     "@iconify/vue": "^4.0.0",
+    "@popperjs/core": "^2.11.6",
     "@storybook/addon-actions": "^6.5.13",
     "@storybook/addon-essentials": "^6.5.13",
     "@storybook/addon-interactions": "^6.5.13",

package/src/components/BaseAutocomplete.stories.js

@@ -2,9 +2,25 @@ import { createFieldStory, options } from '../../.storybook/utils';
 import BaseAutocomplete from './BaseAutocomplete.vue';
 import ShowValue from '@/../.storybook/components/ShowValue.vue';
 
+const sizes = ['xs', 'sm', 'base'];
+
 export default {
   title: 'Form/BaseAutocomplete',
   component: BaseAutocomplete,
+  argTypes: {
+    size: {
+      control: {
+        type: 'select',
+        options: sizes,
+      },
+    },
+    dropdownShow: {
+      control: {
+        type: 'select',
+        options: ['always', 'focus'],
+      },
+    },
+  },
   args: {
     labelKey: 'label',
     valueKey: 'value',
@@ -28,6 +44,17 @@ const Template = (args) => ({
 export const Demo = Template.bind({});
 Demo.args = {};
 
+export const AlwaysShowDropdown = Template.bind({});
+AlwaysShowDropdown.args = {
+  inline: true,
+  dropdownShow: 'always',
+};
+
+export const NoFocus = Template.bind({});
+NoFocus.args = {
+  visibleFocus: false,
+};
+
 export const Disabled = Template.bind({});
 Disabled.args = {
   options: [],
@@ -40,6 +67,25 @@ Loading.args = {
   loading: true,
 };
 
+export const Inline = Template.bind({});
+Inline.args = {
+  inline: true,
+};
+
+export const Sizes = (args) => ({
+  components: { BaseAutocomplete },
+  setup() {
+    const value = ref(null);
+    return { args, sizes, value };
+  },
+  template: `
+  <div v-for="size in sizes" class="mb-1">
+    <p class="text-xs text-slate-600 leading-tight">{{ size }}</p>
+    <BaseAutocomplete v-model="value" v-bind="args" :size="size"></BaseAutocomplete>
+  </div>
+  `,
+});
+
 export const SlotOption = (args) => ({
   components: { BaseAutocomplete },
   setup() {