sprintify-ui 0.8.70 → 0.9.1

package/dist/types/components/BaseHasManyFetch.vue.d.ts

@@ -0,0 +1,398 @@
+import { RawOption } from '@/types';
+import { PropType } from 'vue';
+declare function __VLS_template(): {
+    slots: {
+        items?(_: {
+            items: import("@/types").NormalizedOption[];
+            removeOption: (option: import("@/types").NormalizedOption) => void;
+            disabled: boolean;
+        }): any;
+        option?(_: {
+            focus: () => void;
+            blur: () => void;
+            open: () => void;
+            close: () => void;
+            keywords: import("vue").ComputedRef<string>;
+            option: RawOption;
+            selected: boolean;
+            active: boolean;
+        }): any;
+        empty?(_: {
+            firstSearch: boolean;
+            focus: () => void;
+            blur: () => void;
+            open: () => void;
+            close: () => void;
+            keywords: import("vue").ComputedRef<string>;
+        }): any;
+        footer?(_: {
+            keywords: string;
+            focus: () => void;
+            blur: () => void;
+            open: () => void;
+            close: () => void;
+            options: import("@/types").NormalizedOption[];
+        }): any;
+    };
+    refs: {
+        tagAutocompleteFetch: ({
+            $: import("vue").ComponentInternalInstance;
+            $data: {};
+            $props: Partial<{
+                required: boolean;
+                disabled: boolean;
+                placeholder: string;
+                hasError: boolean;
+                max: number;
+                focusOnMount: boolean;
+                queryKey: string;
+            }> & Omit<{
+                readonly required: boolean;
+                readonly disabled: boolean;
+                readonly modelValue: RawOption[];
+                readonly hasError: boolean;
+                readonly url: string;
+                readonly labelKey: string;
+                readonly valueKey: string;
+                readonly focusOnMount: boolean;
+                readonly queryKey: string;
+                readonly placeholder?: string | undefined;
+                readonly max?: number | undefined;
+                readonly onFocus?: ((...args: any[]) => any) | undefined;
+                readonly "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+                readonly onScrollBottom?: ((...args: any[]) => any) | undefined;
+                readonly onTyping?: ((...args: any[]) => any) | undefined;
+            } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "required" | "disabled" | "placeholder" | "hasError" | "max" | "focusOnMount" | "queryKey">;
+            $attrs: {
+                [x: string]: unknown;
+            };
+            $refs: {
+                [x: string]: unknown;
+            };
+            $slots: Readonly<{
+                [name: string]: import("vue").Slot<any> | undefined;
+            }>;
+            $root: import("vue").ComponentPublicInstance | null;
+            $parent: import("vue").ComponentPublicInstance | null;
+            $host: Element | null;
+            $emit: ((event: "focus", ...args: any[]) => void) & ((event: "update:modelValue", ...args: any[]) => void) & ((event: "scrollBottom", ...args: any[]) => void) & ((event: "typing", ...args: any[]) => void);
+            $el: any;
+            $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+                modelValue: {
+                    required: true;
+                    type: PropType<RawOption[]>;
+                };
+                url: {
+                    required: true;
+                    type: StringConstructor;
+                };
+                labelKey: {
+                    required: true;
+                    type: StringConstructor;
+                };
+                valueKey: {
+                    required: true;
+                    type: StringConstructor;
+                };
+                placeholder: {
+                    default: undefined;
+                    type: StringConstructor;
+                };
+                required: {
+                    default: boolean;
+                    type: BooleanConstructor;
+                };
+                disabled: {
+                    default: boolean;
+                    type: BooleanConstructor;
+                };
+                max: {
+                    default: undefined;
+                    type: NumberConstructor;
+                };
+                queryKey: {
+                    default: string;
+                    type: StringConstructor;
+                };
+                hasError: {
+                    default: boolean;
+                    type: BooleanConstructor;
+                };
+                focusOnMount: {
+                    default: boolean;
+                    type: BooleanConstructor;
+                };
+            }>> & Readonly<{
+                onFocus?: ((...args: any[]) => any) | undefined;
+                "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+                onScrollBottom?: ((...args: any[]) => any) | undefined;
+                onTyping?: ((...args: any[]) => any) | undefined;
+            }>, {
+                focus: () => void | undefined;
+                blur: () => void | undefined;
+                open: () => void | undefined;
+                close: () => void | undefined;
+                setKeywords: (input: string) => void | undefined;
+            }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+                focus: (...args: any[]) => void;
+                "update:modelValue": (...args: any[]) => void;
+                scrollBottom: (...args: any[]) => void;
+                typing: (...args: any[]) => void;
+            }, string, {
+                required: boolean;
+                disabled: boolean;
+                placeholder: string;
+                hasError: boolean;
+                max: number;
+                focusOnMount: boolean;
+                queryKey: string;
+            }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & {
+                beforeCreate?: (() => void) | (() => void)[];
+                created?: (() => void) | (() => void)[];
+                beforeMount?: (() => void) | (() => void)[];
+                mounted?: (() => void) | (() => void)[];
+                beforeUpdate?: (() => void) | (() => void)[];
+                updated?: (() => void) | (() => void)[];
+                activated?: (() => void) | (() => void)[];
+                deactivated?: (() => void) | (() => void)[];
+                beforeDestroy?: (() => void) | (() => void)[];
+                beforeUnmount?: (() => void) | (() => void)[];
+                destroyed?: (() => void) | (() => void)[];
+                unmounted?: (() => void) | (() => void)[];
+                renderTracked?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+                renderTriggered?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+                errorCaptured?: ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void)[];
+            };
+            $forceUpdate: () => void;
+            $nextTick: typeof import("vue").nextTick;
+            $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import("@vue/reactivity").OnCleanup]) => any : (...args: [any, any, import("@vue/reactivity").OnCleanup]) => any, options?: import("vue").WatchOptions): import("vue").WatchStopHandle;
+        } & Readonly<{
+            required: boolean;
+            disabled: boolean;
+            placeholder: string;
+            hasError: boolean;
+            max: number;
+            focusOnMount: boolean;
+            queryKey: string;
+        }> & Omit<Readonly<import("vue").ExtractPropTypes<{
+            modelValue: {
+                required: true;
+                type: PropType<RawOption[]>;
+            };
+            url: {
+                required: true;
+                type: StringConstructor;
+            };
+            labelKey: {
+                required: true;
+                type: StringConstructor;
+            };
+            valueKey: {
+                required: true;
+                type: StringConstructor;
+            };
+            placeholder: {
+                default: undefined;
+                type: StringConstructor;
+            };
+            required: {
+                default: boolean;
+                type: BooleanConstructor;
+            };
+            disabled: {
+                default: boolean;
+                type: BooleanConstructor;
+            };
+            max: {
+                default: undefined;
+                type: NumberConstructor;
+            };
+            queryKey: {
+                default: string;
+                type: StringConstructor;
+            };
+            hasError: {
+                default: boolean;
+                type: BooleanConstructor;
+            };
+            focusOnMount: {
+                default: boolean;
+                type: BooleanConstructor;
+            };
+        }>> & Readonly<{
+            onFocus?: ((...args: any[]) => any) | undefined;
+            "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+            onScrollBottom?: ((...args: any[]) => any) | undefined;
+            onTyping?: ((...args: any[]) => any) | undefined;
+        }>, "blur" | "close" | "focus" | "open" | "setKeywords" | ("required" | "disabled" | "placeholder" | "hasError" | "max" | "focusOnMount" | "queryKey")> & import("vue").ShallowUnwrapRef<{
+            focus: () => void | undefined;
+            blur: () => void | undefined;
+            open: () => void | undefined;
+            close: () => void | undefined;
+            setKeywords: (input: string) => void | undefined;
+        }> & {} & import("vue").ComponentCustomProperties & {} & {
+            $slots: {
+                items?(_: {
+                    items: import("@/types").NormalizedOption[];
+                    removeOption: (option: import("@/types").NormalizedOption) => void;
+                    disabled: boolean;
+                }): any;
+                option?(_: {
+                    focus: () => void;
+                    blur: () => void;
+                    open: () => void;
+                    close: () => void;
+                    keywords: import("vue").ComputedRef<string>;
+                    option: RawOption;
+                    selected: boolean;
+                    active: boolean;
+                }): any;
+                footer?(_: {
+                    keywords: string;
+                    focus: () => void;
+                    blur: () => void;
+                    open: () => void;
+                    close: () => void;
+                    options: import("@/types").NormalizedOption[];
+                }): any;
+                empty?(_: {
+                    firstSearch: boolean;
+                    focus: () => void;
+                    blur: () => void;
+                    open: () => void;
+                    close: () => void;
+                    keywords: import("vue").ComputedRef<string>;
+                }): any;
+            };
+        }) | null;
+    };
+    attrs: Partial<{}>;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    modelValue: {
+        default: undefined;
+        type: PropType<string[] | string | number | null | undefined>;
+    };
+    url: {
+        required: true;
+        type: StringConstructor;
+    };
+    showRouteUrl: {
+        default: undefined;
+        type: PropType<((ids: (string | number)[]) => string) | undefined>;
+    };
+    primaryKey: {
+        default: string;
+        type: StringConstructor;
+    };
+    field: {
+        required: true;
+        type: StringConstructor;
+    };
+    required: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
+    disabled: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
+    placeholder: {
+        default: undefined;
+        type: StringConstructor;
+    };
+    max: {
+        default: undefined;
+        type: NumberConstructor;
+    };
+    queryKey: {
+        default: string;
+        type: StringConstructor;
+    };
+    currentModels: {
+        default(): undefined;
+        type: PropType<RawOption[] | undefined>;
+    };
+    hasError: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
+}>, {
+    focus: () => void | undefined;
+    blur: () => void | undefined;
+    open: () => void | undefined;
+    close: () => void | undefined;
+    setKeywords: (input: string) => void | undefined;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: {
+        default: undefined;
+        type: PropType<string[] | string | number | null | undefined>;
+    };
+    url: {
+        required: true;
+        type: StringConstructor;
+    };
+    showRouteUrl: {
+        default: undefined;
+        type: PropType<((ids: (string | number)[]) => string) | undefined>;
+    };
+    primaryKey: {
+        default: string;
+        type: StringConstructor;
+    };
+    field: {
+        required: true;
+        type: StringConstructor;
+    };
+    required: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
+    disabled: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
+    placeholder: {
+        default: undefined;
+        type: StringConstructor;
+    };
+    max: {
+        default: undefined;
+        type: NumberConstructor;
+    };
+    queryKey: {
+        default: string;
+        type: StringConstructor;
+    };
+    currentModels: {
+        default(): undefined;
+        type: PropType<RawOption[] | undefined>;
+    };
+    hasError: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}>, {
+    required: boolean;
+    disabled: boolean;
+    modelValue: string | number | string[] | null | undefined;
+    placeholder: string;
+    hasError: boolean;
+    max: number;
+    queryKey: string;
+    primaryKey: string;
+    showRouteUrl: ((ids: (string | number)[]) => string) | undefined;
+    currentModels: RawOption[] | undefined;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -46,6 +46,7 @@ import BaseFileUploader from './BaseFileUploader.vue';
 import BaseForm from './BaseForm.vue';
 import BaseGantt from './BaseGantt.vue';
 import BaseHasMany from './BaseHasMany.vue';
+import BaseHasManyFetch from './BaseHasManyFetch.vue';
 import BaseHeader from './BaseHeader.vue';
 import { Icon as BaseIcon } from '@iconify/vue';
 import BaseIconPicker from './BaseIconPicker.vue';
@@ -104,4 +105,4 @@ import BaseLayoutStacked from './BaseLayoutStacked.vue';
 import BaseLayoutStackedConfigurable from './BaseLayoutStackedConfigurable.vue';
 import BaseLayoutSidebar from './BaseLayoutSidebar.vue';
 import BaseLayoutSidebarConfigurable from './BaseLayoutSidebarConfigurable.vue';
-export { BaseActionItem, BaseAddressForm, BaseAlert, BaseApp, BaseAppDialogs, BaseAppSnackbars, BaseAutocomplete, BaseAutocompleteFetch, BaseAvatar, BaseAvatarGroup, BaseBadge, BaseBelongsTo, BaseBelongsToFetch, BaseBoolean, BaseBreadcrumbs, BaseButton, BaseButtonGroup, BaseCard, BaseCardRow, BaseCharacterCounter, BaseClipboard, BaseCalendar, BaseCollapse, BaseColor, BaseContainer, BaseCounter, BaseCropper, BaseCropperModal, BaseDataIterator, BaseDataTable, BaseDatePicker, BaseDateSelect, BaseDescriptionList, BaseDescriptionListItem, BaseDialog, BaseDisplayRelativeTime, BaseDropdown, BaseDropdownAutocomplete, BaseEmptyState, BaseField, BaseFieldI18n, BaseFilePicker, BaseFilePickerCrop, BaseFileUploader, BaseForm, BaseGantt, BaseHasMany, BaseHeader, BaseIcon, BaseIconPicker, BaseInput, BaseInputLabel, BaseInputPercent, BaseJsonReader, BaseLazy, BaseLoadingCover, BaseMediaItem, BaseMediaLibrary, BaseMediaPreview, BaseMenu, BaseMenuItem, BaseModalCenter, BaseModalSide, BaseNavbar, BaseNavbarItem, BaseNavbarItemContent, BaseNavbarSideItem, BasePagination, BasePanel, BasePassword, BaseProgressCircle, BaseRadioGroup, BaseReadMore, BaseRichText, BaseSelect, BaseShortcut, BaseSideNavigation, BaseSideNavigationItem, BaseSkeleton, BaseStatistic, BaseStepper, BaseStepperItem, BaseSwitch, BaseSystemAlert, BaseTable, BaseTableBody, BaseTableCell, BaseTableHead, BaseTableHeader, BaseTableRow, BaseTabs, BaseTabItem, BaseTagAutocomplete, BaseTagAutocompleteFetch, BaseTableColumn, BaseTextarea, BaseTextareaAutoresize, BaseTimeline, BaseTimelineItem, BaseTimePicker, BaseTooltip, BaseUniqueCode, BaseLayoutStacked, BaseLayoutStackedConfigurable, BaseLayoutSidebar, BaseLayoutSidebarConfigurable, };
+export { BaseActionItem, BaseAddressForm, BaseAlert, BaseApp, BaseAppDialogs, BaseAppSnackbars, BaseAutocomplete, BaseAutocompleteFetch, BaseAvatar, BaseAvatarGroup, BaseBadge, BaseBelongsTo, BaseBelongsToFetch, BaseBoolean, BaseBreadcrumbs, BaseButton, BaseButtonGroup, BaseCard, BaseCardRow, BaseCharacterCounter, BaseClipboard, BaseCalendar, BaseCollapse, BaseColor, BaseContainer, BaseCounter, BaseCropper, BaseCropperModal, BaseDataIterator, BaseDataTable, BaseDatePicker, BaseDateSelect, BaseDescriptionList, BaseDescriptionListItem, BaseDialog, BaseDisplayRelativeTime, BaseDropdown, BaseDropdownAutocomplete, BaseEmptyState, BaseField, BaseFieldI18n, BaseFilePicker, BaseFilePickerCrop, BaseFileUploader, BaseForm, BaseGantt, BaseHasMany, BaseHasManyFetch, BaseHeader, BaseIcon, BaseIconPicker, BaseInput, BaseInputLabel, BaseInputPercent, BaseJsonReader, BaseLazy, BaseLoadingCover, BaseMediaItem, BaseMediaLibrary, BaseMediaPreview, BaseMenu, BaseMenuItem, BaseModalCenter, BaseModalSide, BaseNavbar, BaseNavbarItem, BaseNavbarItemContent, BaseNavbarSideItem, BasePagination, BasePanel, BasePassword, BaseProgressCircle, BaseRadioGroup, BaseReadMore, BaseRichText, BaseSelect, BaseShortcut, BaseSideNavigation, BaseSideNavigationItem, BaseSkeleton, BaseStatistic, BaseStepper, BaseStepperItem, BaseSwitch, BaseSystemAlert, BaseTable, BaseTableBody, BaseTableCell, BaseTableHead, BaseTableHeader, BaseTableRow, BaseTabs, BaseTabItem, BaseTagAutocomplete, BaseTagAutocompleteFetch, BaseTableColumn, BaseTextarea, BaseTextareaAutoresize, BaseTimeline, BaseTimelineItem, BaseTimePicker, BaseTooltip, BaseUniqueCode, BaseLayoutStacked, BaseLayoutStackedConfigurable, BaseLayoutSidebar, BaseLayoutSidebarConfigurable, };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.8.70",
+  "version": "0.9.1",
   "type": "module",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",

package/src/components/BaseDataIterator.vue

@@ -326,7 +326,7 @@ const props = defineProps({
    * Per page (only when using local data)
    */
   perPage: {
-    default: 16,
+    default: undefined,
     type: Number,
   },
 
@@ -805,6 +805,10 @@ function paginateItems(items: Collection | undefined) {
     return [];
   }
 
+  if (!props.perPage) {
+    return items;
+  }
+
   return items.slice(
     (page.value - 1) * props.perPage,
     page.value * props.perPage

package/src/components/BaseDataTable.stories.js

@@ -341,7 +341,7 @@ const LocalTemplate = (args) => ({
 export const Local = LocalTemplate.bind({});
 const localProps = cloneDeep(componentProps);
 localProps.url = null;
-localProps.perPage = 4;
+localProps.perPage = 10;
 localProps.rowTo = undefined;
 localProps.maxHeight = undefined;
 localProps.rowKey = (row) => row.value;
@@ -350,7 +350,6 @@ Local.args = localProps;
 export const VirtualScrolling = LocalTemplate.bind({});
 const localProps2 = cloneDeep(componentProps);
 localProps2.url = null;
-localProps2.perPage = 500;
 localProps2.rowTo = undefined;
 localProps2.maxHeight = undefined;
 localProps2.rowKey = (row) => row.value;

package/src/components/BaseDataTable.vue

@@ -278,7 +278,7 @@ const props = defineProps({
    * Per page (only when using local data)
    */
   perPage: {
-    default: 16,
+    default: undefined,
     type: Number,
   },
 

package/src/components/BaseHasMany.stories.js

@@ -15,13 +15,9 @@ export default {
     },
   },
   args: {
-    url: "https://faker.witify.io/api/todos",
-    field: "name",
-    primaryKey: "id",
-    showRouteUrl: (ids) => {
-      const params = QueryString.stringify({ filter: { id: ids } });
-      return `https://faker.witify.io/api/todos?${params}`;
-    },
+    options: options,
+    field: "label",
+    primaryKey: "value",
   },
   decorators: [() => ({ template: '<div class="mb-36"><story/></div>' })],
 };
@@ -30,18 +26,13 @@ const Template = (args) => {
   return {
     components: { BaseHasMany, ShowValue, BaseAppSnackbars },
     setup() {
-      const value = ref(4);
-      const currentModels = ref([
-        { id: 4, name: "Todo 4 (local)" },
-        { id: 6, name: "Todo 6 (local)" },
-      ]);
-      return { args, value, currentModels };
+      const value = ref([options[4].value]);
+      return { args, value };
     },
     template: `
       <BaseHasMany
         v-model="value"
         v-bind="args"
-        :current-models="currentModels"
       ></BaseHasMany>
       <ShowValue :value="value" />
       <BaseAppSnackbars />
@@ -56,15 +47,12 @@ export const Disabled = (args) => {
   return {
     components: { BaseHasMany, ShowValue },
     setup() {
-      // current model is incorrect, to test component's resilience
-      const currentModel = options[1];
-      const value = ref([7]);
-      return { args, value, currentModel };
+      const value = ref([options[2].value]);
+      return { args, value };
     },
     template: `<BaseHasMany
       v-bind="args"
       v-model="value"
-      :current-models="[currentModel]"
       :disabled="true"
     ></BaseHasMany>
     <ShowValue :value="value" />`,
@@ -76,15 +64,6 @@ Maximum.args = {
   max: 3,
 };
 
-export const ShowRouteUrl = Template.bind({});
-ShowRouteUrl.args = {
-  max: 3,
-  showRouteUrl: (ids) => {
-    const params = QueryString.stringify({ filter: { id: ids } });
-    return `https://faker.witify.io/api/todos?${params}`;
-  },
-};
-
 export const Sizes = (args) => ({
   components: { BaseHasMany },
   setup() {
@@ -122,8 +101,7 @@ export const SlotOption = (args) => {
             'bg-blue-600 text-white hover:bg-blue-700': active && selected,
           }"
         >
-          <p class="text-sm font-medium">{{ option.title }}</p>
-          <p class="opacity-60 text-xs">{{ option.owner?.name }}</p>
+          <p class="opacity-60 text-xs">{{ option.label }}</p>
         </div>
       </template>
     </BaseHasMany>
@@ -221,49 +199,6 @@ export const SlotEmpty = (args) => {
   };
 };
 
-const RaceConditionTemplate = (args) => {
-  return {
-    components: { BaseHasMany, ShowValue, BaseAppSnackbars },
-    setup() {
-      const value = ref(["4", "6"]);
-
-      const valueExternal = ref([]);
-
-      const intervalId = setInterval(() => {
-        const newValue = [random(1, 10)];
-        value.value = newValue;
-        valueExternal.value = newValue;
-      }, 300);
-
-      setTimeout(() => {
-        clearInterval(intervalId);
-      }, 1000);
-
-      return { args, value, valueExternal };
-    },
-    template: `
-      <BaseHasMany
-        v-model="value"
-        v-bind="args"
-      ></BaseHasMany>
-
-      <br>
-
-      <p class="-mb-4">Value from data</p>
-      <ShowValue :value="valueExternal" />
-
-      <br>
-
-      <p class="-mb-4">Value from component</p>
-      <ShowValue :value="value" />
-      <BaseAppSnackbars />
-  `,
-  };
-};
-
-export const RaceCondition = RaceConditionTemplate.bind({});
-RaceCondition.args = {};
-
 export const Field = createFieldStory({
   component: BaseHasMany,
   componentName: "BaseHasMany",