npm - @fiscozen/card - Versions diffs - 1.0.1 → 1.1.0 - Mend

@fiscozen/card 1.0.1 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (18) hide show

package/CHANGELOG.md +30 -0
package/README.md +99 -0
package/dist/card.js +1120 -0
package/dist/card.umd.cjs +1 -0
package/dist/index.d.ts +1 -0
package/dist/src/FzCard.vue.d.ts +48 -0
package/dist/src/index.d.ts +2 -0
package/dist/src/types.d.ts +121 -0
package/dist/style.css +1 -0
package/package.json +7 -7
package/src/FzCard.vue +34 -19
package/src/__tests__/FzCard.spec.ts +899 -0
package/src/__tests__/__snapshots__/FzCard.spec.ts.snap +126 -0
package/src/types.ts +5 -3
package/tsconfig.tsbuildinfo +1 -0
package/vitest.config.ts +9 -1
package/src/__test__/FzCard.test.ts +0 -576
package/src/__test__/__snapshots__/FzCard.test.ts.snap +0 -19

package/dist/card.umd.cjs ADDED Viewed

@@ -0,0 +1 @@

package/dist/index.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export * from './src/index'

package/dist/src/FzCard.vue.d.ts ADDED Viewed

@@ -0,0 +1,48 @@
+import { FzCardProps, FzCardSlots } from './types';
+declare function toggleOpen(): void;
+declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<FzCardProps>, {
+    environment: string;
+}>>, {
+    /**
+     * Method to toggle the card open/closed state
+     */
+    toggleOpen: typeof toggleOpen;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "fzprimary:click": () => void;
+    "fzsecondary:click": () => void;
+    "fztertiary:click": () => void;
+    "fzcard:click-info": () => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<FzCardProps>, {
+    environment: string;
+}>>> & Readonly<{
+    "onFzprimary:click"?: (() => any) | undefined;
+    "onFzsecondary:click"?: (() => any) | undefined;
+    "onFztertiary:click"?: (() => any) | undefined;
+    "onFzcard:click-info"?: (() => any) | undefined;
+}>, {
+    environment: import('./types').FzCardEnvironment;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>, Readonly<FzCardSlots> & FzCardSlots>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/src/index.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export { default as FzCard } from './FzCard.vue';
2	+ export * from './types';

package/dist/src/types.d.ts ADDED Viewed

@@ -0,0 +1,121 @@
+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;
+    /**
+     * Whether to show an info icon in the header
+     * @default false
+     */
+    hasInfoIcon?: boolean;
+    /**
+     * The environment context for the card buttons
+     * @default 'frontoffice'
+     */
+    environment?: FzCardEnvironment;
+};
+type FzCardButton = {
+    label: string;
+    disabled?: boolean;
+};
+type FzCardIconButton = {
+    icon: string;
+    disabled?: boolean;
+};
+/**
+ * Card background color variants.
+ *
+ * @remarks
+ * - 'default' renders a white background
+ * - 'blue' renders an alice-blue background
+ * - 'orange' renders a seashell background
+ * - 'purple' renders a pale-purple background
+ * - 'grey' renders a white-smoke background
+ * - 'yellow' uses --semantic-warning-50 (warning tint)
+ * - 'red' uses --semantic-error-50 (error tint)
+ *
+ * @deprecated 'aliceblue' is deprecated and will be removed in a future version. Use 'blue' instead.
+ */
+export type FzCardColor = "default" | "blue" | "orange" | "purple" | "grey" | "yellow" | "red" | "aliceblue";
+/**
+ * Card environment context for buttons
+ *
+ * @remarks
+ * Determines the visual style context for all buttons within the card
+ * - 'backoffice' for internal/admin interfaces
+ * - 'frontoffice' for public-facing interfaces
+ */
+export type FzCardEnvironment = "backoffice" | "frontoffice";
+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;
+    /**
+     * Event emitted when the info icon is clicked
+     * @type {() => void}
+     */
+    (event: "fzcard:click-info"): 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;
+}
+export {};

package/dist/style.css ADDED Viewed

@@ -0,0 +1 @@

