@fiscozen/card 0.1.2 → 0.1.4

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@fiscozen/card",
-  "version": "0.1.2",
+  "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",
@@ -33,9 +33,9 @@
     "@awesome.me/kit-8137893ad3": "^1.0.65",
     "@fortawesome/fontawesome-svg-core": "^6.5.1",
     "@fortawesome/vue-fontawesome": "^3.0.6",
+    "@fiscozen/eslint-config": "^0.1.0",
     "@fiscozen/tsconfig": "^0.1.0",
-    "@fiscozen/prettier-config": "^0.1.0",
-    "@fiscozen/eslint-config": "^0.1.0"
+    "@fiscozen/prettier-config": "^0.1.0"
   },
   "license": "MIT",
   "scripts": {

package/src/FzCard.vue

@@ -20,40 +20,42 @@
       </div>
       <slot name="header-content"></slot>
     </header>
-    <template v-if="showContent">
-      <article :class="['p-20', contentClass]">
-        <slot></slot>
-      </article>
-      <footer v-if="atLeastOneButton" :class="[footerStaticClass, borderColor]">
+    <article v-if="isAlive" :class="['p-20', contentClass]" v-show="showContent">
+      <slot></slot>
+    </article>
+    <footer v-if="(slots.footer || atLeastOneButton) && isAlive" :class="[footerStaticClass, borderColor]" v-show="showContent">
+      <slot name="footer">
         <FzIconButton
           v-if="tertiaryAction"
-          @click="$emit('fztertiary:click')"
+          @click="emit('fztertiary:click')"
           :iconName="tertiaryAction.icon"
           variant="invisible"
         />
         <FzButton
           v-if="secondaryAction"
-          @click="$emit('fzsecondary:click')"
+          @click="emit('fzsecondary:click')"
           :label="secondaryAction.label"
           variant="secondary"
         />
         <FzButton
           v-if="primaryAction"
-          @click="$emit('fzprimary:click')"
+          @click="emit('fzprimary:click')"
           :label="primaryAction.label"
           variant="primary"
         />
-      </footer>
-    </template>
+      </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 =
@@ -64,8 +66,10 @@ const footerStaticClass =
   "h-64 border-t-1 border-solid p-16 flex justify-end gap-8 items-center";
 
 const showContent = computed(() => isOpen.value || !props.collapsible);
+const isAlive = computed(() => props.alwaysAlive || showContent.value);
 const headerContainerComputedClass = computed(() => [
   showContent.value ? "border-b-1" : "border-b-0",
+  props.collapsible ? "cursor-pointer" : "",
 ]);
 
 const backgroundColor = computed(() => {
@@ -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,40 @@
 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;
 };
 
 type FzCardButton = {
@@ -18,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;
+}