sprintify-ui 0.0.12 → 0.0.13

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

@@ -6,6 +6,7 @@ declare const _default: {
         $data: {};
         $props: Partial<{
             disabled: boolean;
+            activeStrategy: "default" | "exact";
         }> & Omit<Readonly<import("vue").ExtractPropTypes<{
             to: {
                 required: true;
@@ -15,7 +16,11 @@ declare const _default: {
                 default: boolean;
                 type: BooleanConstructor;
             };
-        }>> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "disabled">;
+            activeStrategy: {
+                default: string;
+                type: PropType<"default" | "exact">;
+            };
+        }>> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "disabled" | "activeStrategy">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -38,8 +43,13 @@ declare const _default: {
                 default: boolean;
                 type: BooleanConstructor;
             };
+            activeStrategy: {
+                default: string;
+                type: PropType<"default" | "exact">;
+            };
         }>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
             disabled: boolean;
+            activeStrategy: "default" | "exact";
         }, {}, string> & {
             beforeCreate?: ((() => void) | (() => void)[]) | undefined;
             created?: ((() => void) | (() => void)[]) | undefined;
@@ -69,6 +79,10 @@ declare const _default: {
             default: boolean;
             type: BooleanConstructor;
         };
+        activeStrategy: {
+            default: string;
+            type: PropType<"default" | "exact">;
+        };
     }>> & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {};
     __isFragment?: undefined;
     __isTeleport?: undefined;
@@ -82,8 +96,13 @@ declare const _default: {
         default: boolean;
         type: BooleanConstructor;
     };
+    activeStrategy: {
+        default: string;
+        type: PropType<"default" | "exact">;
+    };
 }>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
     disabled: boolean;
+    activeStrategy: "default" | "exact";
 }, {}, string> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
     $slots: {
         default: (_: {}) => any;

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

@@ -6,6 +6,7 @@ declare const _default: {
         $data: {};
         $props: Partial<{
             disabled: boolean;
+            activeStrategy: "default" | "exact";
         }> & Omit<Readonly<import("vue").ExtractPropTypes<{
             to: {
                 required: true;
@@ -15,7 +16,11 @@ declare const _default: {
                 default: boolean;
                 type: BooleanConstructor;
             };
-        }>> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "disabled">;
+            activeStrategy: {
+                default: string;
+                type: PropType<"default" | "exact">;
+            };
+        }>> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "disabled" | "activeStrategy">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -38,8 +43,13 @@ declare const _default: {
                 default: boolean;
                 type: BooleanConstructor;
             };
+            activeStrategy: {
+                default: string;
+                type: PropType<"default" | "exact">;
+            };
         }>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
             disabled: boolean;
+            activeStrategy: "default" | "exact";
         }, {}, string> & {
             beforeCreate?: ((() => void) | (() => void)[]) | undefined;
             created?: ((() => void) | (() => void)[]) | undefined;
@@ -69,6 +79,10 @@ declare const _default: {
             default: boolean;
             type: BooleanConstructor;
         };
+        activeStrategy: {
+            default: string;
+            type: PropType<"default" | "exact">;
+        };
     }>> & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {};
     __isFragment?: undefined;
     __isTeleport?: undefined;
@@ -82,8 +96,13 @@ declare const _default: {
         default: boolean;
         type: BooleanConstructor;
     };
+    activeStrategy: {
+        default: string;
+        type: PropType<"default" | "exact">;
+    };
 }>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
     disabled: boolean;
