@autoafleveren/ui 1.4.5 → 1.4.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@autoafleveren/ui",
-  "version": "1.4.5",
+  "version": "1.4.7",
   "type": "module",
   "files": [
     "dist/*",

package/src/modules/components/AppCard/AppCard.vue

@@ -26,6 +26,7 @@
 
   const slots = useSlots();
 
+  const hasAvatar = computed(() => !!slots.avatar);
   const hasTitle = computed(() => !!slots.title || !!props.title);
   const hasIcon = computed(() => !!slots.icon || !!props.icon);
   const contentClasses = computed(() => `${props.contentClasses} ${hasTitle.value ? 'mt-4' : undefined}`);
@@ -49,6 +50,15 @@
       <slot name="icon"></slot>
     </CardIconSlot>
 
+    <div
+      v-if="hasAvatar"
+      :class="{ 'mr-3': hasIcon }"
+      class="float-right"
+      data-test-avatar
+    >
+      <slot name="avatar"></slot>
+    </div>
+
     <h3
       v-if="hasTitle"
       class="text-2xl font-bold text-zinc-900"

package/src/modules/components/AppCard/__tests__/app-card.spec.ts

@@ -7,6 +7,7 @@ describe('the AppCard component', () => {
   it('should hide the optional elements by default', () => {
     const wrapper = shallowMount(AppCard);
 
+    expect(wrapper.find('[data-test-avatar]').exists()).toBe(false);
     expect(wrapper.find('[data-test-title]').exists()).toBe(false);
     expect(wrapper.find('[data-test-icon]').exists()).toBe(false);
   });
@@ -77,6 +78,16 @@ describe('the AppCard component', () => {
     expect(descriptionElement.text()).toBe('description');
   });
 
+  it('can set the avatar by slot', () => {
+    const wrapper = shallowMount(AppCard, {
+      slots: { avatar: 'test-avatar' },
+    });
+
+    const avatar = wrapper.find('[data-test-avatar]');
+    expect(avatar.exists()).toBe(true);
+    expect(avatar.text()).toBe('test-avatar');
+  });
+
   it('can set the icon by prop', () => {
     const wrapper = shallowMount(AppCard, {
       props: { icon: 'icon' },

package/src/modules/components/AppDataTable/AppDataTable.vue

@@ -19,11 +19,11 @@
 
   const emit = defineEmits<{
     (event: 'update:modelValue', value: number[]): void;
-    (event: 'update:sort', value: UpdateSortArgument): void;
     (event: 'updatePage', value: number): void;
     (event: 'clickItem', value: Item): void;
     (event: 'contextMenuOpen', value: Item): void;
     (event: 'clickContextItem', value: Item): void;
+    (event: 'sortClient', value: UpdateSortArgument): void;
   }>();
 
   const slots = useSlots();
@@ -126,8 +126,8 @@
     sort.value = undefined;
   }
 
-  function onUpdateSort(value: UpdateSortArgument): void {
-    emit('update:sort', value);
+  function onUpdateClientSort(value: UpdateSortArgument): void {
+    emit('sortClient', value);
   }
 
   defineExpose({ dataTableInstance });
@@ -162,7 +162,7 @@
       @click-row="clickRow"
       @contextmenu-row="contextMenu.open"
       @update:server-options="onUpdateServerOptions"
-      @update-sort="onUpdateSort"
+      @update-sort="onUpdateClientSort"
     >
       <template #loading>
         <AppLoader size="medium" />