Home Assistant 2022.11 compatibility

README.md

@@ -1,3 +1,5 @@
+## Note: outdated, use https://github.com/stickpin/stack-in-card instead
+
 # Stack In Card by [@RomRider](https://www.github.com/RomRider)
 
 A replacement for [vertical-stack-in-card](https://github.com/ofekashery/vertical-stack-in-card) and `horizontal-stack-in-card`
@@ -34,6 +36,7 @@ If a card inside the stack has the `--keep-background` CSS style defined, it wil
 | `box_shadow` | boolean | **Optional** | Will keep the `box-shadow` on **all** the child cards | `false` |
 | `margin` | boolean | **Optional** | Will keep the `margin` between **all** the child cards | `false` |
 | `outer_padding` | boolean | **Optional** | Will add a `padding` of `8px` to the card if `margin` is `true` | `true` if `margin` is `true`, else false |
+| `border` | boolean | **Optional** | Will keep the `border` on **all** the child cards | `false` |
 | `border_radius` | boolean | **Optional** | Will keep the `border-radius` on **all** the child cards | `false` |
 
 ## Example
@@ -60,6 +63,28 @@ If a card inside the stack has the `--keep-background` CSS style defined, it wil
             - sun.sun
 ```
 
+### Example with `keep` object
+
+```yaml
+type: custom:stack-in-card
+title: My Stack In Card
+mode: vertical
+keep:
+  background: true
+cards:
+  - type: horizontal-stack
+    cards:
+      - type: button
+        entity: sun.sun
+      - type: button
+        entity: sun.sun
+  - type: vertical-stack
+    cards:
+      - type: entities
+        entities:
+          - sun.sun
+```
+
 ### Example with button-card to keep the background
 
 This will keep the background of the button even if stacked:

src/stack-in-card.ts

@@ -51,6 +51,7 @@ class StackInCard extends LitElement implements LovelaceCard {
         margin: false,
         box_shadow: false,
         border_radius: false,
+        border: false,
         ...config.keep,
       },
     };
@@ -96,6 +97,9 @@ class StackInCard extends LitElement implements LovelaceCard {
   private _updateStyle(e: LovelaceCard | null, withBg: boolean): void {
     if (!e) return;
     if (!this._config?.keep?.box_shadow) e.style.boxShadow = 'none';
+    if (!this._config?.keep?.border && getComputedStyle(e).getPropertyValue('--keep-border').trim() !== 'true') {
+      e.style.border = 'none';
+    }
     if (
       !this._config?.keep?.background &&
       withBg &&

src/types.ts

@@ -12,6 +12,7 @@ export interface KeepConfig {
   margin?: boolean;
   background?: boolean;
   box_shadow?: boolean;
+  border?: boolean;
   border_radius?: boolean;
   outer_padding?: boolean;
 }