Table of Contents

• Intro
• Breaking Changes
• Install and Import
• Config
• Preparing your HTML
• Core Concepts
  • Brand Themes
  • Classic Brand Theme
  • Element Variants
  • Size Option
• Components
  • HyButton
  • HyCheckbox
  • HyDropdown
  • HyDropzone
  • HyFilterButton
  • HyFlexContainer
  • HyFloatingBadge
  • HyHeader
  • HyInput
  • HyListIcon
  • HyListItem
  • HyLoader
  • HyMain
  • HyModal
  • HyNavigationContainer
  • HyNavigationSidebar
  • HyNavigationTabbar
  • HyNotes
  • HyPopover
  • HyProgressBar
  • HyRadioButton
  • HySection
  • HySelect
  • HySelectDropdown
  • HySmartMenu
  • HySplitView
  • HySubSection
  • HyTabbar
  • HyTable
  • HyTextArea
  • HyToggle
  • HyTooltip
• Utility Classes
• CSS Variables
• Tips & Tricks
  • Z-Index Guide
  • Changing the font-size
  • Desktop and Mobile Mode
  • Recommended Navigation Code Structure
  • How v-model works
  • Working with Slots
  • Re-Style Components
• Changelogs

Welcome to 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 4.0.0

We provide an upgrade script that can migrate your project mostly from v3 to v4. This script can only update attribute, prop and css variable changes. Any syntax upgrades will have to be performed by you.

$ npx -p @jaaahn/hyper-ui upgrade-v3-to-v4

When running, the script will prompt you for a directory. It will migrate any file within that directory. Use version control to go over changes and inspect your codebase after migration for any damage that the migration script might have caused.

The following paragraphs detail all the changes made in this release.
Any points marked with [x] can be done by the migration script. Any changes marked with [ ] have to be manually migrated.

Renamed props for a more consistent experience

| Auto | Component | OLD | | NEW | Notes | | ----- | ---------------- | --------------------- | --- | --------------------- | -------------------------------------- | | [x] | HyButton | type | --> | variant | | | [x] | HyDropdown | border | --> | showBorder | | | [x] | HyHeader | extendHeadline | --> | doExtendHeadline | | | [ ] | HyModal | hideScrollbars | --> | showScrollbars | !!! inverted behaviour | | [ ] | HyModal | disableSwipeToClose | --> | swipeToCloseEnabled | !!! inverted behaviour | | [ ] | HyModal | disableDismiss | --> | dismissible | !!! inverted behaviour | | [ ] | HySmartMenu | hideScrollbars | --> | showScrollbars | !!! inverted behaviour | | [ ] | HySmartMenu | disableSwipeToClose | --> | swipeToCloseEnabled | !!! inverted behaviour | | [ ] | HySmartMenu | disableDismiss | --> | dismissible | !!! inverted behaviour | | [x] | HySmartMenu | type | --> | variant | | | [x] | HyPopover | hover | --> | doOpenOnHover | | | [x] | HyPopover | type | --> | variant | | | [x] | HySection | border | --> | showBorder | | | [x] | HySection | dividers | --> | showDividers | | | [x] | HySelectDropdown | enableSearch | --> | showSearch | | | [x] | HySelectDropdown | border | --> | showBorder | | | [x] | HyTable | border | --> | showBorder | | | [x] | HyTabbar | type | --> | variant | !!! Renamed option "blue" to "primary" |

Renamed element variants

| Auto | OLD | | NEW | Notes | | ----- | ----------------- | --- | ----------------- | -------------------------------- | | [x] | transparent | --> | ghost | | | [x] | transparent-bg | --> | ghost-bg | | | [x] | light-blue | --> | ghost-blue | | | [x] | light-bg-blue | --> | ghost-bg-blue | | | [x] | light-red | --> | ghost-red | | | [x] | light-bg-red | --> | ghost-bg-red | | | [x] | light-orange | --> | ghost-yellow | !!! renamed "orange" to "yellow" | | [x] | light-bg-orange | --> | ghost-bg-yellow | !!! renamed "orange" to "yellow" | | [x] | light-green | --> | ghost-green | | | [x] | light-bg-green | --> | ghost-bg-green | |

Renamed size options

