Avoid shadows and borders of nested cards being removed

nicegui/elements/card.js

@@ -0,0 +1,11 @@
+export default {
+  template: `
+    <q-card v-bind="$attrs">
+      <template v-for="(_, slot) in $slots" v-slot:[slot]="slotProps">
+        <div>
+          <slot :name="slot" v-bind="slotProps || {}" />
+        </div>
+      </template>
+    </q-card>
+  `,
+};

nicegui/elements/card.py

@@ -3,7 +3,7 @@
 from ..element import Element
 
 
-class Card(Element):
+class Card(Element, component='card.js'):
 
     def __init__(self) -> None:
         """Card
@@ -17,7 +17,7 @@ def __init__(self) -> None:
         If you want the original behavior, use the `tight` method.
         If you want the padding and borders for nested children, move the children into another container.
         """
-        super().__init__('q-card')
+        super().__init__()
         self._classes.append('nicegui-card')
 
     def tight(self) -> Self:

nicegui/static/nicegui.css

@@ -16,7 +16,7 @@
 .nicegui-footer,
 .nicegui-drawer,
 .nicegui-tab-panel,
-.nicegui-card,
+.nicegui-card > div,
 .nicegui-carousel-slide,
 .nicegui-step .q-stepper__nav,
 .nicegui-step .q-stepper__step-inner,
@@ -42,7 +42,11 @@
 .nicegui-column {
   padding: 0;
 }
-.nicegui-card-tight {
+.nicegui-card > div {
+  width: 100%;
+  height: 100%;
+}
+.nicegui-card-tight > div {
   padding: 0;
   gap: 0;
 }

website/documentation/content/card_documentation.py

@@ -20,34 +20,4 @@ def card_without_shadow() -> None:
         ui.label('See, no shadow!')
 
 
-@doc.demo('The issue with nested borders', '''
-    The following example shows a table nested in a card.
-    Cards have a default padding in NiceGUI, so the table is not flush with the card's border.
-    The table has the `flat` and `bordered` props set, so it should have a border.
-    However, due to the way QCard is designed, the border is not visible (first card).
-    There are two ways to fix this:
-
-    - To get the original QCard behavior, use the `tight` method (second card).
-        It removes the padding and the table border collapses with the card border.
-
-    - To preserve the padding _and_ the table border, move the table into another container like a `ui.row` (third card).
-
-    See https://github.com/zauberzeug/nicegui/issues/726 for more information.
-''')
-def custom_context_menu() -> None:
-    columns = [{'name': 'age', 'label': 'Age', 'field': 'age'}]
-    rows = [{'age': '16'}, {'age': '18'}, {'age': '21'}]
-
-    with ui.row():
-        with ui.card():
-            ui.table(columns, rows).props('flat bordered')
-
-        with ui.card().tight():
-            ui.table(columns, rows).props('flat bordered')
-
-        with ui.card():
-            with ui.row():
-                ui.table(columns, rows).props('flat bordered')
-
-
 doc.reference(ui.card)