@jaaahn/hyper-ui v3.0.0

HyperUI

Welcome to HyperUI, a personal Vue 3 component library fitting my needs.

HyperUI aims on being an easy to use, opinionated component library for Vue 3. It provides components and the necessary building blocks to design web apps, but unlike other libraries does not provide excessive customizability. HyperUI supports automatic darkmode based on the users system preferences.

As this library is a personal project, it does not come with a lot of customization options, but in this documentation there are some tips on how to customize the design using CSS. If you think like there is something off with your design, then feel encouraged to use CSS to tweak it the way you like it.

Licensed under MIT License.

Attention Breaking Changes

Upgrading to Version 3.0.0:

We refined the naming scheme of this library. Please search your codebase for these classes and replace them with:

We also changed targeting classes and utility classes to fit this new naming scheme. We strongly incourage you to use the new syntax. With this syntax, every class now matches its corresponding component name:

Upgrading to Version 2.0.0:

• New component naming scheme -> Please refer to the component documentation
• Styles now need to be imported manually -> Please refer to the Import Section

Content

• Attention Breaking Changes
• Install and import
• Component Documentation
  • Button
  • Input
  • TextArea
  • Checkbox
  • Toggle
  • RadioButton
  • Dropzone
  • Tabbar
  • Loader
  • ProgressBar
  • FlexContainer
  • Section
  • SubSection
  • Table
  • Main
  • NavigationContainer
  • NavigationSidebar
  • NavigationTabbar
  • Modal
  • Popover & Tooltip
  • Popover Free
  • Smart Menu
  • Smart Menu Free
  • ListIcon
  • Header
  • Floating Badges
• CSS Documentation
  • Utility Classes
  • CSS Variables
• Tips & Tricks
  • Re-style components
  • Info about v-model
  • The size option
• Changelogs
  • Version 3.0.0
  • Version 2.6.0
  • Version 2.5.0
  • Version 2.4.0
  • Version 2.3.0
  • Version 2.2.0
  • Version 2.1.0
  • Version 2.0.0
  • Version 1.4.0
  • Version 1.3.0
  • Version 1.2.0
  • Version 1.1.0

Install and import

1. Installing the library

Via NPM

npm install @jaaahn/hyper-ui

2. Importing the library

// Standard Vue Code
import { createApp } from "vue";
import App from "./App.vue";

const app = createApp(App);
// Standard Vue Code above
// #######################

// See below for config options; these can be omitted
let config = {
    theme: "system",
    size: "normal",
};

import HyperUI from "@jaaahn/hyper-ui";
app.use(HyperUI, config); // config is optional and can be omitted

import "@jaaahn/hyper-ui/styles"; // Import styles

// #######################
// Standard Vue Code below
app.mount("#app");

This is all you need. Now you can use these components within your template. You don't need to import them in each file and you also don't need to put them within you components object in your Vue instance as you would do it with your own custom components.

3. Config

HyperUI allows you to change its behaviour by providing a config.
This config is a JS object passed to the app.use(...) function as the second argument (see above). But, passing this is completely optional and the config can just be omitted if one does not want to change the libraries behaviour.

Config options

4. Preparing your HTML file

Please add these two elements to the end of the html body (required for HyModal, HyPopover, HySmartMenu or HySmartMenuFree component):

<div id="hy-modals-container"></div>
<div id="hy-popovers-container"></div>

If you are planning on using the included HyHeader component, please add these theme-color meta tags to your html head:

<meta name="theme-color" content="#fff" media="(prefers-color-scheme: light)" />

<meta name="theme-color" content="hsl(220, 5%, 13%)" media="(prefers-color-scheme: dark)" />

If you are NOT planning on using the Header, then add the following to your html head:

<meta name="theme-color" content="#eeeef2" media="(prefers-color-scheme: light)" />

<meta name="theme-color" content="#000" media="(prefers-color-scheme: dark)" />

Component Documentation

