Fix the selectable text feature

lib/KCard/index.vue

@@ -8,11 +8,47 @@
     :class="['k-card', rootClass, thumbnailAlignClass]"
     :headingStyles="headingStyles"
   >
-    <template v-if="$slots.title" #title>
-      <!-- @slot Optional slot section containing the title contents, should not contain a heading element. -->
-      <slot name="title"></slot>
-    </template>
-    <template #default>
+    <div
+      :class="['card-area', layoutClass, thumbnailAlignClass]"
+      :style="{ backgroundColor: $themeTokens.surface }"
+    >
+      <component
+        :is="headingElement"
+        v-if="title || $slots.title"
+        class="heading"
+        :style="{ color: $themeTokens.text }"
+      >
+        <!--
+          `event=""` prevents router-link click event
+          (technique used by Vue community because
+          the usual ways don't work for router-link).
+          This is to
+            - (1) prevent double navigation (the wrapping
+                  <li> is supposed to take care of navigation)
+            - (2) together with the `draggable` disabled, 
+                  ensures that text selection works on
+                  the title text (see the feature for allowing
+                  selecting card's content in `onClick`)
+        -->
+        <router-link
+          event=""
+          tabindex="-1"
+          :to="to"
+          draggable="false"
+        >
+          <!-- @slot Optional slot section containing the title contents, should not contain a heading element. -->
+          <slot 
+            v-if="$slots.title"
+            name="title"
+          ></slot>
+          <KTextTruncator
+            v-else
+            :text="title"
+            :maxLines="titleLines"
+          />
+        </router-link>
+      </component>
+
       <div
         v-if="thumbnailDisplay !== Thumbnail_Displays.NONE"
         class="thumbnail"