From 7d27cc2de865fcd9757f9ef369791abfe208b466 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Konrad=20Vit=C3=A9?= Date: Mon, 9 Dec 2024 20:48:11 +0100 Subject: [PATCH 1/5] Fix vertical card editor (#165) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Konrad Vité --- vertical-stack-in-card.js | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/vertical-stack-in-card.js b/vertical-stack-in-card.js index d809197..728741b 100644 --- a/vertical-stack-in-card.js +++ b/vertical-stack-in-card.js @@ -1,5 +1,7 @@ console.log(`%cvertical-stack-in-card\n%cVersion: ${'0.4.4'}`, 'color: #1976d2; font-weight: bold;', ''); +const HELPERS = window.loadCardHelpers ? window.loadCardHelpers() : undefined; + class VerticalStackInCard extends HTMLElement { constructor() { super(); @@ -181,8 +183,16 @@ class VerticalStackInCard extends HTMLElement { return sizes.reduce((a, b) => a + b, 0); } - static getConfigElement() { - return customElements.get('hui-vertical-stack-card').getConfigElement(); + static async getConfigElement() { + // Ensure hui-card-element-editor and hui-card-picker are loaded. + // They happen to be used by the vertical-stack card editor but there must be a better way? + let cls = customElements.get('hui-vertical-stack-card'); + if (!cls) { + (await HELPERS).createCardElement({ type: 'vertical-stack', cards: [] }); + await customElements.whenDefined('hui-vertical-stack-card'); + cls = customElements.get('hui-vertical-stack-card'); + } + return cls.getConfigElement(); } static getStubConfig() { From 7e0e6f7cccfaba1e6d4ad194ddd9f80d5e97bc73 Mon Sep 17 00:00:00 2001 From: Ofek Ashery Date: Thu, 12 Dec 2024 21:26:48 +0200 Subject: [PATCH 2/5] Add documentation URL to visual editor --- vertical-stack-in-card.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/vertical-stack-in-card.js b/vertical-stack-in-card.js index 728741b..cd04c0c 100644 --- a/vertical-stack-in-card.js +++ b/vertical-stack-in-card.js @@ -209,4 +209,5 @@ window.customCards.push({ name: 'Vertical Stack In Card', description: 'Group multiple cards into a single sleek card.', preview: false, -}); \ No newline at end of file + documentationURL: 'https://github.com/ofekashery/vertical-stack-in-card' +}); From db9307e77db5a8b878ed12e683f72380d200dc0c Mon Sep 17 00:00:00 2001 From: Ofek Ashery Date: Thu, 12 Dec 2024 21:30:13 +0200 Subject: [PATCH 3/5] Bump version --- vertical-stack-in-card.js | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/vertical-stack-in-card.js b/vertical-stack-in-card.js index cd04c0c..0bbe888 100644 --- a/vertical-stack-in-card.js +++ b/vertical-stack-in-card.js @@ -1,6 +1,4 @@ -console.log(`%cvertical-stack-in-card\n%cVersion: ${'0.4.4'}`, 'color: #1976d2; font-weight: bold;', ''); - -const HELPERS = window.loadCardHelpers ? window.loadCardHelpers() : undefined; +console.log(`%cvertical-stack-in-card\n%cVersion: ${'1.0.0'}`, 'color: #1976d2; font-weight: bold;', ''); class VerticalStackInCard extends HTMLElement { constructor() { @@ -185,10 +183,9 @@ class VerticalStackInCard extends HTMLElement { static async getConfigElement() { // Ensure hui-card-element-editor and hui-card-picker are loaded. - // They happen to be used by the vertical-stack card editor but there must be a better way? let cls = customElements.get('hui-vertical-stack-card'); if (!cls) { - (await HELPERS).createCardElement({ type: 'vertical-stack', cards: [] }); + this.helpers.createCardElement({ type: 'vertical-stack', cards: [] }); await customElements.whenDefined('hui-vertical-stack-card'); cls = customElements.get('hui-vertical-stack-card'); } From f974d9c5081273451c02e76e66c53acd728ff206 Mon Sep 17 00:00:00 2001 From: Ofek Ashery Date: Thu, 12 Dec 2024 21:31:14 +0200 Subject: [PATCH 4/5] Update VERSION --- VERSION | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/VERSION b/VERSION index 8f0916f..3eefcb9 100644 --- a/VERSION +++ b/VERSION @@ -1 +1 @@ -0.5.0 +1.0.0 From a5b95b28671c721d57782a036fc8f26cc290e1c6 Mon Sep 17 00:00:00 2001 From: Ofek Ashery Date: Thu, 12 Dec 2024 21:31:45 +0200 Subject: [PATCH 5/5] Update README.md --- README.md | 72 +++++++++++++++++++++++++++++-------------------------- 1 file changed, 38 insertions(+), 34 deletions(-) diff --git a/README.md b/README.md index 7fa06bf..ae644d0 100644 --- a/README.md +++ b/README.md @@ -1,60 +1,67 @@ # Vertical Stack In Card -![Version](https://img.shields.io/github/v/release/ofekashery/vertical-stack-in-card?style=flat-square) -![Downloads](https://img.shields.io/github/downloads/ofekashery/vertical-stack-in-card/total?style=flat-square) -![Stars](https://img.shields.io/github/stars/ofekashery/vertical-stack-in-card?style=flat-square) +![Version](https://img.shields.io/github/v/release/ofekashery/vertical-stack-in-card) +![Downloads](https://img.shields.io/github/downloads/ofekashery/vertical-stack-in-card/total) +![Stars](https://img.shields.io/github/stars/ofekashery/vertical-stack-in-card) +![HACS](https://img.shields.io/badge/HACS-Default-41BDF5.svg) -Vertical Stack In Card lets you you to group multiple cards into a single sleek card in the Home Assistant UI. +**Vertical Stack In Card** is a custom Lovelace card for Home Assistant, allowing you to group multiple cards into a single sleek card. It offers a clean, organized way to display multiple cards in your Home Assistant dashboard. -![Example Card](https://user-images.githubusercontent.com/16443111/220773923-c28009d6-edfc-4ffd-9290-3e0c6e1acf73.png) +![Showcase Card](https://user-images.githubusercontent.com/16443111/220773923-c28009d6-edfc-4ffd-9290-3e0c6e1acf73.png) -## Options +## Configuration Options -| Name | Type | Default | Description | -| ---------- | ------- | ------------ | ----------------------------------------- | -| type | string | **Required** | `custom:vertical-stack-in-card` | -| cards | list | **Required** | List of cards | -| title | string | **Optional** | Card title | -| horizontal | boolean | **Optional** | Default: `false` | -| styles | object | **Optional** | Adds custom CSS directives to child cards | +| Name | Type | Default | Description | +| ------------ | ------- | ------- | ------------------------------------------------- | +| `type` | string | N/A | Must be `custom:vertical-stack-in-card`. | +| `cards` | list | N/A | List of cards to include. | +| `title` | string | None | Optional. Title displayed at the top of the card. | +| `horizontal` | boolean | false | Optional. Whatever stack cards horizontally. | +| `styles` | object | None | Optional. Add custom CSS for advanced styling. | ## Installation -*VSIC is available in [HACS](https://github.com/hacs/integration) (Home Assistant Community Store).* +### Via HACS (Home Assistant Community Store) -### 1. Download the card +1. Open HACS in Home Assistant. +2. Search for "Vertical Stack In Card." +3. Install and follow the setup instructions. + +### Manual Installation + +Download the [`vertical-stack-in-card.js`](https://raw.githubusercontent.com/ofekashery/vertical-stack-in-card/master/vertical-stack-in-card.js) into your `/www` directory. -Install the VSIC by copying [`vertical-stack-in-card.js`](https://raw.githubusercontent.com/ofekashery/vertical-stack-in-card/master/vertical-stack-in-card.js) to `/www/vertical-stack-in-card.js`, or via bash: ```bash wget https://raw.githubusercontent.com/ofekashery/vertical-stack-in-card/master/vertical-stack-in-card.js mv vertical-stack-in-card.js /config/www/ ``` -### 2. Link the card to your Lovelace UI +#### Add resource reference -#### The manual way: - -Link `vertical-stack-in-card` inside your `ui-lovelace.yaml` +If you configure Lovelace via YAML, add a reference to `vertical-stack-in-card.js` inside your `configuration.yaml`: ```yaml resources: - - url: /local/vertical-stack-in-card.js?v=0.4.4 + - url: /local/vertical-stack-in-card.js?v=1.0.0 type: js ``` -#### Through the GUI: +Alternatively, if you prefer the graphical editor, use the menu to add the resource. + +1. Make sure, **advanced mode** is enabled in your user profile (click on your user name to get there). -Alternatively, with Home Assistant 2021.3 or later, [click here](https://my.home-assistant.io/redirect/lovelace_resources). Using My Home Assistant, that will bring up the GUI for Resources. Click the Plus to add a new resource. The `url` is the path to your downloaded file. Replace `/www/` with `/local/`. +2. Navigate to the **Configuration** -> **Lovelace Dashboards** -> **Resources**. -![Add Resource](https://user-images.githubusercontent.com/557102/196027109-01b3ab95-ef61-4573-9ced-71233481eb07.png) +3. Click on **Add resource**, and fill out the form as follows: -Finish by clicking "Create" and refresh your browser. + - **Url:** `/local/vertical-stack-in-card.js?v=1.0.0` + - **Resource type:** `JavaScript Module` -### 3. Use the card somehere. +4. Finish by clicking **Create** and refresh your browser. -Add a custom card in your `ui-lovelace.yaml`. +## Usage -**Example** +Add the card to your Lovelace UI configuration: ```yaml type: 'custom:vertical-stack-in-card' @@ -68,13 +75,10 @@ cards: - type: entities entities: - switch.livingroom_tv - - entity: script.livingroom_receiver - name: Receiver - switch.livingroom_ac + - light.ambient_lights ``` -## Credits +## Acknowledgements -- [ofekashery](https://github.com/ofekashery) -- [ciotlosm](https://github.com/ciotlosm) -- [thomasloven](https://github.com/thomasloven) +Thanks to [@ciotlosm](https://github.com/ciotlosm) and [@thomasloven](https://github.com/thomasloven) for their inspiration and contributions in building the foundation of this project.