+ .fz-container[data-v-8c40daeb]{display:flex}.fz-container--vertical[data-v-8c40daeb]{flex-direction:column}.fz-container--horizontal[data-v-8c40daeb]{flex-direction:row;flex-wrap:nowrap}.fz-container.align-items-start[data-v-8c40daeb]{align-items:flex-start}.fz-container.align-items-center[data-v-8c40daeb]{align-items:center}.fz-container.align-items-end[data-v-8c40daeb]{align-items:flex-end}.fz-container.align-items-stretch[data-v-8c40daeb]{align-items:stretch}.fz-container.align-items-baseline[data-v-8c40daeb]{align-items:baseline}.fz-container--horizontal.layout-expand-first[data-v-8c40daeb]>*:first-child{flex-grow:1}.fz-container--horizontal.layout-expand-all[data-v-8c40daeb]>*{flex-grow:1}.fz-container--horizontal.layout-space-between[data-v-8c40daeb]{justify-content:space-between}.fz-container--horizontal.layout-expand-last[data-v-8c40daeb]>*:last-child{flex-grow:1}.fz-container--vertical.gap-main-content-sm[data-v-8c40daeb]>p+p{margin-top:calc((0px - var(--main-content-sm, 32px)) + var(--paragraph-gap, 8px))}.fz-container--vertical.gap-main-content-base[data-v-8c40daeb]>p+p{margin-top:calc((0px - var(--main-content-base, 48px)) + var(--paragraph-gap, 8px))}.fz-container--vertical.gap-main-content-lg[data-v-8c40daeb]>p+p{margin-top:calc((0px - var(--main-content-lg, 64px)) + var(--paragraph-gap, 8px))}.fz-container--vertical.gap-section-content-none[data-v-8c40daeb]>p+p{margin-top:calc((0px - var(--section-content-none, 0px)) + var(--paragraph-gap, 8px))}.fz-container--vertical.gap-section-content-xs[data-v-8c40daeb]>p+p{margin-top:calc((0px - var(--section-content-xs, 8px)) + var(--paragraph-gap, 8px))}.fz-container--vertical.gap-section-content-sm[data-v-8c40daeb]>p+p{margin-top:calc((0px - var(--section-content-sm, 16px)) + var(--paragraph-gap, 8px))}.fz-container--vertical.gap-section-content-base[data-v-8c40daeb]>p+p{margin-top:calc((0px - var(--section-content-base, 24px)) + var(--paragraph-gap, 8px))}.fz-container--vertical.gap-section-content-lg[data-v-8c40daeb]>p+p{margin-top:calc((0px - var(--section-content-lg, 32px)) + var(--paragraph-gap, 8px))}.fz-container--horizontal[data-v-8c40daeb]>p+p{margin-top:0}

package/package.json CHANGED Viewed