Component names can be written in Camel Case with the first letter also capitalized, like "HyFlexContainer" or "HyButton". Alternatively you can also write the components in lowercase syntax like "hy-flex-container" or "hy-button".

Mind you: If passing a non string to a prop, you need to use v-bind:PROPNAME. Otherwise you will get a warning in your console.

HyButton

Basic <button> element. It comes in two colors, can be disabled and put into a loading state.

Targeting class

hy-button

Slot

Pass a slot which will be displayed as the normal <button> text.

Options

Different styles or types

Example

<!-- Loading with spinner -->
<hy-button @click="method('hello')" :disabled="false" :loading="isLoading" type="primary">
    Click me
</hy-button>

<!-- Loading with progress -->
<hy-button @click="method('hello')" :disabled="false" :loading="isLoading" :progress="loadingProgress" type="primary">
    Click me
</hy-button>

Notice: Target a specific style of button

Every HyButton component is a <button> nested inside a <div> element (see Re-Styling Components). The specific styles (controlled by the type option) are applied to the <button> element by a class, which matches the type's name. So, if you want to change the background-color of every transparent button, you could use something like:

.hy-button :deep(button.transparent) {
    background-color: yellow !important;
}

/* :deep() is explained in the "Re-Style Components" section */

HyInput

Basic <input> element. It can be disabled and put into an loading state.
Use v-model to create a two-way binding.

Targeting class

hy-input

v-model

Syncs the current input value with your parent vue instance. View the Info about v-model section for more details.

Slot

This component can hold up to 2 icons. One on the left and one on the right.
By default, passing an icon into the slot will position it left to the text. If you want the icon to appear at the right of the input component, then use a named slot with the name right. If you want to display two icons simultaneously, then use two named slots using the names left and right.
This feature was build to work with icon-fonts using the <i> tag. Other systems may also work, but may require more tweaking. Your icons should have a width of around 20px.
These icons cannot be clicked on.

Options

NOTE: Inheriting Props

The option autocomplete got removed in favor of vue's $attrs.
All HTML props except id, class and vue props listed above, will be inherited to the underlying <input> element.
Vue will also automatically inherit all props, including id and class, to the <div> wrapper that this component uses.

Example

<hy-input v-model="username" :disabled="false" :loading="isLoading" type="text" placeholder="Your username"></hy-input>

With an Icon on the left side

<hy-input v-model="username" :disabled="false" :loading="isLoading" type="text" placeholder="Your username">
    <i class="icon-search"></i>
</hy-input>

With an Icon on the right side

<hy-input v-model="username" :disabled="false" :loading="isLoading" type="text" placeholder="Your username">
    <template #right>
        <i class="icon-megaphone"></i>
    </template>
</hy-input>

With an Icon on the left and on the right side

<hy-input v-model="username" :disabled="false" :loading="isLoading" type="text" placeholder="Your username">
    <template #left>
        <i class="icon-search"></i>
    </template>
    <template #right>
        <i class="icon-megaphone"></i>
    </template>
</hy-input>

With progress bar

<hy-input v-model="username" :disabled="false" :loading="isLoading" :progress="loadingProgress" type="text" placeholder="Your username"></hy-input>

HyTextArea

Basic <textarea> element with the option of being disabled.
Use v-model to create a two-way binding.
This Component was not build for being used within a FlexContainer.

Targeting class

hy-text-area

v-model

Syncs the current input value with your parent vue instance. View the Info about v-model section for more details.

Options

NOTE: Inheriting Props

All HTML props except id, class and vue props listed above, will be inherited to the underlying <textarea> element.
Vue will also automatically inherit all props, including id and class, to the <div> wrapper that this component uses.

Example

<hy-text-area v-model="essay" :disabled="false"  placeholder="Your essay goes here" />

HySelect

A HTML select element with custom styling and an icon. Use v-model to create a two-way binding.

Targeting class

hy-select

v-model

Syncs the selected option with your parent vue instance. View the Info about v-model section for more details. This allows you to programmatically set the value while still allowing the user to select the option he wants.

Slot

Pass the <option> elements as you would with regular HTML.

