feat(Card): add new card image props and VCardImage component

gitsindonesia · Jun 19, 2023 · 7633344 · 7633344
1 parent e08e633
commit 7633344
Show file tree

Hide file tree

Showing 7 changed files with 62 additions and 2 deletions.
diff --git a/packages/card/src/VCard.stories.ts b/packages/card/src/VCard.stories.ts
@@ -88,6 +88,14 @@ BodyOnly.parameters = {
   },
 };
 
+export const Image = Template.bind({});
+Image.args = {
+  image: 'https://picsum.photos/200/300',
+  imageAlt: 'random image',
+  imageClass: 'h-40',
+  footer: ''
+};
+
 export const CustomSlots: Story = (args) => ({
   components: {VCard, VBtn},
   setup() {

diff --git a/packages/card/src/VCard.vue b/packages/card/src/VCard.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed, PropType, resolveComponent } from "vue";
+import VCardImage from "./VCardImage.vue";
 
 export type CardShadow = boolean | "sm" | "md" | "lg" | "xl" | "2xl" | "inner" | "none";
 
@@ -96,6 +97,15 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  image: {
+    type: String,
+  },
+  imageAlt: {
+    type: String,
+  },
+  imageClass: {
+    type: String,
+  },
 });
 
 const tag = computed(() => {
@@ -144,7 +154,9 @@ const attrs = computed(() => {
 
 <template>
   <component :is="tag" :class="classes" v-bind="{ ...$attrs, ...attrs }">
-    <slot name="image" />
+    <slot name="image">
+      <VCardImage :src="image" :alt="imageAlt" :class="imageClass" />
+    </slot>
     <div v-if="!hideHeader" :class="[defaultHeaderClass, headerClass]">
       <slot name="header.prepend" />
       <slot name="header">

diff --git a/packages/card/src/VCardImage.vue b/packages/card/src/VCardImage.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+interface Props {
+  src?: string;
+  alt?: string;
+}
+
+defineProps<Props>();
+</script>
+
+<template>
+  <img :src="src" :alt="alt" class="card-image" />
+</template>
diff --git a/packages/card/src/index.ts b/packages/card/src/index.ts
@@ -4,3 +4,4 @@ export {default as VCard} from './VCard.vue';
 export {default as VCardHeader} from './VCardHeader.vue';
 export {default as VCardBody} from './VCardBody.vue';
 export {default as VCardFooter} from './VCardFooter.vue';
+export {default as VCardImage} from './VCardImage.vue';
diff --git a/packages/nuxt/src/module.ts b/packages/nuxt/src/module.ts
@@ -126,6 +126,22 @@ const components: AddComponentOptions[] = [
     name: 'VCard',
     filePath: '@morpheme/card/src/VCard.vue',
   },
+  {
+    name: 'VCardHeader',
+    filePath: '@morpheme/card/src/VCardHeader.vue',
+  },
+  {
+    name: 'VCardFooter',
+    filePath: '@morpheme/card/src/VCardFooter.vue',
+  },
+  {
+    name: 'VCardBody',
+    filePath: '@morpheme/card/src/VCardBody.vue',
+  },
+  {
+    name: 'VCardImage',
+    filePath: '@morpheme/card/src/VCardImage.vue',
+  },
   {
     name: 'VCollapsible',
     filePath: '@morpheme/collapsible/src/VCollapsible.vue',

diff --git a/packages/themes/src/morpheme/_card.scss b/packages/themes/src/morpheme/_card.scss
@@ -177,4 +177,11 @@
     --card-bg-color: var(--color-gray-800);
     --card-color: var(--color-white);
   }
+
+  // image
+  &-image {
+    object-fit: cover;
+    border-top-left-radius: var(--card-border-radius);
+    border-top-right-radius: var(--card-border-radius);
+  }
 }
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
@@ -5,7 +5,7 @@ import VSpinner from "@morpheme/spinner";
 import VAppBar from "@morpheme/app-bar";
 import { VBadge, VBadgeGroup, VBadgeContent } from "@morpheme/badge";
 import {VBreadcrumbs, VBreadcrumbsItem, VBreadcrumbsDivider} from "@morpheme/breadcrumbs";
-import VCard from "@morpheme/card";
+import {VCard, VCardHeader, VCardBody, VCardFooter, VCardImage} from "@morpheme/card";
 import {
   VCheckbox,
   VFileUpload,
@@ -105,6 +105,10 @@ const plugin: Plugin = {
     app.component("VBreadcrumbsItem", VBreadcrumbsItem);
     app.component("VBreadcrumbsDivider", VBreadcrumbsDivider);
     app.component("VCard", VCard);
+    app.component("VCardHeader", VCardHeader);
+    app.component("VCardBody", VCardBody);
+    app.component("VCardFooter", VCardFooter);
+    app.component("VCardImage", VCardImage);
     app.component("VCheckbox", VCheckbox);
     app.component("VDataTable", VDataTable);
     app.component("VDataTablePagination", VDataTablePagination);