| Auto | OLD | | NEW | Notes | | ----- | -------- | --- | ---- | ----------------- | | [x] | normal | --> | lg | Still the default | | [x] | light | --> | md | | | [x] | thin | --> | sm | |

Prefixed CSS Variables

[x] We prefixed all CSS variables with --hy-. The migration script can upgrade all of these.

Changed some CSS variable names regarding naming element variants naming scheme

[x] Some css variable names have changed to align more with the updated element variants.

Changes in HyPopovers and HySmartMenus including their "Free" variants

[ ]

We rewrote the HyPopover component leading to a breaking interface change regarding it and HySmartMenu.

Going forward, all HyPopovers work like the old HyPopoverFree (apart from prop name changes). This means, the reference element is now passed via a prop instead of inlining it with the use of a slot.

Consider this code:

<hy-popover v-model="isOpen">
    <template #element>
        <hy-button @click="..."> ... </hy-button>
    </template>

    <template #content>
        Popover content
    </template>
</hy-popover

This code would now be:

<hy-button id="targetButton" @click="..."> ... </hy-button>

<hy-popover reference="#targetButton" v-model="isOpen"> Popover content </hy-popover>

Please notice the changes we did to the code:

• Added an id attribute to the target element
• Moved the target element out of the popover (allowing us to get rid of the <template>s)
• Added the reference attribute with a query selector string for selecting the target element

HyPopovers inherits from its predecessor HyPopoverFree the ability to directly accept HTMLElements.

These changes also mean, we updated how SmartMenus work and removed the HyPopoversFree and HySmartMenuFree components.
For more information, please read the docs for HyPopovers and HySmartMenus.

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:

| OLD | | NEW | | ---------------------- | --- | -------------------------------------------------------------------------------- | | reset | --> | hy-reset | | --font-color-similar | --> | --hy-font-color-match | | same | --> | match (only affects HyPopover, HyPopoverFree, HySmartMenu and HySmartMenuFree) |

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:

| OLD | | NEW | | --------------------------- | --- | ------------------------- | | hyper-button | --> | hy-button | | hyper-checkbox | --> | hy-checkbox | | hyper-dropzone | --> | hy-dropzone | | hyper-flexcontainer | --> | hy-flex-container | | hyper-header | --> | hy-header | | hyper-input | --> | hy-input | | hyper-listicon | --> | hy-list-icon | | hyper-loader | --> | hy-loader | | hyper-main | --> | hy-main | | hyper-modal | --> | hy-modal | | hyper-navigationcontainer | --> | hy-navigation-container | | hyper-navigationsidebar | --> | hy-navigation-sidebar | | hyper-navigationtabbar | --> | hy-navigation-tabbar | | hyper-popover | --> | hy-popover | | hyper-popoverfree | --> | hy-popover-free | | hyper-progressbar | --> | hy-progress-bar | | hyper-radiobutton | --> | hy-radio-button | | hyper-section | --> | hy-section | | hyper-select | --> | hy-select | | hyper-smartmenu | --> | hy-smart-menu | | hyper-smartmenufree | --> | hy-smart-menu-free | | hyper-subsection | --> | hy-sub-section | | hyper-tabbar | --> | hy-tabbar | | hyper-table | --> | hy-table | | hyper-textarea | --> | hy-text-area | | hyper-toggle | --> | hy-toggle |

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

Install and Initialize

Installing

From a CND

<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>

<script src="https://cdn.jsdelivr.net/npm/@jaaahn/hyper-ui/dist/hyper-ui.iife.js"></script>

This will expose the global variable HyperUI which can be used to install the library: app.use(HyperUI, config).
Importing styles is not required if importing from a CDN.

Via NPM

npm install @jaaahn/hyper-ui

Initializing 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: "lg",
    // variant: "ghost-bg-blue",
};

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

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

// #######################
// 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.

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 import). 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

Preparing your HTML file

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="#191c1f" 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="#0c0c0e" media="(prefers-color-scheme: dark)" />

Core concepts

The following pages will explain some of the core concepts of this library.

Brand themes

Brand themes are HyperUI's way of managing a color palette. If your app requires specific brand colors, brand themes allow you to fully customize available colors and element variants.

Components will use the colors specified in your brand theme to compute their color/variant options.

The brandTheme object can be passed when initializing the library. If you omit this, HyperUI will use it's own colors.

The brandTheme object has two entries:

