Refactor card widgets to use a shared base component (oh-card)

[florian-h05]

Supersedes #1801.

Implements the great proposal from #1801 (comment):

There is currently no generic oh-card, the oh-*-card widget simply use f7-card in their implementation. A oh-card that would serve as a base for other card widgets would be nice as it could define a common set of properties that the card itself (as opposed to the widget inside its content) supports - and style and class would be one of them, other renamed style/class properties would be defined for the control inside the card. This oh-card could also define slots (which the f7-card doesn't do) - header, content and footer - and for instance the oh-rollershutter-card would simply have to define the content slot. The user would then be able to define the other slots (header and footer) to customize them beyond a simple text.

Lastly a oh-card could be useful even when designing a custom card as it would simplify the syntax. For example:

component: f7-card
config:
  style: {} # Card style
  class: [] # Card classes
slots:
  default:
    - component: f7-card-header
      config:
        style: {} # Header style
        class: [] # Header classes
      slots:
        default:
          - component: oh-button
            config:
              text: Header
    - component: f7-card-content
      config:
        style: {} # Content style
        class: [] # Content classes
      slots:
        default:
          - component: oh-button
            config:
              text: Content
    - component: f7-card-footer
      config:
        style: {} # Footer style
        class: [] # Footer classes
      slots:
        default:
          - component: oh-button
            config:
              text: Footer

would become:

component: oh-card
style:
  style: {} # Card style
  class: [] # Card classes
  headerStyle: {} # Header style
  headerClass: [] # Header classes
  contentStyle: {} # Content style
  contentClass: [] # Content classes
  footerStyle: {} # Footer style
  footerClass: [] # Footer classes
slots:
  header:
    - component: oh-button
       config:
         text: Header
  content:
    - component: oh-button
       config:
         text: Content
  footer:
    - component: oh-button
       config:
         text: Footer

If the header, content, footer slot contains resp. f7-card-header, f7-card-content or f7-card-footer as the only component they would be inserted directly as defined, otherwise those would be created automatically. oh-card-footer could be made obsolete as its functionality could be integrated into oh-card.

[relativeci]

#2312 Bundle Size — 10.83MiB (+0.01%).

437540a(current) vs 4785cfa main#2306(baseline)

Warning

Bundle contains 2 duplicate packages – View duplicate packages

Bundle metrics   4 changes 1 regression 1 improvement

	Current #2312	Baseline #2306
Initial JS	1.89MiB(+0.09%)	1.89MiB
Initial CSS	576.57KiB(-0.01%)	576.65KiB
Cache Invalidation	24.05%	17.44%
Chunks	226	226
Assets	249	249
Modules	2917(-0.14%)	2921
Duplicate Modules	149	149
Duplicate Code	1.8%	1.8%
Packages	96	96
Duplicate Packages	2	2

Bundle size by type   2 changes 1 regression 1 improvement

	Current #2312	Baseline #2306
JS	9.04MiB (+0.02%)	9.04MiB
CSS	863.34KiB (~-0.01%)	863.42KiB
Fonts	526.1KiB	526.1KiB
Media	295.6KiB	295.6KiB
IMG	140.74KiB	140.74KiB
HTML	1.39KiB	1.39KiB
Other	871B	871B

Bundle analysis report Branch florian-h05:refactor-oh-card Project dashboard

---

^{Generated by RelativeCI Documentation Report issue}

[florian-h05]

As I have now tested all card widgets, I will merge this PR.

[stefan-hoehn]

Thanks for the awesome job! <3 Great improvement for styling!

[florian-h05]

FYI @JustinGeorgi @rkoshak

[ghys]

Awesome!