@@ -1,21 +1,21 @@
 {
   "name": "@fiscozen/card",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "Design System Card component",
   "main": "src/index.ts",
   "type": "module",
   "keywords": [],
   "author": "Cristian Barraco",
   "dependencies": {
-    "@fiscozen/button": "^1.0.1-next.1",
-    "@fiscozen/style": "^0.1.8-next.0",
-    "@fiscozen/icons": "^0.1.36",
-    "@fiscozen/composables": "^1.0.0",
-    "@fiscozen/container": "^0.3.1"
+    "@fiscozen/button": "1.0.2",
+    "@fiscozen/composables": "1.0.1",
+    "@fiscozen/container": "0.4.1",
+    "@fiscozen/style": "0.2.0"
   },
   "peerDependencies": {
     "tailwindcss": "^3.4.1",
-    "vue": "^3.4.13"
+    "vue": "^3.4.13",
+    "@fiscozen/icons": "^0.1.37"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.3.3",

package/src/FzCard.vue CHANGED Viewed

@@ -14,11 +14,11 @@
  * <FzCard title="Card Title" color="default">
  *   <p>Card content goes here</p>
  * </FzCard>
- *
+ *
  * @example
- * <FzCard
- *   title="Collapsible Card"
- *   collapsible
+ * <FzCard
+ *   title="Collapsible Card"
+ *   collapsible
  *   :primaryAction="{ label: 'Save' }"
  * >
  *   <p>This card can be collapsed</p>
@@ -34,7 +34,7 @@ import { breakpoints } from "@fiscozen/style";
 const smOrSmaller = useMediaQuery(`(max-width: ${breakpoints.sm})`);
 const props = withDefaults(defineProps<FzCardProps>(), {
-  environment: 'frontoffice'
+  environment: "frontoffice",
 });
 const emit = defineEmits<FzCardEvents>();
 const slots = defineSlots<FzCardSlots>();
@@ -42,7 +42,7 @@ const isOpen = ref(props.defaultExpanded ?? false);
 /**
  * Deprecation warning for 'aliceblue' color prop value.
- *
+ *
  * Watches for 'aliceblue' color usage and logs warning once on mount or when color changes.
  * Using watch with immediate:true ensures the warning only fires once per component instance.
  */
@@ -52,19 +52,19 @@ watch(
     if (isAliceblue) {
       console.warn(
         "[FzCard] The color prop value 'aliceblue' is deprecated and will be removed in a future version. " +
-        "Please use 'blue' instead. The component will automatically map 'aliceblue' to 'blue' for now."
+          "Please use 'blue' instead. The component will automatically map 'aliceblue' to 'blue' for now.",
       );
     }
   },
-  { immediate: true }
+  { immediate: true },
 );
 /**
  * Normalizes deprecated color values to their replacements.
- *
+ *
  * Maps deprecated colors to their replacements:
  * - 'aliceblue' → 'blue'
- *
+ *
  * This ensures backward compatibility while encouraging migration to new values.
  * Deprecation warnings are handled separately via watch hooks.
  */
@@ -72,12 +72,11 @@ const normalizedColor = computed(() => {
   if (props.color === "aliceblue") {
     return "blue";
   }
   return props.color;
 });
-const sectionStaticClass =
-  "border-1 border-solid rounded flex flex-col";
+const sectionStaticClass = "border-1 border-solid rounded flex flex-col";
 const headerStaticClass =
   "border-solid pt-16 px-16 flex flex-row justify-between";
 const footerStaticClass =
@@ -93,7 +92,7 @@ const headerContainerComputedClass = computed(() => [
 ]);
 const headerTitleClass = computed(() => {
-  return props.environment === 'backoffice' ? 'py-2' : 'py-8';
+  return props.environment === "backoffice" ? "py-2" : "py-8";
 });
 const backgroundColor = computed(() => {
@@ -106,6 +105,10 @@ const backgroundColor = computed(() => {
       return "bg-background-pale-purple";
     case "grey":
       return "bg-background-white-smoke";
+    case "yellow":
+      return "bg-semantic-warning-50";
+    case "red":
+      return "bg-semantic-error-50";
     default:
       return "bg-core-white";
   }
@@ -128,6 +131,10 @@ const borderColor = computed(() => {
       return "border-background-pale-purple";
     case "grey":
       return "border-background-white-smoke";
+    case "yellow":
+      return "border-semantic-warning-50";
+    case "red":
+      return "border-semantic-error-50";
     default:
       return "border-grey-100";
   }
@@ -164,7 +171,15 @@ defineExpose({
 </script>
 <template>
-  <section :class="[sectionStaticClass, backgroundColor, textColor, borderColor, {'pb-16': !showContent}]">
+  <section
+    :class="[
+      sectionStaticClass,
+      backgroundColor,
+      textColor,
+      borderColor,
+      { 'pb-16': !showContent },
+    ]"
+  >
     <header
       v-if="existHeader"
       :class="[headerContainerComputedClass]"
@@ -208,11 +223,11 @@ defineExpose({
     </article>
     <footer
       v-if="(slots.footer || atLeastOneButton) && isAlive"
-      :class="[footerStaticClass, {'justify-end': !smOrSmaller}]"
+      :class="[footerStaticClass, { 'justify-end': !smOrSmaller }]"
       v-show="showContent"
     >
       <slot name="footer">
-        <FzContainer horizontal gap="sm" :class="{'w-full': smOrSmaller}">
+        <FzContainer horizontal gap="sm" :class="{ 'w-full': smOrSmaller }">
           <FzIconButton
             v-if="tertiaryAction"
             @click="emit('fztertiary:click')"
@@ -223,7 +238,7 @@ defineExpose({
           />
           <FzButton
             v-if="secondaryAction"
-            :class="{'flex-grow': smOrSmaller}"
+            :class="{ 'flex-grow': smOrSmaller }"
             @click="emit('fzsecondary:click')"
             :label="secondaryAction.label"
             variant="secondary"
@@ -232,7 +247,7 @@ defineExpose({
           />
           <FzButton
             v-if="primaryAction"
-            :class="{'flex-grow': smOrSmaller}"
+            :class="{ 'flex-grow': smOrSmaller }"
             @click="emit('fzprimary:click')"
             :label="primaryAction.label"
             variant="primary"