@wpic/ui 0.9.18 → 0.9.20

package/CHANGELOG.md

@@ -1,3 +1,7 @@
+## 0.9.19
+
+- WCard: add a shared Tailwind metric variant with single-line titles, standard value typography, trend actions and optional sparkline slot.
+
 ## 0.9.15
 
 ## 0.9.18

package/COMPONENTS.md

@@ -216,6 +216,14 @@ click: [e: MouseEvent]
 
 ## WCard
 
+`variant="metric"` is the shared KPI layout: a single-line muted title, optional
+`actions` (trend badge), `value` (`text-2xl font-semibold`), `subtitle` (`text-sm`),
+and optional `visual` slot for a sparkline. Use `dense` for reduced vertical padding.
+`value` can also be a slot for missing-state or formatted content. All metric layout
+and typography use Tailwind utilities. Default content cards retain their existing
+header and body layout.
+
+
 Header titles default to `titleSize="lg"` (`text-lg`, 18px) and semibold weight. Use `titleSize="base"` for `text-base` (16px). This styling applies only to the title wrapper (including a heading in the title slot), not action buttons.
 
 Body padding uses smaller vertical spacing than horizontal spacing: sm 0.5/0.75rem, md 0.75/1rem, lg 1/1.5rem (vertical/horizontal).

package/dist/components/WCard.vue.d.ts

@@ -18,6 +18,10 @@
  *   - padding  : shared horizontal spacing for header, body and footer
  */
 type __VLS_Props = {
+    /** Shared KPI layout: title/actions, value/subtitle and optional visual slot. */
+    variant?: 'default' | 'metric';
+    value?: string | number;
+    dense?: boolean;
     title?: string;
     subtitle?: string;
     empty?: boolean;
@@ -29,23 +33,36 @@ type __VLS_Props = {
     /** Header title size; does not affect action buttons. */
     titleSize?: 'base' | 'lg';
 };
-declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {}, __VLS_7: {}, __VLS_9: {}, __VLS_11: {}, __VLS_13: {};
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {}, __VLS_7: {}, __VLS_9: {}, __VLS_11: {}, __VLS_13: {}, __VLS_15: {}, __VLS_17: {}, __VLS_19: {}, __VLS_21: {}, __VLS_23: {}, __VLS_25: {};
 type __VLS_Slots = {} & {
-    icon?: (props: typeof __VLS_1) => any;
+    title?: (props: typeof __VLS_1) => any;
 } & {
-    title?: (props: typeof __VLS_3) => any;
+    actions?: (props: typeof __VLS_3) => any;
 } & {
-    actions?: (props: typeof __VLS_5) => any;
+    value?: (props: typeof __VLS_5) => any;
 } & {
     subtitle?: (props: typeof __VLS_7) => any;
 } & {
-    default?: (props: typeof __VLS_9) => any;
+    visual?: (props: typeof __VLS_9) => any;
 } & {
-    empty?: (props: typeof __VLS_11) => any;
+    default?: (props: typeof __VLS_11) => any;
 } & {
-    footer?: (props: typeof __VLS_13) => any;
+    icon?: (props: typeof __VLS_13) => any;
+} & {
+    title?: (props: typeof __VLS_15) => any;
+} & {
+    actions?: (props: typeof __VLS_17) => any;
+} & {
+    subtitle?: (props: typeof __VLS_19) => any;
+} & {
+    default?: (props: typeof __VLS_21) => any;
+} & {
+    empty?: (props: typeof __VLS_23) => any;
+} & {
+    footer?: (props: typeof __VLS_25) => any;
 };
 declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    variant: "default" | "metric";
     padding: "sm" | "md" | "lg";
     headerDivider: boolean;
     titleSize: "base" | "lg";