If you want to display an icon on the left side of the component, then you need to use named slots:
One named slot for the options and one for the icon.
Ref example for more detail.

This feature was build to work with icon-fonts using the <i> tag. Other systems may also work, but may require more tweaking. Your icons should have a width of around 20px.
These icons cannot be clicked on.

Options

Example

<hy-select v-model="variable" :disabled="false" :loading="isLoading">
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
</hy-select>

With an icon:

<hy-select v-model="variable" :disabled="false" :loading="isLoading">
    <template #options>
        <option value="option1">Option 1</option>
        <option value="option2">Option 2</option>
    </template>

    <template #icon>
        <i class="icon-sort-descending"></i>
    </template>
</hy-select>

With progress bar

<hy-select v-model="variable" :disabled="false" :loading="isLoading" :progress="loadingProgress">
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
</hy-select>

HyCheckbox

Standard checkbox. It can be disabled. Use v-model to create a two-way binding.

Targeting class

hy-checkbox

v-model

Syncs whether the box is ticked or not with your parent vue instance. View the Info about v-model section for more details.

Slot

Use the slot to pass text which will be displayed as a label.

Options

Example

<hy-checkbox v-model="someBooleanVariable" :disabled="disabledVariable" type="right">
    Click me
</hy-checkbox>

HyToggle

An iOS style toggle "checkbox". Sometimes this is also called a "switch".

This component is functionally identical to the <hy-checkbox> component. Please refer to its documentation.

Example

<hy-toggle v-model="someBooleanVariable" :disabled="disabledVariable" type="right">
    Toggle me
</hy-toggle>

HyRadioButton

Standard radio button. It can be disabled. Use v-model to create a two-way binding.

Targeting class

hy-radio-button

v-model

Syncs which radio button is selected with your parent vue instance. View the Info about v-model section for more details. This allows you to programmatically set the value while still allowing the user to select the option he wants.

Slot

Use the slot to pass text which will be displayed as a label.

Options

Example

<!-- These three components will form a radio group, where only one option can be selected at a time. --> 
<hy-radio-button v-model="someVariable" value="option1" :disabled="disabledVariable"> Option 1 </hy-radio-button>  
<hy-radio-button v-model="someVariable" value="option2" :disabled="disabledVariable"> Option 2 </hy-radio-button>  
<hy-radio-button v-model="someVariable" value="option3" :disabled="disabledVariable" type="right"> Option 3 </hy-radio-button>

HyDropzone

A dropzone component. Drop a file or click on it to open a native file selector window.

Targeting class

hy-dropzone

Options

Reading the selected file

Once the user selects a file, the newValue event will be fired with an event object containing the following information:

{
    content: String,
    name: String,
    size: Number,
    lastModified: Number,
    type: String // MIME-Type of the selected file
}

Clearing the selected file

If one wants to clear the selected file, please call the clear method on the component instance. If this method is called, the newValue event will fire with $event = null.
Guide on how to do this using Vue refs:

<hy-dropzone readMode="dataURL" accept="image/*" @newValue="my_method_for_handling_the_event($event)" ref="myDropzone" />

<hy-button @click="$refs.myDropzone.clear()"> Clear </hy-button>

Directly accessing the underlying <input> element

The underlying <input type="file"> html element is the second child node of the dropzone component. Thus is can be direcly referenced:

<hy-dropzone ref="myDropzone" />

let inputElement = this.$refs.myDropzone.$el.childNodes[1];

Example

Hint: In Vue, the $event is the variable that contains the event object of the triggered event.

<hy-dropzone readMode="text" accept="text/*,application/*,.md" @newValue="myVariable = $event" /> 

Or:

<hy-dropzone readMode="dataURL" accept="image/*" @newValue="my_method_for_handling_the_event" /> 

Or:

<hy-dropzone readMode="dataURL" accept="image/*" @newValue="my_method_for_handling_the_event($event)" /> 

HyTabbar

