sprintify-ui 0.4.6 → 0.4.8

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

@@ -5,13 +5,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: undefined;
         type: PropType<string | number | null | undefined>;
     };
-    url: {
+    options: {
         required: true;
-        type: StringConstructor;
-    };
-    showRouteUrl: {
-        default: undefined;
-        type: PropType<((id: string | number) => string) | undefined>;
+        type: PropType<Option[]>;
     };
     primaryKey: {
         default: string;
@@ -88,13 +84,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: undefined;
         type: PropType<string | number | null | undefined>;
     };
-    url: {
+    options: {
         required: true;
-        type: StringConstructor;
-    };
-    showRouteUrl: {
-        default: undefined;
-        type: PropType<((id: string | number) => string) | undefined>;
+        type: PropType<Option[]>;
     };
     primaryKey: {
         default: string;
@@ -177,7 +169,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     visibleFocus: boolean;
     showEmptyOption: boolean;
     emptyOptionLabel: string;
-    showRouteUrl: ((id: string | number) => string) | undefined;
     primaryKey: string;
     currentModel: Option | null;
 }, {}>, {
@@ -192,7 +183,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         active: boolean;
     }): any;
     empty?(_: {
-        firstSearch: boolean;
         focus: () => void;
         blur: () => void;
         open: () => void;
@@ -200,11 +190,11 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         keywords: import("vue").ComputedRef<string>;
     }): any;
     footer?(_: {
-        keywords: string;
         focus: () => void;
         blur: () => void;
         open: () => void;
         close: () => void;
+        keywords: import("vue").ComputedRef<string>;
         options: import("@/types").NormalizedOption[];
     }): any;
 }>;

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

