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. diff --git a/VERSION b/VERSION index 8f0916f..3eefcb9 100644 --- a/VERSION +++ b/VERSION @@ -1 +1 @@ -0.5.0 +1.0.0 diff --git a/vertical-stack-in-card.js b/vertical-stack-in-card.js index d809197..0bbe888 100644 --- a/vertical-stack-in-card.js +++ b/vertical-stack-in-card.js @@ -1,4 +1,4 @@ -console.log(`%cvertical-stack-in-card\n%cVersion: ${'0.4.4'}`, 'color: #1976d2; font-weight: bold;', ''); +console.log(`%cvertical-stack-in-card\n%cVersion: ${'1.0.0'}`, 'color: #1976d2; font-weight: bold;', ''); class VerticalStackInCard extends HTMLElement { constructor() { @@ -181,8 +181,15 @@ 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. + let cls = customElements.get('hui-vertical-stack-card'); + if (!cls) { + this.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() { @@ -199,4 +206,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' +});