A tabbar with multiple tabs the user can switch between. Sometimes this is known as a segmented picker or a switch. Use v-model to create a two-way binding, much like the <Select> works.
This component supports dynamically created options (e.g. if using a v-for loop for generating options).
If there are too many options to fit them, the component will automatically allow the user to scroll through the options. For this to work, the component may not be wrapped in a display: flex container or a hy-flex-container!

Targeting class

hy-tabbar

v-model

Syncs the selected tab with your parent vue instance. View the Info about v-model section for more details.

Slot

Syntax: <p data-value="valueOfTab"> Bla bla bla </p>.
See the example below for more info on how to use this element.
Why? Due to technical restrictions, you can't just simply use a <option value=""> element in the slot. Instead, please use a <p> with a custom data-attribute called data-value, like data-value="tab1" or data-value="optionA". You are going to run into issues if this attribute is not given on an option element.

Options

Example

<hy-tabbar v-model="variable" :disabled="disabledVariable">
    <p data-value="tab1">Tab 1</p>
    <p data-value="tab2">Tab 2</p>
    <p data-value="tab3">Tab 3</p>
</hy-tabbar>

HyLoader

This is a custom loading indicator.
Use v-if="booleanVariable" to show the indicator or not.
This is just a spinning wheel, you must position the indicator by yourself.

Targeting class

hy-loader

Options

Example

<hy-loader v-if="isLoading" :width="25" :height="25" :line="3" />

HyProgressBar

This is a custom progress bar.

Targeting class

hy-progress-bar

Options

Example

<hy-progress-bar  v-if="isLoading" :progress="loadingProgress" width="50%" />

HyFlexContainer

This is basically a div with display: flex applied to it. If the screen is smaller than 800px, the flex-direction will be set to column

Targeting class

hy-flex-container

Slot

Pass the elements you want to position within the FlexContainer via the slot.

Options

Your items will shrink to the minimum width without shrinking your content (e.g. text). If you would like to change this behaviour, please do this manually in your css.

Example

<hy-flex-container>
    <input />
    <button>Hello</button>
    <hy-checkbox />
</hy-flex-container>

HySection

This is a section, with (unlike the body) a white background. It should be used most of the time when working with content. A section includes a title and two description fields.

Targeting class

hy-section

Slot

Pass the elements you want to position within the Section via the slot.

v-model: Make it collapsable

If provided alongside a value for title, the section becomes collapsable. Omit this, if you don't want the section to be collapsable (default behaviour).
View the Info about v-model section for more details.

Options

Any title, pre or post field left as null won't be rendered.

Example

<hy-section :border="true" :divider="false">
    <hy-flex-container>
        <input />
        <hy-button>Hello</hy-button>
        <hy-checkbox />
    </hy-flex-container>
</hy-section>

<hy-section title="My Section" pre="Description" v-model="testSectionCollapsed">
    <hy-button>Hello</hy-button>
</hy-section>

HySubSection

Has a slightly darker background-color than a section. Intended for use with only one input / button (etc.) element but one can pass any element via the slot. A sub-section includes a title and two description fields.

Targeting class

hy-sub-section

Slot

Pass the element(s) you want to position within the Sub-Section via the slot.

v-model: Make it collapsable

If provided alongside a value for title, the sub-section becomes collapsable. Omit this, if you don't want the section to be collapsable (default behaviour).
View the Info about v-model section for more details.

Options

Any title, pre or post field left as null won't be rendered.

Example

<hy-sub-section title="Title" pre="First description" post="Second description">
    <hy-input v-model="testInput" placeholder="Input field" />
</hy-sub-section>

<hy-sub-section title="Title" v-model="testSubSectionCollapsed">
    <hy-input v-model="testInput" placeholder="Input field" />
</hy-sub-section>

Info about background color and padding

This component was designed to be used within a regular Section. That's why it has a slightly different color than normal sections. If you want them to appear with the same color as Sections, for example to use them without a wrapper section, then please add the following lines of css to your code:

.hy-sub-section {
    background-color: var(--section-bg-color);

    /* If you want them to have the same padding as regular sections */
    padding: var(--section-padding);
}