+    activeStrategy: "default" | "exact";
 }, {}, string> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
     $slots: {
         default: (_: {}) => any;

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

@@ -1,17 +1,17 @@
 import { PropType } from 'vue';
-import { Option } from '@/types/types';
+import { NormalizedOption, Option } from '@/types/types';
 declare const _default: {
     new (...args: any[]): {
         $: import("vue").ComponentInternalInstance;
         $data: {};
         $props: Partial<{
+            filter: (option: NormalizedOption) => boolean;
             required: boolean;
             inputClass: string;
             placeholder: string;
             loading: boolean;
             disabled: boolean;
             max: number;
-            min: number;
         }> & Omit<Readonly<import("vue").ExtractPropTypes<{
             modelValue: {
                 required: true;
@@ -49,20 +49,20 @@ declare const _default: {
                 default: boolean;
                 type: BooleanConstructor;
             };
-            min: {
+            max: {
                 default: undefined;
                 type: NumberConstructor;
             };
-            max: {
+            filter: {
                 default: undefined;
-                type: NumberConstructor;
+                type: PropType<(option: NormalizedOption) => boolean>;
             };
         }>> & {
             onFocus?: ((...args: any[]) => any) | undefined;
             "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
             onTyping?: ((...args: any[]) => any) | undefined;
             onScrollBottom?: ((...args: any[]) => any) | undefined;
-        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "required" | "inputClass" | "placeholder" | "loading" | "disabled" | "max" | "min">;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "filter" | "required" | "inputClass" | "placeholder" | "loading" | "disabled" | "max">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -113,13 +113,13 @@ declare const _default: {
                 default: boolean;
                 type: BooleanConstructor;
             };
-            min: {
+            max: {
                 default: undefined;
                 type: NumberConstructor;
             };
-            max: {
+            filter: {
                 default: undefined;
-                type: NumberConstructor;
+                type: PropType<(option: NormalizedOption) => boolean>;
             };
         }>> & {
             onFocus?: ((...args: any[]) => any) | undefined;
@@ -127,13 +127,13 @@ declare const _default: {
             onTyping?: ((...args: any[]) => any) | undefined;
             onScrollBottom?: ((...args: any[]) => any) | undefined;
         }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "typing" | "focus" | "scrollBottom")[], string, {
+            filter: (option: NormalizedOption) => boolean;
             required: boolean;
             inputClass: string;
             placeholder: string;
             loading: boolean;
             disabled: boolean;
             max: number;
-            min: number;
         }, {}, string> & {
             beforeCreate?: ((() => void) | (() => void)[]) | undefined;
             created?: ((() => void) | (() => void)[]) | undefined;
@@ -191,13 +191,13 @@ declare const _default: {
             default: boolean;
             type: BooleanConstructor;
         };
-        min: {
+        max: {
             default: undefined;
             type: NumberConstructor;
         };
-        max: {
+        filter: {
             default: undefined;
-            type: NumberConstructor;
+            type: PropType<(option: NormalizedOption) => boolean>;
         };
     }>> & {
         onFocus?: ((...args: any[]) => any) | undefined;
@@ -245,13 +245,13 @@ declare const _default: {
         default: boolean;
         type: BooleanConstructor;
     };
-    min: {
+    max: {
         default: undefined;
         type: NumberConstructor;
     };
-    max: {
+    filter: {
         default: undefined;
-        type: NumberConstructor;
+        type: PropType<(option: NormalizedOption) => boolean>;
     };
 }>> & {
     onFocus?: ((...args: any[]) => any) | undefined;
@@ -259,16 +259,24 @@ declare const _default: {
     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", {
+    filter: (option: NormalizedOption) => boolean;
     required: boolean;
     inputClass: string;
     placeholder: string;
     loading: boolean;
     disabled: boolean;
     max: number;
-    min: number;
 }, {}, string> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
     $slots: {
         empty: (_: {}) => any;
+        option: (_: {
+            option: Option;
+            selected: boolean;
+            active: boolean;
+        }) => any;
+        footer: (_: {
+            options: NormalizedOption[];
+        }) => any;
     };
 });
 export default _default;

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

@@ -9,8 +9,8 @@ declare const _default: {
             inputClass: string;
             placeholder: string;
             disabled: boolean;
+            queryKey: string;
             max: number;
-            min: number;
         }> & Omit<Readonly<import("vue").ExtractPropTypes<{
             modelValue: {
                 required: true;
@@ -44,20 +44,20 @@ declare const _default: {
                 default: boolean;
                 type: BooleanConstructor;
             };
-            min: {
-                default: undefined;
-                type: NumberConstructor;
-            };
             max: {
                 default: undefined;
                 type: NumberConstructor;
             };
+            queryKey: {
+                default: string;
+                type: StringConstructor;
+            };
         }>> & {
             onFocus?: ((...args: any[]) => any) | undefined;
             "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
             onTyping?: ((...args: any[]) => any) | undefined;
             onScrollBottom?: ((...args: any[]) => any) | undefined;
-        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "required" | "inputClass" | "placeholder" | "disabled" | "max" | "min">;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "required" | "inputClass" | "placeholder" | "disabled" | "queryKey" | "max">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -104,14 +104,14 @@ declare const _default: {
                 default: boolean;
                 type: BooleanConstructor;
             };
-            min: {
-                default: undefined;
-                type: NumberConstructor;
-            };
             max: {
                 default: undefined;
                 type: NumberConstructor;
             };
+            queryKey: {
+                default: string;
+                type: StringConstructor;
+            };
         }>> & {
             onFocus?: ((...args: any[]) => any) | undefined;
             "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
@@ -122,8 +122,8 @@ declare const _default: {
             inputClass: string;
             placeholder: string;
             disabled: boolean;
+            queryKey: string;
             max: number;
-            min: number;
         }, {}, string> & {
             beforeCreate?: ((() => void) | (() => void)[]) | undefined;
             created?: ((() => void) | (() => void)[]) | undefined;
@@ -177,14 +177,14 @@ declare const _default: {
             default: boolean;
             type: BooleanConstructor;
         };
-        min: {
-            default: undefined;
-            type: NumberConstructor;
-        };
         max: {
             default: undefined;
             type: NumberConstructor;
         };
+        queryKey: {
+            default: string;
+            type: StringConstructor;
+        };
     }>> & {
         onFocus?: ((...args: any[]) => any) | undefined;
         "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
@@ -227,14 +227,14 @@ declare const _default: {
         default: boolean;
         type: BooleanConstructor;
     };
-    min: {
-        default: undefined;
-        type: NumberConstructor;
-    };
     max: {
         default: undefined;
         type: NumberConstructor;
     };
+    queryKey: {
+        default: string;
+        type: StringConstructor;
+    };
 }>> & {
     onFocus?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
@@ -245,7 +245,23 @@ declare const _default: {
     inputClass: string;
     placeholder: string;
     disabled: boolean;
+    queryKey: string;
     max: number;
-    min: number;
-}, {}, string> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
+}, {}, string> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+    $slots: {
+        option: (_: {
+            option: Option;
+            selected: boolean;
+            active: boolean;
+        }) => any;
+        footer: (_: {
+            options: import("@/types/types").NormalizedOption[];
+        } & {
+            keywords: string;
+        }) => any;
+        empty: (_: {
+            firstSearch: boolean;
+        }) => any;
+    };
+});
 export default _default;

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

@@ -12,6 +12,7 @@ import BaseBreadcrumbs from './BaseBreadcrumbs.vue';
 import BaseButton from './BaseButton.vue';
 import BaseCard from './BaseCard.vue';
 import BaseCardRow from './BaseCardRow.vue';
+import BaseCharacterCounter from './BaseCharacterCounter.vue';
 import BaseClipboard from './BaseClipboard.vue';
 import BaseContainer from './BaseContainer.vue';
 import BaseCounter from './BaseCounter.vue';
@@ -24,10 +25,14 @@ import BaseDescriptionListItem from './BaseDescriptionListItem.vue';
 import BaseDialog from './BaseDialog.vue';
 import BaseFilePicker from './BaseFilePicker.vue';
 import BaseFileUploader from './BaseFileUploader.vue';
+import BaseHasMany from './BaseHasMany.vue';
 import { Icon as BaseIcon } from '@iconify/vue';
 import BaseInput from './BaseInput.vue';
 import BaseInputLabel from './BaseInputLabel.vue';
 import BaseLoadingCover from './BaseLoadingCover.vue';
+import BaseMediaItem from './BaseMediaItem.vue';
+import BaseMediaLibrary from './BaseMediaLibrary.vue';
+import BaseMediaPreview from './BaseMediaPreview.vue';
 import BaseMenu from './BaseMenu.vue';
 import BaseMenuItem from './BaseMenuItem.vue';
 import BaseModalCenter from './BaseModalCenter.vue';
@@ -46,11 +51,12 @@ 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 BaseTagAutocomplete from './BaseTagAutocomplete.vue';
+import BaseTagAutocompleteFetch from './BaseTagAutocompleteFetch.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, 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, };
+import BaseTextarea from './BaseTextarea.vue';
+import BaseTextareaAutoresize from './BaseTextareaAutoresize.vue';
+export { BaseAlert, BaseApp, BaseAppDialogs, BaseAppNotifications, BaseAutocomplete, BaseAutocompleteFetch, BaseAvatar, BaseBadge, BaseBelongsTo, BaseBoolean, BaseBreadcrumbs, BaseButton, 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, BaseProcessRing, BaseReadMore, BaseSelect, BaseSideNavigation, BaseSideNavigationItem, BaseSkeleton, BaseSwitch, BaseSystemAlert, BaseTabs, BaseTabItem, BaseTagAutocomplete, BaseTagAutocompleteFetch, BaseTable, BaseTableColumn, BaseTextarea, BaseTextareaAutoresize, };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
     "docs:dev": "vitepress dev docs",

package/src/components/BaseAppDialogs.vue

@@ -11,7 +11,7 @@
     >
       <div
         v-if="dialogs.length"
-        class="fixed inset-0 z-20 h-full w-full bg-black bg-opacity-60"
+        class="z-dialogs fixed inset-0 h-full w-full bg-black bg-opacity-60"
       />
     </Transition>
 
@@ -29,7 +29,7 @@
         v-for="dialog in dialogs"
         :key="dialog.id"
         scroll-lock-target
-        class="fixed inset-0 z-20 transform overflow-y-auto"
+        class="z-dialogs fixed inset-0 transform overflow-y-auto"
       >
         <div
           class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0"

package/src/components/BaseAppNotifications.vue

@@ -1,7 +1,7 @@
 <template>
   <Teleport to="body">
     <div
-      class="pointer-events-none fixed inset-0 flex items-end justify-end p-6 md:p-8"
+      class="pointer-events-none fixed inset-0 z-notifications flex items-end justify-end p-6 md:p-8"
     >
       <div class="w-full max-w-sm">
         <TransitionGroup

package/src/components/BaseAutocomplete.vue

@@ -48,7 +48,7 @@
     <div class="relative">
       <div
         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"
+        class="absolute top-1 z-menu min-h-[110px] w-full overflow-hidden rounded border border-slate-300 bg-white shadow-md"
       >
         <div
           ref="dropdown"
@@ -102,24 +102,22 @@
           </div>
         </div>
 
-        <Transition>
-          <div
-            v-if="loading"
-            class="absolute inset-0 h-full w-full space-y-1 bg-white p-2"
-          >
-            <div class="space-y-1">
-              <BaseSkeleton class="h-7 w-full" delay="0ms"></BaseSkeleton>
-              <BaseSkeleton
-                class="h-7 w-full opacity-70"
-                delay="50ms"
-              ></BaseSkeleton>
-              <BaseSkeleton
-                class="h-7 w-full opacity-30"
-                delay="100ms"
-              ></BaseSkeleton>
-            </div>
+        <div
+          v-if="loading"
+          class="absolute inset-0 h-full w-full space-y-1 bg-white p-2"
+        >
+          <div class="space-y-1">
+            <BaseSkeleton class="h-7 w-full" delay="0ms"></BaseSkeleton>
+            <BaseSkeleton
+              class="h-7 w-full opacity-70"
+              delay="50ms"
+            ></BaseSkeleton>
+            <BaseSkeleton
+              class="h-7 w-full opacity-30"
+              delay="100ms"
+            ></BaseSkeleton>
           </div>
-        </Transition>
+        </div>
       </div>
     </div>
   </div>

package/src/components/BaseBelongsTo.vue

@@ -111,6 +111,7 @@ watch(
   },
   { immediate: true }
 );
+
 function onUpdate(newModel: Selection) {
   if (!newModel) {
     model.value = null;

package/src/components/BaseClipboard.vue

@@ -17,7 +17,7 @@
     >
       <div
         v-show="tooltipShown"
-        class="pointer-events-none absolute left-full z-10 items-center"
+        class="pointer-events-none absolute left-full z-[1] items-center"
       >
         <div
           class="ml-2 whitespace-nowrap rounded bg-slate-900 bg-opacity-80 px-3 py-2 text-xs leading-tight text-white backdrop-blur"

package/src/components/BaseHasMany.vue

@@ -0,0 +1,92 @@
+<template>
+  <BaseTagAutocompleteFetch
+    :model-value="models"
+    :url="url"
+    :disabled="disabled"
+    :placeholder="placeholder"
+    :required="required"
+    :value-key="foreignKey"
+    :label-key="field"
+    :input-class="inputClass"
+    :query-key="queryKey"
+    :max="max"
+    @update:model-value="onUpdate"
+  >
+    <template #option="optionProps">
+      <slot name="option" v-bind="optionProps" />
+    </template>
+    <template #empty="emptyProps">
+      <slot name="empty" v-bind="emptyProps"></slot>
+    </template>
+    <template #footer="footerProps">
+      <slot name="footer" v-bind="footerProps"></slot>
+    </template>
+  </BaseTagAutocompleteFetch>
+</template>
+
+<script lang="ts" setup>
+import { PropType } from 'vue';
+import { Option } from '@/types/types';
+import BaseTagAutocompleteFetch from './BaseTagAutocompleteFetch.vue';
+
+const props = defineProps({
+  modelValue: {
+    required: true,
+    type: Array as PropType<Option[]>,
+  },
+  url: {
+    required: true,
+    type: String,
+  },
+  foreignKey: {
+    default: 'id',
+    type: String,
+  },
+  field: {
+    required: true,
+    type: String,
+  },
+  required: {
+    default: false,
+    type: Boolean,
+  },
+  disabled: {
+    default: false,
+    type: Boolean,
+  },
+  placeholder: {
+    default: undefined,
+    type: String,
+  },
+  inputClass: {
+    default: undefined,
+    type: String,
+  },
+  max: {
+    default: undefined,
+    type: Number,
+  },
+  queryKey: {
+    default: 'search',
+    type: String,
+  },
+  currentModels: {
+    default() {
+      return [];
+    },
+    type: Array as PropType<Option[]>,
+  },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const models = ref(props.currentModels);
+
+function onUpdate(newModels: Option[]) {
+  models.value = newModels;
+  emit(
+    'update:modelValue',
+    newModels.map((m) => m[props.foreignKey])
+  );
+}
+</script>

package/src/components/BaseMediaItem.stories.js

@@ -0,0 +1,41 @@
+import BaseMediaItem from './BaseMediaItem.vue';
+
+export default {
+  title: 'Components/BaseMediaItem',
+  component: BaseMediaItem,
+  args: {},
+};
+
+const Template = (args) => ({
+  components: {
+    BaseMediaItem,
+  },
+  setup() {
+    return { args };
+  },
+  template: `
+    <BaseMediaItem v-bind="args" />
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {
+  media: {
+    id: 'xxxxxxxxxxx',
+    file_name: 'picture.jpg',
+    url: 'https://images.unsplash.com/photo-1670139018938-af8bf748a1bc?auto=format&fit=crop&w=800&h=800&q=80',
+    mime_type: 'image',
+    size: 430 * 1024,
+  },
+};
+
+export const PDF = Template.bind({});
+PDF.args = {
+  media: {
+    id: 'xxxxxxxxxxx',
+    file_name: 'document.pdf',
+    url: 'https://images.unsplash.com/photo-1670139018938-af8bf748a1bc?auto=format&fit=crop&w=800&h=800&q=80',
+    mime_type: 'application/pdf',
+    size: 430 * 1024,
+  },
+};