refactor!: revamp CCard title section

This commit refactors the title section of the `CCard` component with the following changes:

- Moves the close button into the title section, so that the title no longer lies behind it or is obscured by the button.
- Also moves the `title-append` slot into the title section, where it now directly follows the title (`title`).
- Changes the permissible values for the `titlePosition` property to `start` and `end` (based on Vuetify's `justify-...` logic, e.g., `justify-start` or `justify-end`).

BREAKING CHANGE: The behavior of the `title-append` slot and the `titlePosition` property have been changed.

- **`title-append` slot:**
  The `title-append` slot is now located immediately to the right of the title text. If the content of this slot should continue to be aligned to the right edge of the entire title area (as was previously potentially the case), this must now be done manually by using a `v-spacer`.

- **`titlePosition`:**
  The `titlePosition` property now accepts the values `'start'` or `'end'` to fit with vuetify `justify-content-...`.

Author: ItsPierre

src/components/CCard.vue

@@ -21,29 +21,44 @@
       ></v-progress-linear>
     </template>
 
-    <div
-      v-if="closable || slots['title-append']"
-      class="position-absolute pa-4 pa-md-6 d-flex align-center"
-      style="top: 0; right: 0"
-    >
-      <slot name="title-append"> </slot>
-
-      <!-- Close button -->
-      <v-btn
-        v-if="closable"
-        :icon="mdiWindowClose"
-        variant="text"
-        color="on-surface"
-        @click="emit('close')"
-      ></v-btn>
-    </div>
-
     <v-card-title
-      v-if="title"
-      class="pt-0 pb-0 px-6 px-md-8 text-h6"
-      :class="titleClass"
+      v-if="title || slots['title-append'] || closable"
+      class="pt-0 pb-0 px-6 px-md-8 text-h6 d-flex align-center"
+      :class="vTitleClass"
     >
-      {{ title }}
+      <!-- Placeholder to make sure the title is centered if the closable icon is visible -->
+      <div
+        v-if="closable && titlePosition === 'center'"
+        class="mr-2"
+        style="width: 48px"
+      ></div>
+
+      <div
+        v-if="title || slots['title-append']"
+        class="d-flex align-center w-100"
+        :class="titleClass"
+      >
+        <div v-if="title" :class="wrapTitle ? '' : 'text-truncate'">
+          {{ title }}
+        </div>
+
+        <slot name="title-append"> </slot>
+      </div>
+
+      <template v-if="closable">
+        <!-- Placeholder -->
+        <div style="width: 48px" class="ml-2"></div>
+
+        <!-- Close button -->
+        <v-btn
+          :icon="mdiWindowClose"
+          variant="text"
+          color="on-surface"
+          class="position-absolute"
+          style="right: 20px"
+          @click="emit('close')"
+        ></v-btn>
+      </template>
     </v-card-title>
 
     <v-card-subtitle
@@ -130,7 +145,7 @@ const props = withDefaults(
     /**
      * The position of the title.
      */
-    titlePosition?: "center" | "left" | "right";
+    titlePosition?: "center" | "start" | "end";
 
     /**
      * The size of the title.
@@ -207,7 +222,7 @@ const props = withDefaults(
   }>(),
   {
     title: undefined,
-    titlePosition: "left",
+    titlePosition: "start",
     titleSize: "normal",
     wrapTitle: undefined,
     subtitle: undefined,
@@ -244,10 +259,10 @@ const cardClass = computed<string>(() => {
 });
 
 /**
- * Computes the classes for the title component.
+ * Computes the classes for the v-card-title component.
  */
-const titleClass = computed<string>(() => {
-  let classes = "text-" + props.titlePosition;
+const vTitleClass = computed<string>(() => {
+  let classes = "";
 
   if (props.titleSize && props.titleSize !== "normal")
     classes += " " + props.titleSize;
@@ -262,6 +277,17 @@ const titleClass = computed<string>(() => {
   return classes;
 });
 
+/**
+ * Computes the classes for the title component. (in which the title and title-append are)
+ */
+const titleClass = computed<string>(() => {
+  let classes = "justify-" + props.titlePosition;
+
+  if (!props.wrapTitle) classes += " text-truncate";
+
+  return classes;
+});
+
 /**
  * Whether scrolling of the content is currently enabled.
  *

stories/CCard.stories.ts

@@ -15,7 +15,7 @@ const meta: Meta<typeof CCard> = {
     },
     titlePosition: {
       control: "radio",
-      options: ["center", "left", "right"],
+      options: ["center", "start", "end"],
     },
     wrapTitle: {
       control: "boolean",
@@ -70,7 +70,7 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   args: {
     title: "Card title",
-    titlePosition: "left",
+    titlePosition: "start",
     subtitle: "Card subtitle",
     loading: false,
   },
@@ -354,18 +354,20 @@ export const Disabled: Story = {
 
 export const TitleAppendSlot: Story = {
   args: {
-    title: "Card",
+    title: "Card with a longer title",
+    closable: true,
   },
   render: createStorybookRender({
     components: { CCard },
     template: `
 <c-card v-bind='args' class="ma-5">
   <template #title-append>
+    <v-spacer></v-spacer>
     <v-btn
-      variant="outlined"
-      color="primary"
+        variant="outlined"
+        color="primary"
     >
-      Close
+      Action
     </v-btn>
   </template>
 
@@ -378,11 +380,12 @@ export const TitleAppendSlot: Story = {
   parameters: createStorybookParameters({
     slotTemplate: `
       <template #title-append>
+        <v-spacer></v-spacer>
         <v-btn
-          variant="outlined"
-          color="primary"
+            variant="outlined"
+            color="primary"
         >
-          Close
+          Action
         </v-btn>
       </template>