HyTable

A table.

Targeting class

hy-table

Slot

Pass HTML table elements.

Options

Example

<hy-table :border="true">
    <tr>
        <th>Col 1</th>
        <th>Col 2</th>
    </tr>
    <tr>
        <td>Hello</td>
        <td>World</td>
    </tr>
</hy-table>

HyMain

A container that resizes based on your screen size. At a certain screen size it locks to a width of 1400px (or whatever you specify it to).

Targeting class

hy-main

Slot

Pass the elements you want to position within the Main view via the slot.

Options

Example

<hy-main maxWidth="800px" :resizeTo="90">
    <hy-flex-container>
        <input />
        <button>Hello</button>
        <hy-checkbox />
    </hy-flex-container>
</hy-main>

HyNavigationContainer

HyperUI comes with a basic navigation system consisting of a sidebar and a tabbar UI component. This container can house both of them and automatically switch between them depending on screen size. It also helps aligning the main content next to the sidebar.

Targeting class

hy-navigation-container

Slot

This component has three slots, which is why we need to use named slots.

1. First, the tabbar for mobile phones and other rather small screens.
   The name of the slot is tabbar.

2. Second, the sidebar for desktop devices that can fit a sidebar next to the main content.
   The name of the slot is sidebar.

3. Third, the main content.
   Here, one may place its <router-view>.
   The name of the slot is content.

As these are named slots, they don't have to be in this order. Just make shure you don't forget one of them.

Options

Example

<hy-navigation-container>    
    <template #sidebar>
        <hy-navigation-sidebar>
            <!-- Of course, one can put in this slot whatever they want: -->
            <h3>Hello World</h3>

            <!-- It's recommended to use the pre-styled navigation buttons for presenting the different routing destinations -->
            <button @click="$router.push('/home')" class="hy-navigation-option" :class="{ selected: $route.name == 'Home' }">
                <i class="icon-home"></i> <!-- Icon (currently only icon-fonts like fontawesome are officially supported) -->
                <span>Home</span> <!-- Label -->
            </button>

            <button @click="$router.push('/settings')" class="hy-navigation-option" :class="{ selected: $route.name == 'Settings' }">
                <i class="icon-settings"></i>
                <span>Settings</span>
            </button>
        </hy-navigation-sidebar>
    </template>
                
    <template #tabbar>
        <hy-navigation-tabbar>
            <!-- These pre-styled navigation buttons are also in the tabbar available, but they change their style to better fit in the tabbar -->
            <button @click="$router.push('/home')" class="hy-navigation-option" :class="{ selected: $route.name == 'Home' }">
                <i class="icon-home"></i>
                <span>Home</span>
            </button>

            <button @click="$router.push('/settings')" class="hy-navigation-option" :class="{ selected: $route.name == 'Settings' }">
                <i class="icon-settings"></i>
                <span>Settings</span>
            </button>
        </hy-navigation-tabbar>
    </template>

    <template #content>
        <hy-main maxWidth="800px">
            <!-- This example uses Vue Router, but essentially you can put anything in here -->
            <router-view></router-view>
        </hy-main>
    </template>
</hy-navigation-container>

The <hy-navigation-sidebar> and <hy-navigation-tabbar> components are explained below.

HyNavigationSidebar

As part of the navigation system HyperUI offers, there is a Sidebar UI component. It should be placed within a HyNavigationContainer.

Targeting class

hy-navigation-sidebar

Slot

Place any content (e.g. a logo, company name and the available pages) that should be displayed within the sidebar here.

Within this slot, one may use the "hy-navigation-option" class on a <button> element to create a specially designed button that may represent a page that the user can visit. Apply the "selected" class to it and it will be highlighted. Within, you can place a label next to an icon.

The following example will use vue router to create a navigation option, that represents the 'home' page of your app:

