Since Firefox does not (at the moment) support custom scrollbars like Chrome, it would be nice if something like the class below would be implemented to simulate custom scrollbars:

.custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: thumbColor trackColor;
}

What
A new package (e.g. @bybas/latte-ui-layouts) that contains a few pre-made layouts.

Layout ideas

• Proper master-detail.
• Various app layouts.
• Various admin layouts.

Need to write a lot of documentation and create a few examples.

What needs to happen

• Getting started
• Layout
  • Colors
  • Grid system
  • Typography
  • Utilities
  • Variables
• Components
  • App bar
  • Avatar
  • Badge
  • Bottom nav
  • Button
  • Chat
  • Data table
  • Dropdown button
  • Expandable
  • Form elements
  • List
  • Message
  • Nav
  • Notice
  • Notification
  • Overlay
  • Pagination
  • Panel
  • Popup
  • Portal
  • Progress
  • Question
  • Ripple
  • Sheet
  • Snackbar
  • Spinner
  • Swiper
  • Tabs
• JavaScript
  • Actions
  • Message / alert
  • Notice
  • Utilities

Improvements to existing form elements and lower their css footprint.

• Text, number and select fields.
• Checkbox (only improvements).
• Radio button (only improvements).
• Toggle button (only improvements).
• Colorpicker.
• Date and time pickers.

Why
Fasted build process, less plugins for the same work and better community.

Target version
None, just a build process.

What
A new component to toggle content like more text in a panel or a submenu.

API

<latte-expandable>
	<button v-slot:header>Toggle</button>
	
	<div>
		Extra content!
	</div>
</latte-expandable>

What
After #47 we should also give users the option to override every icon used within latte-ui itself.

Proposal
Create new options containing all icons that can be overwritten by users.

Target version
1.9

What
Notifications appear behind taller app bars.

What should happen
Notifications should appear above app bars.

Implement the Ripple effect as seen in Material Design.

Reference: https://material.io/develop/web/components/ripples/

Themes in html

When you click the dropdown icon (see icon marked red in the image) to open the dropdown, you cannot use the same icon to close it again.
To close the dropdown you need to click next to it, or select an item

Improve design when .flex-row is applied to .btn-action.

Bij het toevoegen van nieuwe inloggegevens in de darkmode van het intranet, heeft de tekst in 'Relatie' nog zwarte/donkere tekst.

Some css selectors have properties that represent the default browser value.

Note: this feature should be manually turned on/off

When you switch from tabs in a tab-container, the line should animate to the new tab.
Something like: https://codesandbox.io/s/l4px14m9lz?module=App.vue (Make sure to click the refresh button in the "browser view")

What
Bottom nav is a navigation component that sits on the bottom of the screen. Users can touch various icons to navigate between top-level screens.

Why
Works well on mobile and could use it in work related projects.

What should the API look like?

<latte-bottom-nav :value="3">
	<latte-ripple as="a" class="btn btn-action"><i class="mdi mdi-home"></i><span>Home</span></latte-ripple>
	<latte-ripple as="a" class="btn btn-action"><i class="mdi mdi-compass"></i><span>Discover</span></latte-ripple>
	<latte-ripple as="a" class="btn btn-action"><i class="mdi mdi-music-note"></i><span>My music</span></latte-ripple>
	<latte-ripple as="a" class="btn btn-action"><i class="mdi mdi-radio-tower"></i><span>Radio</span></latte-ripple>
	<latte-ripple as="a" class="btn btn-action"><i class="mdi mdi-shopping-music"></i><span>Store</span></latte-ripple>
</latte-bottom-nav>

<latte-bottom-nav class="bottom-nav-primary bottom-nav-shifting" :value="3">
	<latte-ripple as="a" class="btn btn-action"><i class="mdi mdi-home"></i><span>Home</span></latte-ripple>
	<latte-ripple as="a" class="btn btn-action"><i class="mdi mdi-compass"></i><span>Discover</span></latte-ripple>
	<latte-ripple as="a" class="btn btn-action"><i class="mdi mdi-music-note"></i><span>My music</span></latte-ripple>
	<latte-ripple as="a" class="btn btn-action"><i class="mdi mdi-radio-tower"></i><span>Radio</span></latte-ripple>
	<latte-ripple as="a" class="btn btn-action"><i class="mdi mdi-shopping-music"></i><span>Store</span></latte-ripple>
</latte-bottom-nav>

Why
It's nicer.

Every browser that we support has support for css variables. This will also reduce the amount of compiled css.

What
If cli compiles the changes and there is a <latte-popup> or <latte-overlay> on the page, an error will be triggered in beforeDestroy and mounted.

• <latte-overlay/>
• <latte-popup/>

What
Portals are a way to render something somewhere else in your application.

Why
You'll be able to render something from a component without breaking it into it's own component.

What should the API look like?

<!-- Portal to the target named destination. -->
<latte-portal to="destination">
	<button class="btn btn-contained btn-primary"><span>Button</button></button>
</latte-portal>

<!-- Create a portal target; component cannot have children. -->
<latte-portal-target name="destination"/>

It's nicer.

Hey,

I cannot see the icons. How can I fix this?

Screen: https://prnt.sc/od2jvc

Website code: https://pastebin.com/pYQdCbYf

Hope you can tell me how to solve/fix.

Why
It's more streamlined with the rest of latte-ui.

Proposed components

• latte-checkbox
• latte-radio
• latte-toggle

Target version
1.8.0

