@fiscozen/card 0.1.3 → 0.1.4

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@fiscozen/card",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "Design System Card component",
   "main": "src/index.ts",
   "type": "module",
   "keywords": [],
   "author": "Cristian Barraco",
   "dependencies": {
-    "@fiscozen/icons": "^0.1.5",
-    "@fiscozen/button": "^0.1.4"
+    "@fiscozen/icons": "^0.1.19",
+    "@fiscozen/button": "^0.1.9"
   },
   "peerDependencies": {
     "tailwindcss": "^3.4.1",
@@ -34,8 +34,8 @@
     "@fortawesome/fontawesome-svg-core": "^6.5.1",
     "@fortawesome/vue-fontawesome": "^3.0.6",
     "@fiscozen/eslint-config": "^0.1.0",
-    "@fiscozen/prettier-config": "^0.1.0",
-    "@fiscozen/tsconfig": "^0.1.0"
+    "@fiscozen/tsconfig": "^0.1.0",
+    "@fiscozen/prettier-config": "^0.1.0"
   },
   "license": "MIT",
   "scripts": {

package/src/FzCard.vue

@@ -23,35 +23,39 @@
     <article v-if="isAlive" :class="['p-20', contentClass]" v-show="showContent">
       <slot></slot>
     </article>
-    <footer v-if="atLeastOneButton && isAlive" :class="[footerStaticClass, borderColor]" v-show="showContent">
-      <FzIconButton
-        v-if="tertiaryAction"
-        @click="$emit('fztertiary:click')"
-        :iconName="tertiaryAction.icon"
-        variant="invisible"
-      />
-      <FzButton
-        v-if="secondaryAction"
-        @click="$emit('fzsecondary:click')"
-        :label="secondaryAction.label"
-        variant="secondary"
-      />
-      <FzButton
-        v-if="primaryAction"
-        @click="$emit('fzprimary:click')"
-        :label="primaryAction.label"
-        variant="primary"
-      />
+    <footer v-if="(slots.footer || atLeastOneButton) && isAlive" :class="[footerStaticClass, borderColor]" v-show="showContent">
+      <slot name="footer">
+        <FzIconButton
+          v-if="tertiaryAction"
+          @click="emit('fztertiary:click')"
+          :iconName="tertiaryAction.icon"
+          variant="invisible"
+        />
+        <FzButton
+          v-if="secondaryAction"
+          @click="emit('fzsecondary:click')"
+          :label="secondaryAction.label"
+          variant="secondary"
+        />
+        <FzButton
+          v-if="primaryAction"
+          @click="emit('fzprimary:click')"
+          :label="primaryAction.label"
+          variant="primary"
+        />
+      </slot>
     </footer>
   </section>
 </template>
 
 <script setup lang="ts">
 import { computed, onMounted, ref } from "vue";
-import { FzCardProps } from "./types";
+import { FzCardEvents, FzCardProps, FzCardSlots } from "./types";
 import { FzButton, FzIconButton } from "@fiscozen/button";
 
 const props = defineProps<FzCardProps>();
+const emit = defineEmits<FzCardEvents>();
+const slots = defineSlots<FzCardSlots>();
 const isOpen = ref(props.defaultExpanded ?? false);
 
 const sectionStaticClass =
@@ -117,5 +121,10 @@ onMounted(() => {
     );
 });
 
-defineExpose({ toggleOpen });
+defineExpose({ 
+  /**
+   * Method to toggle the card open/closed state
+   */
+  toggleOpen
+});
 </script>

package/src/types.ts

@@ -1,12 +1,39 @@
 export type FzCardProps = {
+  /**
+   * The title of the card
+   */
   title: string;
+  /**
+   * The background color of the card
+   */
   color?: FzCardColor;
+  /**
+   * The primary action button
+   */
   primaryAction?: FzCardButton;
+  /**
+   * The secondary action button
+   */
   secondaryAction?: FzCardButton;
+  /**
+   * The tertiary action button
+   */
   tertiaryAction?: FzCardIconButton;
+  /**
+   * Custom css class to apply to the content
+   */
   contentClass?: string;
+  /**
+   * Whether the card is collapsible
+   */
   collapsible?: boolean;
+  /**
+   * Whether the card is expanded by default (only if collapsible)
+   */
   defaultExpanded?: boolean;
+  /**
+   * Whether the card content is always alive (never destroyed) when collapsed
+   */
   alwaysAlive?: boolean;
 };
 
@@ -19,3 +46,40 @@ type FzCardIconButton = {
 };
 
 export type FzCardColor = "purple" | "orange" | "blue";
+
+export interface FzCardEvents {
+  /**
+   * Event emitted when the primary action is clicked
+   * @type {() => void}
+   */
+  (event: 'fzprimary:click'): void
+  /**
+   * Event emitted when the secondary action is clicked
+   * @type {() => void}
+   */
+  (event:'fzsecondary:click'): void,
+  /**
+   * Event emitted when the tertiary action is clicked
+   * @type {() => void}
+   */
+  (event:'fztertiary:click'): void,
+}
+
+export interface FzCardSlots {
+  /**
+   * Slot for the content of the card
+   */
+  default(props:{}): any;
+  /**
+   * Slot for the header, it will be displayed on the left of the title
+   */
+  header(props:{}): any;
+  /**
+   * Slot for the header content, it will be displayed below the title
+   */
+  'header-content'(props:{}): any;
+  /**
+   * Slot for the footer of the card
+   */
+  footer(props:{}): any;
+}