brandTheme: {
    colors: {
        ...
    },
    accentColor: "...",
},

In the colors object, list all colors you want the application to have. You may use any color format supported by CSS.

Then, please select an accentColor by using the name of the color.

If you need an example, please look at Classic HyperUI Brand Theme On documentation about CSS variables computed from brand colors, refer to CSS Variables

Classic HyperUI brand theme

brandTheme: {
    colors: {
        blue: "hsl(222, 100%, 61%)",
        pink: "hsl(340, 82%, 49%)",
        yellow: "hsl(44, 97%, 50%)",
        green: "hsl(116, 45%, 54%)",
        red: "hsl(0, 76%, 58%)",
        "light-blue": "hsl(205, 100%, 62%)",
        purple: "hsl(321, 62%, 46%)",
    },
    accentColor: "blue", // Choose a color from the colors object
},

This means, the following colors are available: "blue", "pink", "yellow", "green", "red", "light-blue", "purple". The accent (primary) color is "blue".

Element variants

On supported elements, these variants are available.

Additionally, all colors of your selected brand theme become available as "solid", "ghost" and "ghost-bg" element variants.

An example: If you have a color called "green", then these variants will be made available: green, ghost-green and ghost-bg-green.

The size option

Currently, the size option supports lg, md and sm. This option can be set individually for each element or via HyperUI config globally.

The lg option is the default for HyperUI.

Component Documentation

On the following pages we want to list all included components as well as provide examples and demos.

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 Component

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

Example

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

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

Note: 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 variant option) are applied to the <button> element by a class, which matches the variants's name. So, if you want to change the background-color of every ghost button, you could use something like:

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

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

HyCheckbox Component

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>

HyDropdown Component

An expanding menu. The menu floats above other content (and thus is not an inline element) but remains visually attached. It therefore is the mid-ground between a popover and an expandable section.

Targeting class

hy-dropdown

Slot

Options

Examples

<hy-dropdown v-model="dropdownIsOpenVariable" title="Click to expand">
    <p>Hello World</p>
</hy-dropdown>

Or with an icon (syntax equal to hy-select or hy-input)

<hy-dropdown v-model="dropdownIsOpenVariable" title="Click to expand">
    <template #content>
        <p>Hello World</p>
    </template>

    <template #icon>
        <i class="icon-settings"></i>
    </template>
</hy-dropdown>

HyDropzone Component

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)" />

HyFilterButton Component

This component brings a filter "pill-shaped" HyButton with an "is active" indicator and a HySmartMenu. The button opens and closes the menu, no need for v-model.

Targeting class

hy-filter-button

Slot

Options

The component inherits all options of HyButton, except for: variant
The component inherits all options of HySmartMenu, except for: variant, modelValue, reference

Example

<hy-filter-button headline="Filter example" minWidth="300px" :active="search != ''">
    <template #button>
        <i class="icon-search"></i>
        Search
    </template>

    <template #content>
        <hy-input v-model="search"></hy-input>
    </template>
</hy-filter-button>

Tip: wrap multiple filter buttons inside a HyFlexContainer with :allowBreak="false" justify="flex-start" set to create a filter row.

HyFlexContainer Component

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>

Floating Badge

This is not a component but rather a utility class.

To activate, apply to any element the class hy-floating-badge.
Now you may specify the text to display via an data-badge-text attribute. You may use v-bind:data-badge-text to bind the attribute to a reactive vue variable (see example 2). This attribute can be ommited (or fed an empty string) to just show a small dot above the target element (see example 3).

Examples

Example 1:

<hy-button class="hy-floating-badge" data-badge-text="10k">Show the News</hy-button>

Example 2:

<hy-button class="hy-floating-badge" v-bind:data-badge-text="myBadgeText">Show the News</hy-button>

<hy-input v-model="myBadgeText" placeholder="Badge text"></hy-input>

Example 3:

<hy-button class="hy-floating-badge">Show the News</hy-button>

HyHeader Component

A page header component. Sticks to the top of the screen on mobile and floats on desktop devices.

Attention

The following steps need be performed if using this component:

• We recommend using the same values for the properties maxHeight and resizeTo as used on HyMain
• We recommend using the same value for the property switchToMobileAt as used on HyNavigationContainer
• Always place the header ABOVE the HyMain component

• Put this in 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 need any guidance on how to structure your code, take a look at this guide: Recommended navigation code structure