• Autocomplete is disabled when v-model changes while initializing.
• You can stil search when autocomplete is disabled and field is focussed.

This is a mess at this point.

When using <latte-bottom-nav> errors can occur when no valid items are found.
This happens on the following line:

Version
1.6.0-beta.0

What happens
When you select a date in <latte-datetime-picker> it falls back to the initial date given.

What should happen
The newly selected date should be selected.

When a tooltip is present on a element and you remove that element, the tooltip will still be visible (see attached video).

Why
More flexible way to add data to various components.

Affected components

• Autocomplete.
• Data table.

Note on data fragment and data table
We could find a way to merge these components.

Target version
1.8.0

What
Current uploader component is broken. Need to create a new one that is more extendible.

Solution
Introduce a new <latte-uploader/> component that is easily extendable with scoped slots. That component should be the skeleton of every uploader tool in latte ui. Other components can use this ons as a basis.

Hey,

I'm trying to use my own icon pack. When I set the options in my app.js

Vue.use(LatteUI **, { emojiBaseUrl: 'https://mijnsite/emojis', emojiPath: '/svg/'}**);

^^What is between the ** is causing the error.

I'm getting a error that is:

TypeError: Cannot read property 'indexOf' of undefined
    at convertCodePoint (app.js?id=8728f818db6fe7867144:1453)
    at app.js?id=8728f818db6fe7867144:1540
    at Array.map (<anonymous>)
    at onEmojisLoaded (app.js?id=8728f818db6fe7867144:1529)
    at app.js?id=8728f818db6fe7867144:1508

The error is related to the code that is inside emoji.js:

function convertCodePoint(codePoint)
{
    if (codePoint.indexOf("-") > -1)
    {
        let parts = [];
        let s = codePoint.split("-");

        for (let i = 0; i < s.length; i++)
        {
            let part = parseInt(s[i], 16);

            if (part >= 0x10000 && part <= 0x10FFFF)
            {
                let hi = Math.floor((part - 0x10000) / 0x400) + 0xD800;
                let lo = ((part - 0x10000) % 0x400) + 0xDC00;
                part = (String.fromCharCode(hi) + String.fromCharCode(lo));
            }
            else
            {
                part = String.fromCharCode(part);
            }

            parts.push(part);
        }

        return parts.join("");
    }
    else
    {
        let s = parseInt(codePoint, 16);

        if (s >= 0x10000 && s <= 0x10FFFF)
        {
            let hi = Math.floor((s - 0x10000) / 0x400) + 0xD800;
            let lo = ((s - 0x10000) % 0x400) + 0xDC00;

            return (String.fromCharCode(hi) + String.fromCharCode(lo));
        }
        else
        {
            return String.fromCharCode(s);
        }
    }
}

I want to use my own emoji package that i host on my own website, but it won't work. So how can i fix this?

Hope to hear soon.

Add a (optional) dropdown to the datatable where you can select the amount of results per page.
Example:

Hi! So, there weren't any updates in the past couple of months to this project and that is with a good reason. As you probably know, Vue 3 is in RC right now and I've been working on a 2.x version of Latte UI, build for Vue 3.

When it's ready for alpha, I'll publish the fresh code in this repository.

Thnx for the patience! 😃

• Checkbox.
• Radio button.
• Toggle button.

What
When popups are opened a is-popup-opened class is added to main#app, but when two popups are opened, the class gets removed while there is still a popup opened. We need something to keep track of popups and add or remove the class in that something.

Proposed api

export function isPopupOpened() {}

export function popupClosed() {}

export function popupOpened() {}

What
Latte UI uses materialdesignicons.com as it's core icon library, as Latte UI is now used by other people we should also support other icon libraries. For CSS I already created a $latte-icon-class variable.

Proposal
Create an icon factory that can be overridden in Vue.use(LatteUI, {...}) and provide some defaults.

Target version
1.8.0

Component
latte-popup

Type
New feature.

Description
Add a new persistent property. When TRUE the popup cannot close by clicking outside.

List views are a common use case for displaying information. List markup should be similar to navs.

• Create basic list markup, based on nav.
• Add markup for one or more lines of text in a list item.
• Add support for prefixes and suffixes, e.g. avatars or icons.

It would be nice to have an option on the latte-ripple component to trigger on hover.

What's wrong
Action buttons should be able to work with btn-text (default), btn-contained and btn-soft to add more variety to them.

Current behavior
It now basically a copy of btn-text

With the recent change that overlays block scrolling etc on the root element, overlays don't respond to pointer-events.

Solution
Add pointer-events: all to overlays when they're opened.

Should not update show directly.

Why
Our toolbar concept works only with a single toolbar per page. App bars will also give more flexibility to the developer.

Tasks

• Create base css for app bars.
• Apply theming.

Benefits over toolbar

• More than one row.
• More flexibility.

Add support for submenus in nav-list. This can be done without a new Vue component.

On mobile, submenus should transition to the new menu with a back button.

What
For #10 it would be awesome if one menu can morph into another one. This window component should have sub views that can replace each other.

Why
Opens the possibility to create other components based on this at a later point, such as a carousel.

Hallo,

Ik krijg op portaal.cmfm.nl deze melding: https://gyazo.com/f52bd1e3ab34ee557415cd65c1a84fbb

Waarom krijg ik dit ??

Add a disabled state design to the following components:

• Checkbox.
• Radio button.
• Toggle button.
• Field, already has it, but needs improvement.
• Select.
• Range.