fix: layout fixes, rename card list filters slot to header

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@aotearoan/neon",
   "description": "Neon is a lightweight design library of Vue 3 components with minimal dependencies.",
-  "version": "14.1.5",
+  "version": "14.1.6",
   "main": "./dist/neon.cjs.js",
   "module": "./dist/neon.es.js",
   "types": "./dist/src/neon.d.ts",

public/docs/layout/card-list/NeonCardList.json

@@ -101,8 +101,8 @@
   ],
   "slots": [
     {
-      "name": "filters",
-      "description": "slot for providing filters for the card list aligned next to the result count"
+      "name": "header",
+      "description": "slot for providing filters or titles for the card list aligned next to the result count"
     },
     {
       "name": "card",

src/app/views/layout/card-list/CardList.ts

@@ -26,7 +26,7 @@ export default defineComponent({
     const headline = ref('Display a list of cards');
 
     const template = `<neon-card-list :model="model" :total="total" color="brand" @show-more="onShowMore">
-  <template #filters>
+  <template #header>
     <neon-input v-model="filter" placeholder="Filter results…" size="s" />
   </template>
   <template #card="{ cardModel, index }">
@@ -38,7 +38,7 @@ export default defineComponent({
 </neon-card-list>`;
 
     const linkTemplate = `<neon-card-list :model="linkFilteredModel" :clickable="true" :total="linkTotal" color="brand" @show-more="onLinkShowMore">
-  <template #filters>
+  <template #header>
     <neon-input v-model="linkFilter" placeholder="Filter results…" size="s" />
   </template>
   <template #card="{ cardModel, index }">

src/app/views/layout/card-list/CardList.vue

@@ -12,8 +12,8 @@
       <neon-card-body>
         <neon-stack>
           <h2 class="neon-h3">Basic example</h2>
-          <neon-card-list :model="filteredModel" :clickable="true" :total="total" color="brand" @show-more="onShowMore">
-            <template #filters>
+          <neon-card-list :clickable="true" :model="filteredModel" :total="total" color="brand" @show-more="onShowMore">
+            <template #header>
               <neon-input v-model="filter" placeholder="Filter results…" size="s" />
             </template>
             <template #card="{ cardModel, index }">
@@ -30,13 +30,13 @@
         <neon-stack>
           <h2 class="neon-h3">Links example</h2>
           <neon-card-list
-            :model="linkFilteredModel"
             :clickable="true"
+            :model="linkFilteredModel"
             :total="linkTotal"
             color="brand"
             @show-more="onLinkShowMore"
           >
-            <template #filters>
+            <template #header>
               <neon-input v-model="linkFilter" placeholder="Filter results…" size="s" />
             </template>
             <template #card="{ cardModel, index }">

src/app/views/presentation/table/Table.vue

@@ -12,20 +12,20 @@
           <neon-stack>
             <table>
               <thead>
-              <tr>
-                <th>header 1</th>
-                <th>header 2</th>
-              </tr>
+                <tr>
+                  <th>header 1</th>
+                  <th>header 2</th>
+                </tr>
               </thead>
               <tbody>
-              <tr>
-                <td>Value 1</td>
-                <td>Value 2</td>
-              </tr>
-              <tr>
-                <td>Value 3</td>
-                <td>Value 4</td>
-              </tr>
+                <tr>
+                  <td>Value 1</td>
+                  <td>Value 2</td>
+                </tr>
+                <tr>
+                  <td>Value 3</td>
+                  <td>Value 4</td>
+                </tr>
               </tbody>
             </table>
             <editor v-model="template" />

src/components/layout/card-list/NeonCardList.spec.ts

@@ -8,14 +8,14 @@ describe('NeonCardList', () => {
   const modelWithLinks = cardListModelFixture(5, 'http://getskeleton.com', 0);
   const modelNoLinks = cardListModelFixture(5, undefined, 0);
 
-  it('renders filters slot contents', () => {
+  it('renders header slot contents', () => {
     // given
     const { html } = render(NeonCardList, {
       props: {
         model: modelWithLinks,
         total: modelWithLinks.length,
       },
-      slots: { filters: '<p>test</p>' },
+      slots: { header: '<p>test</p>' },
       global: { plugins: [router] },
     });
     // when / then

src/components/layout/card-list/NeonCardList.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="neon-card-list">
-    <neon-inline class="neon-card-list__header" breakpoint="">
-      <!-- @slot slot for providing filters for the card list aligned next to the result count -->
-      <slot name="filters"></slot>
+    <neon-inline breakpoint="" class="neon-card-list__header">
+      <!-- @slot slot for providing filters or titles for the card list aligned next to the result count -->
+      <slot name="header"></slot>
       <span v-if="total" class="neon-card-list__total">{{ n(model.length) }} {{ ofLabel }} {{ n(total) }}</span>
     </neon-inline>
     <neon-stack class="neon-card-list__cards">
@@ -38,8 +38,8 @@
       v-else
       :button-style="NeonButtonStyle.Text"
       :color="NeonFunctionalColor.Neutral"
-      :size="NeonSize.Small"
       :label="showMoreLabel"
+      :size="NeonSize.Small"
       class="neon-card-list__show-more"
       @click="emit('show-more', $event)"
     />

src/sass/components/_card.scss

@@ -51,8 +51,7 @@
       & > .neon-card-header,
       & > .neon-card-body,
       & > .neon-card-footer {
-        @include layout.padding-horizontal(0.5, 0.5);
-        @include layout.padding-vertical(0.25, 0.25);
+        @include layout.padding(0.5);
       }
     }
 

src/sass/components/_grid.scss

@@ -9,9 +9,25 @@
     @include layout.padding(0.5, true);
     display: grid;
 
+    @include responsive.responsive(mobile-large) {
+      display: flex;
+      flex-direction: column;
+    }
+
     .neon-grid-area {
       @include layout.margin(0.5, true);
       display: flex;
+
+      & > .neon-card {
+        &,
+        & > .neon-card-body {
+          flex: 1 0 auto;
+
+          @include responsive.responsive(mobile-large) {
+            flex: 0 0 auto;
+          }
+        }
+      }
     }
   }