@@ -0,0 +1,216 @@
+import { PropType } from 'vue';
+import { Option, SelectConfiguration } from '@/types';
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    modelValue: {
+        default: undefined;
+        type: PropType<string | number | null | undefined>;
+    };
+    url: {
+        required: true;
+        type: StringConstructor;
+    };
+    showRouteUrl: {
+        default: undefined;
+        type: PropType<((id: string | number) => string) | undefined>;
+    };
+    primaryKey: {
+        default: string;
+        type: StringConstructor;
+    };
+    field: {
+        required: true;
+        type: StringConstructor;
+    };
+    required: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
+    disabled: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
+    name: {
+        default: undefined;
+        type: StringConstructor;
+    };
+    placeholder: {
+        default: undefined;
+        type: StringConstructor;
+    };
+    currentModel: {
+        default: null;
+        type: PropType<Option | null>;
+    };
+    hasError: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
+    inline: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
+    size: {
+        default: string;
+        type: PropType<"base" | "xs" | "sm">;
+    };
+    dropdownShow: {
+        default: string;
+        type: PropType<"focus" | "always">;
+    };
+    showModelValue: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
+    visibleFocus: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
+    showEmptyOption: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
+    emptyOptionLabel: {
+        default: undefined;
+        type: StringConstructor;
+    };
+    select: {
+        default: undefined;
+        type: PropType<SelectConfiguration | undefined>;
+    };
+}, {
+    focus: () => void | undefined;
+    blur: () => void | undefined;
+    open: () => void | undefined;
+    close: () => void | undefined;
+    setKeywords: (input: string) => void | undefined;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: {
+        default: undefined;
+        type: PropType<string | number | null | undefined>;
+    };
+    url: {
+        required: true;
+        type: StringConstructor;
+    };
+    showRouteUrl: {
+        default: undefined;
+        type: PropType<((id: string | number) => string) | undefined>;
+    };
+    primaryKey: {
+        default: string;
+        type: StringConstructor;
+    };
+    field: {
+        required: true;
+        type: StringConstructor;
+    };
+    required: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
+    disabled: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
+    name: {
+        default: undefined;
+        type: StringConstructor;
+    };
+    placeholder: {
+        default: undefined;
+        type: StringConstructor;
+    };
+    currentModel: {
+        default: null;
+        type: PropType<Option | null>;
+    };
+    hasError: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
+    inline: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
+    size: {
+        default: string;
+        type: PropType<"base" | "xs" | "sm">;
+    };
+    dropdownShow: {
+        default: string;
+        type: PropType<"focus" | "always">;
+    };
+    showModelValue: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
+    visibleFocus: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
+    showEmptyOption: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
+    emptyOptionLabel: {
+        default: undefined;
+        type: StringConstructor;
+    };
+    select: {
+        default: undefined;
+        type: PropType<SelectConfiguration | undefined>;
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
+    select: SelectConfiguration | undefined;
+    placeholder: string;
+    name: string;
+    disabled: boolean;
+    required: boolean;
+    inline: boolean;
+    modelValue: string | number | null | undefined;
+    hasError: boolean;
+    size: "base" | "xs" | "sm";
+    dropdownShow: "focus" | "always";
+    showModelValue: boolean;
+    visibleFocus: boolean;
+    showEmptyOption: boolean;
+    emptyOptionLabel: string;
+    primaryKey: string;
+    currentModel: Option | null;
+    showRouteUrl: ((id: string | number) => string) | undefined;
+}, {}>, {
+    option?(_: {
+        focus: () => void;
+        blur: () => void;
+        open: () => void;
+        close: () => void;
+        keywords: import("vue").ComputedRef<string>;
+        option: Option;
+        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;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -10,6 +10,7 @@ import BaseAvatar from './BaseAvatar.vue';
 import BaseAvatarGroup from './BaseAvatarGroup.vue';
 import BaseBadge from './BaseBadge.vue';
 import BaseBelongsTo from './BaseBelongsTo.vue';
+import BaseBelongsToFetch from './BaseBelongsToFetch.vue';
 import BaseBoolean from './BaseBoolean.vue';
 import BaseBreadcrumbs from './BaseBreadcrumbs.vue';
 import BaseButton from './BaseButton.vue';
@@ -94,4 +95,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, BaseAppNotifications, BaseAutocomplete, BaseAutocompleteFetch, BaseAvatar, BaseAvatarGroup, BaseBadge, BaseBelongsTo, BaseBoolean, BaseBreadcrumbs, BaseButton, BaseButtonGroup, BaseCard, BaseCardRow, BaseCharacterCounter, BaseClickOutside, BaseClipboard, BaseCalendar, 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, 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, BaseTabs, BaseTabItem, BaseTagAutocomplete, BaseTagAutocompleteFetch, BaseTable, BaseTableColumn, BaseTextarea, BaseTextareaAutoresize, BaseTimeline, BaseTimelineItem, BaseUniqueCode, BaseLayoutStacked, BaseLayoutStackedConfigurable, BaseLayoutSidebar, BaseLayoutSidebarConfigurable, };
+export { BaseActionItem, BaseAddressForm, BaseAlert, BaseApp, BaseAppDialogs, BaseAppNotifications, BaseAutocomplete, BaseAutocompleteFetch, BaseAvatar, BaseAvatarGroup, BaseBadge, BaseBelongsTo, BaseBelongsToFetch, BaseBoolean, BaseBreadcrumbs, BaseButton, BaseButtonGroup, BaseCard, BaseCardRow, BaseCharacterCounter, BaseClickOutside, BaseClipboard, BaseCalendar, 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, 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, BaseTabs, BaseTabItem, BaseTagAutocomplete, BaseTagAutocompleteFetch, BaseTable, BaseTableColumn, BaseTextarea, BaseTextareaAutoresize, BaseTimeline, BaseTimelineItem, BaseUniqueCode, BaseLayoutStacked, BaseLayoutStackedConfigurable, BaseLayoutSidebar, BaseLayoutSidebarConfigurable, };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
     "build-fast": "rimraf dist && vite build",

package/src/components/BaseBelongsTo.stories.js

@@ -17,8 +17,9 @@ export default {
     },
   },
   args: {
-    url: 'https://effettandem.com/api/content/articles',
-    field: 'title',
+    options: options,
+    field: 'label',
+    primaryKey: 'value',
   },
   decorators: [() => ({ template: '<div class="mb-36"><story/></div>' })],
 };
@@ -104,8 +105,8 @@ 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="text-sm font-medium">{{ option.label }}</p>
+            <p class="opacity-60 text-xs">{{ option.type }}</p>
           </div>
         </template>
       </BaseBelongsTo>
@@ -153,10 +154,7 @@ export const SlotEmpty = (args) => {
         v-bind="args"
       >
         <template #empty="props">
-          <div>
-            <div v-if="props.firstSearch" class="text-center py-10 p-6">🤓🤓🤓</div>
-            <div v-else class="text-center p-6">Start your search... 🔎</div>
-          </div>
+          <div class="text-center p-6 py-10 flex items-center justify-center">🤓🤓🤓</div>
         </template>
       </BaseBelongsTo>
     `,
@@ -173,8 +171,8 @@ export const WithSelect = (args) => {
       const select = {
         options: [
           { label: 'All', value: 'all' },
-          { label: 'Video', value: 'video' },
-          { label: 'Article', value: 'article' },
+          { label: 'Sith', value: 'sith' },
+          { label: 'Jedi', value: 'jedi' },
         ],
         labelKey: 'label',
         valueKey: 'value',
@@ -183,24 +181,20 @@ export const WithSelect = (args) => {
         },
       };
 
-      const url = computed(() => {
+      const options2 = computed(() => {
         if (selected.value == 'all' || !selected.value) {
-          return 'https://effettandem.com/api/content/articles';
+          return options;
         }
-        return (
-          'https://effettandem.com/api/content/articles' +
-          '?type=' +
-          selected.value
-        );
+        return options.filter((option) => option.type === selected.value);
       });
 
-      return { args, value, url, selected, select };
+      return { args, value, options2, selected, select };
     },
     template: `
   <BaseBelongsTo
     v-model="value"
     v-bind="args"
-    :url="url"
+    :options="options2"
     :select="select"
   >
   </BaseBelongsTo>

package/src/components/BaseBelongsTo.vue

@@ -1,8 +1,8 @@
 <template>
-  <BaseAutocompleteFetch
-    ref="autocompleteFetch"
+  <BaseAutocomplete
+    ref="autocomplete"
     :model-value="model"
-    :url="url"
+    :options="options"
     :disabled="disabled"
     :name="name"
     :placeholder="placeholder"
@@ -38,14 +38,12 @@
         v-bind="footerProps"
       />
     </template>
-  </BaseAutocompleteFetch>
+  </BaseAutocomplete>
 </template>
 
 <script lang="ts" setup>
 import { PropType } from 'vue';
-import { AxiosResponse } from 'axios';
-import { config } from '@/index';
-import BaseAutocompleteFetch from './BaseAutocompleteFetch.vue';
+import BaseAutocomplete from './BaseAutocomplete.vue';
 import { Option, SelectConfiguration } from '@/types';
 
 const props = defineProps({
@@ -55,13 +53,9 @@ const props = defineProps({
       string | number | null | undefined
     >,
   },
-  url: {
+  options: {
     required: true,
-    type: String,
-  },
-  showRouteUrl: {
-    default: undefined,
-    type: Function as PropType<((id: string | number) => string) | undefined>,
+    type: Array as PropType<Option[]>,
   },
   primaryKey: {
     default: 'id',
@@ -129,13 +123,9 @@ const props = defineProps({
   },
 });
 
-const http = config.http;
-
 const emit = defineEmits(['update:modelValue']);
 
-const autocompleteFetch = ref<InstanceType<
-  typeof BaseAutocompleteFetch
-> | null>(null);
+const autocomplete = ref<InstanceType<typeof BaseAutocomplete> | null>(null);
 
 const model = ref(props.currentModel);
 
@@ -147,32 +137,6 @@ watch(
   { deep: true }
 );
 
-watch(
-  () => props.modelValue,
-  (newValue, oldValue) => {
-    if (!props.modelValue) {
-      model.value = null;
-      return;
-    }
-
-    if (newValue == oldValue) {
-      return;
-    }
-
-    if (props.showRouteUrl == null) {
-      return;
-    }
-
-    http
-      .get(props.showRouteUrl(props.modelValue))
-      .then((response: AxiosResponse) => {
-        model.value = response.data.data;
-      })
-      .catch((e: Error) => e);
-  },
-  { immediate: true }
-);
-
 function onUpdate(newModel: Option | null) {
   if (!newModel) {
     model.value = null;
@@ -184,10 +148,10 @@ function onUpdate(newModel: Option | null) {
 }
 
 defineExpose({
-  focus: () => autocompleteFetch.value?.focus(),
-  blur: () => autocompleteFetch.value?.blur(),
-  open: () => autocompleteFetch.value?.open(),
-  close: () => autocompleteFetch.value?.close(),
-  setKeywords: (input: string) => autocompleteFetch.value?.setKeywords(input),
+  focus: () => autocomplete.value?.focus(),
+  blur: () => autocomplete.value?.blur(),
+  open: () => autocomplete.value?.open(),
+  close: () => autocomplete.value?.close(),
+  setKeywords: (input: string) => autocomplete.value?.setKeywords(input),
 });
 </script>