<button @click="$router.push('/home')" class="hy-navigation-option" :class="{ selected: $route.name == 'Home' }">
    <!-- Icon (currently only icon-fonts like fontawesome are officially supported) -->
    <i class="icon-home"></i>

    <!-- Label -->
    <span>Home</span>
</button>

Note that this syntax is the same within a <hy-navigation-tabbar> component.

Enable scrolling in sidebar

Scrolling must be enabled if there is too much content within the sidebar and the content does overflow if a screen is too small. Be aware that this is only one possible solution and there might be better looking, but more complicated ways to enable scrolling.

.hy-navigation-sidebar :deep(#visual) {
    overflow-y: scroll;
}

Options

Typically, one does not need to change these properties.

Example

For example look at the HyNavigationContainer's example section

HyNavigationTabbar

As part of the navigation system HyperUI offers, there is a Tabbar UI component. It should be placed within a HyNavigationContainer.
This component looks similar to the tabbar that iOS apps typically have.

Targeting class

hy-navigation-tabbar

Slot

Place the available navigation options that should be displayed within the tabbar here.

Within this slot, one may use the "hy-navigation-option" class on a <button> element to create a specially designed button that may represent a page that the user can visit. Apply the "selected" class to it and it will be highlighted. Within, you can place a label below an icon.

The following example will use vue router to create a navigation option, that represents the 'home' page of your app:

<button @click="$router.push('/home')" class="hy-navigation-option" :class="{ selected: $route.name == 'Home' }">
    <!-- Icon (currently only icon-fonts like fontawesome are officially supported) -->
    <i class="icon-home"></i>

    <!-- Label -->
    <span>Home</span>
</button>

Note that this syntax is the same within a <hy-navigation-sidebar> component.

Options

None.

Example

For example look at the HyNavigationContainer's example section

HyModal

A modal element. Adapts to mobile and desktop devices. Respects the bottom safe-area.

Targeting class

hy-modal

v-model

Syncs the current visibility state with your parent vue instance. View the Info about v-model section for more details. If modelValue is set to true, the modal will show. So you can open the modal programmatically while letting the user close the modal with the build in close button.

Slot

Pass the elements you want to appear within the modal in the slot. Inside, you can directly interact with your Vue instance as it would be normal template code.

Options

IMPORTANT

The modal component uses teleports to get the modal out of the regular component tree, as it would otherwise cause problems with position: fixed.

BUT, in order for this to work, one must specify a target element, preferably outside of the vue instance (for example in index.html). This element should be a div with an #hy-modals-container id. Do not style this element with css! You only need one element for all your modals in your Vue project!
See below for an example.

Example

In your vue template:

<hy-modal v-model="modal.isOpen">
    <h1>My test modal</h1>
    <p>{{ myText }}</p>
    
    <hy-button v-on:click="modal.isOpen = false">
        Close modal
    </hy-button>
</hy-modal>

In index.html:

(...)

<body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>

    <div id="hy-modals-container"></div>
</body>

(...)

HyPopover

A popover container. Floats above the main content and stays attached to the target element with the help of Popper. Will disappear if the user clicks outside of it.
If you set hover to true, then you can use this component as a tooltip.

Attention

Popovers may require a lot of computing resources. We recommend not using too many of them, certainly not in dynamic scenarios (e.g. using v-for). For such applications, please use HyPopoverFree.

Targeting class

hy-popover

v-model

Syncs the current open state with your parent vue instance. View the Info about v-model section for more details. If modelValue is set to true, the popover will show. So you can open the popover programmatically while giving the user the option to close the popover by clicking outside of it. Even if you use the popover as a tooltip that simply shows when the user hovers over an element, you still need to use v-model!

Slot

This component has two slots, which is why we need to use named slots.

1. First, the target element This can be any element, such as a <p> tag or a HyButton component.
   The name of the slot is element

2. Second, the popover content popover This is what will appear inside the popover.
   The name of the slot is popover

So, within the components slot, you should pass two <template #nameOfSlot> tags. See the example below for more detail.

Options

Example