Targeting class

hy-header

Slot

Options

Example

<hy-header maxWidth="800px" :resizeTo="90" headline="HyperUI" icon="icon-home">
    <!-- Any additional elements go here -->
</hy-header>

More complex example with two slots

<hy-header maxWidth="800px" :resizeTo="90" headline="HyperUI" icon="icon-home">
    <!-- Left slot must be named explicitly -->
    <template #left>
        <hy-button variant="ghost-bg" size="sm"> <i class="icon-chevron-left"></i> Back </hy-button>
    </template>

    <!-- Right slot can be treated as the default slot, but can named explicitly -->
    <hy-button variant="primary" size="sm"> Hello </hy-button>
</hy-header>

HyInput Component

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

Options

NOTE: Inheriting Props

All HTML attributes except id, class and vue props listed above, will be inherited to the underlying <input> element.

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>

HyListIcon Component

An iOS style list icon. Best used within sections with automatic dividers turned on to create an elegant e.g. settings page.

Targeting class

hy-list-icon

Slot

Pass your icon into the default slot.

Options

Example

<hy-list-icon color="light-blue">
    <i class="icon-printer"></i>
    <!-- Your icon -->
</hy-list-icon>

Best used in sections:

<hy-section :showDividers="true">
    <hy-flex-container :allowBreak="false">
        <hy-list-icon color="pink"> <i class="icon-printer"></i> </hy-list-icon>

        <hy-toggle type="right"> Toggle this </hy-toggle>
    </hy-flex-container>

    <hy-flex-container :allowBreak="false">
        <hy-list-icon color="orange"> <i class="icon-plus-circle"></i> </hy-list-icon>

        <p>Look at this</p>
    </hy-flex-container>
</hy-section>

HyListItem Component

This list item was designed to build elegant settings pages. Best used within sections with automatic dividers turned on.

Targeting class

hy-list-item

Slot

Options

Example

<hy-section :showDividers="true">
    <hy-list-item color="pink" icon="icon-printer">
        <p>Hello World</p>
    </hy-list-item>

    <hy-list-item color="red" :clickable="true">
        <p>Hello World</p>
    </hy-list-item>

    <hy-list-item color="red">
        <template #content>
            <p>Hello World</p>
        </template>

        <template #icon> <svg>...</svg> or <i class="icon-..."></i> </template>
    </hy-list-item>
</hy-section>

HyLoader Component

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" />

HyMain Component

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>

HyModal Component

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

Options

Example

In your vue template:

<hy-modal v-model="modal.isOpen" headline="My test modal">
    <p>{{ myText }}</p>

    <hy-button v-on:click="modal.isOpen = false"> Close modal </hy-button>
</hy-modal>

Or with a header and footer:

<hy-modal v-model="modal.isOpen" headline="My test modal">
    <template #header>
        <hy-button variant="ghost-bg-red" size="md">Hello World Header</hy-button>
    </template>

    <template #content>
        <p>Lorem Ipsum</p>
    </template>

    <template #footer>
        <hy-button variant="ghost-bg-red" size="md">Hello World Footer</hy-button>
    </template>
</hy-modal>

HyNavigationContainer Component

HyperUI comes with a basic navigation system consisting of a sidebar and a tabbar UI component.

If you just provide a Sidebar and Tabbar component, then the container will display the sidebar on desktop devices and the tabbar on mobile devices. It uses the switchToMobileAt prop to decide which to use when.

Optionally, you may use the sidebarVisibleDesktop v-model (which defaults to true) to hide/show the sidebar on desktop devices.

If you use the sidebarVisibleMobile v-model (which defaults to false), you can also hide/show the sidebar on mobile devices. The sidebar will then render over the main content and clicking outside of it will close it. Using this does not void your option to use the tabbar component on mobile. You could, if you wish so, use the tabbar and the sidebar in conjunction on mobile.

Targeting class

hy-navigation-container

Slot

Options

Example

`html <hy-navigation-container v-model:sidebarVisibleDesktop="sidebarVisibleDesktop" v-model:sidebarVisibleMobile="sidebarVisibleMobile"> <template #sidebar> <hy-navigation-sidebar>

Hello World

        <!-- 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 -->
            <span>Home</span>
            <!-- Label -->
        </button>

        <br />

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