<hy-popover v-model="popover.isOpen" minWidth="400px">
    <template #element>
        <hy-button v-on:click="popover.isOpen = !popover.isOpen">Toggle popover</hy-button>
    </template>

    <template #popover>
        <h4>Hello World</h4>
        <hy-input v-model="testInput"/>
    </template>
</hy-popover>

HyPopoverFree

A popover container. Floats above the main content and stays attached to the target element with the help of Popper. Will disappear if the user clicks outside of it.
Does NOT support hover.

Difference to HyPopover

HyPopover was designed to be used "inline" with one element.
If you want to have one popover component and be able to attach it to different elements, then please use this component.
A popover may require a lot of computing resources. Use HyPopoverFree in dynamic situations (e.g. when using v-for): one HyPopoverFree that may attach to different elements depending on the situation.

Targeting class

hy-popover-free

v-model

Syncs the current open state with your parent vue instance. View the Info about v-model section for more details. If modelValue is set to true, the popover will show. So you can open the popover programmatically while giving the user the option to close the popover by clicking outside of it.

Slot

Popover content. This is what will appear inside the popover.
Unlike HyPopover, here you do not pass the target element via a slot. Instead, the target element is passed to the component via props.

Options

IMPORTANT

The popover-free component uses teleports to get the popover out of the regular component tree.

BUT, in order for this to work, one must specify a target element, preferably outside of the vue instance (for example in index.html). This element should be a div with an #hy-popovers-container id. Do not style this element with css! You only need one element for all your free-floating popovers in your Vue project!
See below for an example.

Example

Vue template:

<hy-popover-free v-model="myPopover.isOpen" :element="myPopover.targetElement">
    <p>Popover</p>
</hy-popover-free>

<!-- Just some example elements the popover can attach to -->
<!-- We use pointer-events: none on the icons to prevent the popover from attaching to the icon instead of the button -->
<hy-flex-container>
    <hy-button @click="openPopover($event.target)"> <i class="icon-printer" style="pointer-events: none"></i> </hy-button>
    <hy-button @click="openPopover($event.target)"> <i class="icon-image" style="pointer-events: none"></i> </hy-button>
    <hy-button @click="openPopover($event.target)"> <i class="icon-megaphone" style="pointer-events: none"></i> </hy-button>
    <hy-button @click="openPopover($event.target)"> <i class="icon-calendar" style="pointer-events: none"></i> </hy-button>
    <hy-button @click="openPopover($event.target)"> <i class="icon-home" style="pointer-events: none"></i> </hy-button>
    <hy-button @click="openPopover($event.target)"> <i class="icon-lock-open" style="pointer-events: none"></i> </hy-button>
</hy-flex-container>

Within your Vue instance:

data() {
    return {
        myPopover: {
            targetElement: null,
            isOpen: false,
        }
    }
},
methods: {
    openPopover(targetElement) {
        this.myPopover.targetElement = targetElement;

        // Sometimes, using vue's $nextTick is required. See Known Issues for more detail.
        this.$nextTick(() => {
            this.myPopover.isOpen = true;
        }
    },
},

In index.html:

(...)

<body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>

    <div id="hy-modals-container"></div>
</body>

(...)

Known issues

If you receive this error:
HyperUI Error: Target element found but not yet rendered. Please try wrapping code updating the modelValue in this.$nextTick()
Then wrapping the code responsible for updating the modelValue in this.$nextTick() might help:

function openMyPopover(el) {
    // Setting the target element
    this.myPopoverFree.element = el;

    // Open popover
    this.$nextTick(() => {
        this.myPopoverFree.open = true;
    });
}

HySmartMenu

Sometimes a modal is just right for mobile devices but too big on desktops. A smart menu is a modal on mobile that turns into a compact popover on desktop. This components uses HyModal and HyPopover under the hood.

Attention

As smart menus use popovers, they may require a lot of computing resources. We recommend not using too many of them, certainly not in dynamic scenarios (e.g. using v-for).
In dynamic scenarios, HySmartMenuFree might work better.

Targeting class

hy-smart-menu

v-model

Syncs the current open