Metro 4 Components Library

Last update: Dec 30, 2022

Overview

Metro 4 Components Library

Sleek, intuitive, and powerful front-end framework for faster and easier web development. Build responsive, mobile-first projects on the web with the first front-end component library in Metro Style.
Explore Metro 4 docs »

Metro 4 is an MIT-licensed open source project. It's an independent project with its ongoing development made possible entirely thanks to the support by these
awesome Backers.

License and Premium Features

This project licensed under the MIT license. In addition, SUPPORT PACK is available for an annual subscription on XS:CODE and for a Patreon Patrons.

SUPPORT PACK includes an Extra time for priority support by email and other options.

Donation on Patreon

Community

Contributing

All contributions are welcome. Learn more about how you can contribute to this project here.

Important! Before you create Pull Request, you must sign CLA!

Docs

Please click here for Documentation and Demo.

Releases

Metro 4 releases frequently. I Am create release when there are significant bug fixes, new APIs or components. The usual frequency of release of the new version is one week on Sundays.

LTS

Long term support of older versions of Metro 4 does not currently exist. If your current version of Metro 4 works for you, you can stay on it for as long as you'd like. If you want to make use of new features as they come in you should upgrade to a newer version.

Browser Compatibility


Latest 2 ✔	Latest 2 ✔	Latest 2 ✔	Latest 2 ✔	Latest 2 ✔

Old version

Metro UI CSS 3.x you can find in a repo Metro-UI-CSS-3
Metro UI CSS 2.x you can find in a repo Metro-UI-CSS-2
Metro UI CSS 0.x you can find in a repo Metro-UI-CSS-095

Documentation and Demo for V3: metroui.org.ua/v3.
Documentation and Demo for V2: metroui.org.ua/v2.
Documentation and Demo for V0: metroui.org.ua/v0.

Thanks

Thanks to all. Special thanks to all those who financially supported the project.

Credits

You can read about credits here

Comments

Announcement of a new version of the Metro UI CSS
The new version (1.0) will be available in the next 2 weeks.

In new version:

refactoring and optimization of code

multi level dropdown menu

new type of menus

all windows 8 main colors (45)

specific background colors (21) for tiles container with special outline color for tile

all javascript plugins as jquery.widget

new size of tile

If possible, all issues will be considered

.....

input file

new feature
opened by olton 111

Conflict with str.search() javascript function

Hello.

First of all congratulate them for this great job.

I work with Asp.Net Core 3.1 (Razor Pages) and I have a piece of code that gives an error when I load metro.min.js.

If I comment the line that loads metro.min.js or put my piece of code before loading metro.min.js there is no error.

The error is as follows: (index):352 Uncaught SyntaxError: Invalid regular expression: / `

    function () {
        var a = this.concat();
        for (var i = 0; i < a.length; ++i) {
            for (var j = i + 1; j < a.length; ++j) {
                if (a[i] === a[j])
                    a.splice(j--, 1);
            }
        }
        return a;
    }

` /: Nothing to repeat at String.search () at (index):352

My piece of code is in _Layout.cshtml and is as follows:

<script src="~/_content/Comunes/lib/jquery/dist/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<script src="~/_content/Comunes/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>

<script src="~/_content/Comunes/lib/metro/js/metro.js"></script>

<script src="~/_content/Comunes/lib/jsGrid/jsgrid.min.js"></script>
<script src="~/_content/Comunes/lib/jsGrid/i18n/jsgrid-es.js"></script>

<script src="~/_content/Comunes/lib/spectrum-colorpicker/spectrum.min.js"></script>

<script src="~/js/site.js" asp-append-version="true"></script>

<script src="~/_content/comunes/js/funciones.js" asp-append-version="true"></script>
<script src="~/_content/comunes/js/ventana.js" asp-append-version="true"></script>

<script>
    cultureInfo = '@System.Globalization.CultureInfo.CurrentCulture';
    phFecha = '@System.Globalization.CultureInfo.CurrentCulture.DateTimeFormat.ShortDatePattern';
    phFecha = phFecha.toLowerCase(); // (phFecha = d/mm/yyyy)

    let sFecha = phFecha.split("/");
    for (var i in sFecha) {
        if ("md".search(sFecha[i])) {
            if (sFecha[i].length == 1) {
                sFecha[i] = sFecha[i].repeat(2);
            }
        }
    }
    phFecha = sFecha[0] + "/" + sFecha[1] + "/" + sFecha[2];
</script>

opened by Federico-Luna 29

Cannot get Metro UI navigation bar dropdown to work

I'm having trouble getting the navigation bar to work. I'm using Jquery ver 2.1.1. I've validated that jquery is working (added a little alert for window load). The navigation bar itself is rendering, but the dropdown just does not work. I'm using Visual Studio and installed the package via nuget.

JS Files included: metro.min.js jquery-2.1.1.js

CSS Files: metro-bootstrap.css metro-bootstrap-responsive.css

Please help.

opened by vkurpad 29
Dialogs not working in 4.3

Hi after yesterday's update dialogs stop working, and when I try to open dialog, I only get message "Element not contain role dialog! Please add attribute data-role="dialog" to element #idDialog". There is data-role="dialog" in dialog for sure, as dialogs worked in older versions and rollback to ver. 4.2 helped as well.
Fixed

opened by cizo 22

Metro UI using Vue js

Hello sir Can i use this framework in Vue js? the datepicker and calendar seem not working in vue js but other input is working..

 <label>Calendar Picker</label>    
                    <input type="text" data-role="calendarpicker" v-model="calendar">
  <label>Date Picker</label>    
                    <input data-role="datepicker" v-model="date">

opened by DarkKangaroot 19

Calendar Picker Component Bug
Describe the bug When selecting a date it chooses 2 dates.

To Reproduce https://codepen.io/RodolfoXDR/pen/YzQGzYX

Expected behavior Work as on documentation

Screenshots

Desktop (please complete the following information):

OS: Windows

Browser Chrome

Metro Version 4.5.0
opened by RodolfoXDR 18
set Content Dialog not centered

When I open a Dialog with setContent(), it loads onto the bottom of the screen. When i minimize and maximize the browser or change browser window width or height, the dialog centers properly.

Is there a way to redraw or refresh dialog position before opening? or is there a solution??

Thank you

opened by TommyCorr 18
Button 'X' to clear an input doesnt' work, doesn't clear else submit the form

Hi everybody, I'm using the class "input-control text" and I need a "

opened by JorgJimz 18

Dropdown menu in context "user-login"

Please consider the following code:

<div class="page-header bg-color-white" style="z-index:1000">
    <div class="page-header-content ">
        <h1>Title</h1>
        <ul class="menu">
            <li data-role="dropdown">
                <a href="#">
                    <div class="user-login">
                        <div class="name">
                            <span class="first-name">First</span>
                            <span class="last-name">Last</span>
                        </div>
                        <div class="avatar">
                            <img src="/usr/watashi/avatar100.png" />
                        </div>
                    </div>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="#">Logoff</a></li>
                </ul>
            </li>
        </ul>
    </div>
</div>

The idea is a context menu that appears when the avatar/username is clicked, but this concept seems to not work. Any thoughts?

opened by Watashifr 18

Treeview event not working metro 4

The below code is for metro 3 and working fine. Not working in metro 4 because of backward compatibility issues. Please guide me to work with treeview in metro 4.

html.txt

Javascript

bankingQ.events.on(document, 'treeNodeToggled', 'contextItem', function (e, expanded) {

        if (event.target.parent != ".node") {
            var targetNode = event.target.offsetParent;
            var customerId = $(targetNode).attr('customerId');
            var customerType = $(targetNode).attr('customerType');
        }
        else {
            var targetNode = event.target.parentNode;
            var customerId = $(targetNode).attr('customerId');
            var customerType = $(targetNode).attr('customerType');
        }

        if (expanded) {
            $(targetNode).removeClass('collapsed');

            if (customerType == 2) {
                getServicesForCustomer(targetNode, customerId);
            }
            else if (customerType == 3)
                getClientsForCustomer(targetNode, customerId, false);

            event.stopPropagation();
        }
        else
            $(targetNode).addClass('collapsed');
    }, null, true);

opened by Gurucharan 17

Dialog

Очень нравятся ваши работы! Пытаюсь потестить, подскажите в чем проблема с dialog выдает вот такою ошибку Uncaught ReferenceError: addTouchEvents is not defined ...и если я правильно понимаю обработка форм и прочее можно размещать, здесь: onShow: function(_dialog){ Спасибо!

opened by myrss 17
METRO UI Builder minify code does not work

Describe the bug The METRO UI Builder at https://builder.metroui.org.ua/ has switches to minify code and to include source maps. These buttons do not have an effect: The code is neither minified (I tried both switch position) nor there is a source map includes (which make sense only if the code was minified, of course)

To Reproduce Go to https://builder.metroui.org.ua/build.html and try to download minified code.

Expected behavior Minified code ad source map in the zip-file, if the appropriate switch position has been set

opened by klaus-liebler 0
Reflected xss in Notify.js
FYI we have notified you many months ago, by email that there is an vuln in your code, but you did not reply nor fixed the issue. So thats why i'm posting the issue here.

If you think this is already fixed, then see this ticket, as an open disclosure.

Describe the bug It is possible, to run js when triggering an notification, when the notification gets the body/value of the parameter.

if (title) { t = $("<div>").addClass("notify-title").html(title); notify.prepend(t); } m = $("<div>").addClass("notify-message").html(message); m.appendTo(notify);

To Reproduce if you have an parameter that triggers an notification for metro, then just put "" into the parameter value. and you should see an alert poping up.

In our case, the problem was when searching for an url with a parameter, and the url was not found it would display the parameters content like " not found"

How to fix We fixed it, by just replacing the ".html" to ".text"

Additional context Thanks for reading, if you have any questions, then feel free to ask.
opened by DennisKretz 0
Date format in Calendarpicker not working

Describe the bug In the latest build, when you change the output date format from the default YYYY-mm-dd to anything else, the result is not correctly formatted.

To Reproduce Create a input with data-role="calendarpicker", set data-format="%d %b %Y" or data-format="%d %B %Y" . Now when you pick a date from the calendar, the result is %3 %b %undefined or %2 %B %undefined. The same problem can be seen in the example here: https://metroui.org.ua/calendarpicker.html

Expected behavior The date should be formatted correctly using the data-format format.

Screenshots
bug

opened by bogozaur 2
Calendar wrong dates displayed

Describe the bug When loading the calendar the dates displayed in the month view are shifted incorrectly by one.

To Reproduce Load any of the source examples for the calendars and you will see.

Expected behavior I noticed just by checking the calendar in my computer and because it's highlighting the wrong day.

Screenshots

opened by Pokerman981 0
function show()

Describe the bug functions show()/hide toggle between display:none and display:block Unfortunately, when hidding a table row, the function show should go back to display:table-row

opened by CmPi 0

Releases(4.5.1)

4.5.1(Jun 23, 2022)
4.5.1

[x] Donut: fixed method setColor({...})

[x] Checkbox Three State: added new component with role checkbox-three-state

[x] Media: added sizes xxxl: 1600px, xxxxl: 1800px, xxxxxl: 2000px

[x] Grid: added cells cell-xxxl-*, cell-xxxxl-*, cell-xxxxxl-*, cell-*-fifth (20%), cell-*-one-fifth (20%), cell-*-two-fifth (40%), cell-*-three-fifth (60%), cell-*-four-fifth (80%)

[x] Table: fixed creating head from html

[x] Table: added placeholder for search input with table-search-placeholder attribute

[x] Countdown: fixed method reset()

[x] Countdown: added method resetWith(str|obj)

[x] Tabs: added events onTabOpen, onTabClose

[x] Tabs: to events onTab, onTabOpen, onTabClose added second argument target. Value for it child a.href value

[x] Tabs: added attribute data-update-uri="true|false" (default false). If true url hash will update with tab target value

[x] Tabs: added method openByTarget("#...")

Source code(tar.gz)
Source code(zip)
4.5.0(Aug 1, 2021)
4.5.0

[x] Tabs Material: fixed jump to the anchors, issue #1794

[x] Table: fixed create Instpector when table data loaded with method loadData(), issue #1796

[x] Tabs Material: added mouse wheel support for scrolling tabs, issue #1795

[x] Select: added event data-on-clear, fixed firing event data-on-change when user click on the clear button, issue #1802

[x] Switch: fixed method toggleState(), issue #1799

[x] Select: fixed API method data() for selecting option when defined, issue #1755

[x] Select: added API methods addOptions(values = [] || {}), removeOptions(values = [])

[x] Select: added API methods addOption(val, title, selected), removeOption(val)

[x] Select: fixed clear button work, issue #1716

[x] Master: fixed for quick switching panes, issue #1787

[x] Important: IE is dead and no more supported!

[x] M4Q: version updated to 1.1.0

[x] M4Q: removed polyfills for Promise, CustomEvent (IE is dead)

[x] Datetime: version 1.0.1, new global type Datetime, and factory datetime()

[x] Cake: version 1.0.0, new global type Cake, and factory cake()

[x] Ajax: switched from $.ajax ($.json, $.post, ...) to fetch (IE is dead)

[x] Tag input: switched from $.ajax to fetch

[x] Input: switched from $.ajax to fetch

[x] Html container: switched from $.ajax to fetch

[x] Cookie disclaimer: switched from $.ajax to fetch

[x] Table: _create(), _buid(), _saveTableView(), loadData() now use fetch, and send data to server as json

[x] Streamer: now use fetch for loading data

[x] List: now use fetch for loading data

[x] Calendar: fixed showing week numbers

[x] Calendar: rewritten with Datetime

[x] Calendar picker: rewritten with Datetime

[x] Countdown: updated for using with Datetime

[x] Chat: updated for using with Datetime

[x] Chat: changed messages style

[x] Validator: updated method date for using with Datetime

[x] Table: updated for using with Datetime (change toDate() to Datetime.from())

[x] List: updated for using with Datetime (change toDate() to Datetime.from())

[x] Datepicker: updated for using with Datetime

[x] Utils: updated for using with Datetime

[x] Extensions: removed extension for Date, use Datetime

[x] Extensions: removed extension for Object - Object.create(), Object.values() (IE is dead)

[x] Extensions: removed methods from extension for String, Array

[x] Any: added using Cake.lpad where need

[x] Utils: removed functions lpad, rpad. If you need these functions, use Cake.pad, Cake.lpad, Cake.rpad

[x] Select: added attributes data-drop-full-size=true|false (default: false), data-drop-width=int_value to set drop container width

[x] Hint: added attribute hintDeferred if value of this > 0, a hint will display with delay.

[x] ActionButton: fixed vertical-align for multi-action class

[x] Activity: change default style to color

[x] Keylock: added new component

[x] Calendar: fixed bug issue #1732

[x] Window: fixed event onMaxClick, issue #1735

[x] DoubleSelectBox: added new component, request from Patreon patron

[x] M4Q: fixed setting css number props order, zoom with method css()

[x] CalendarPicker: added API method clear()

[x] CalendarPicker: fixed API method val(), if you set argument as empty string val(""), you clear calendar picker value

[x] M4Q Ajax: fixed method $.get for url with ?, issue #1745

[x] List: updated for using with different tags. For example: now you can use list with div.grid role=list > div.row > div.cell structure

[x] List: added attribute data-cls-template-tag to set class(es) for item children

[x] List: added attribute data-default-template-tag to set wrapper element for item children, when template is not defined

[x] List: improved work with an attribute data-cls-template-tag. Now you can set many classes separated with comma to applying to elements with linked index

[x] Grid: fixed no-gap class, now padding cancels for .grid.no-gap .row > .cell* and .row.no-gap > .cell*

[x] Utils: fixed function Utils.isObject(), issue #1755

[x] Switch: To show on-off label you must set attribute data-show-on-off='true' and use attributes: data-on, data-text-on, data-off, data-text-off or i18n configs with attribute data-locale

[x] Switch: added i18n support with props locale.switch.on, locale.switch.off

[x] Switch: added changing on-off text in runtime with API method i18n(locale_name), issue #1761

[x] M4Q: added property $.dark

[x] Accordion: added API method open(index)

[x] Accordion: added attributes data-cls-accordion, data-cls-frame, data-cls-heading, data-cls-content, data-cls-active-frame, data-cls-active-frame-heading, data-cls-active-frame-content

[x] Table: added attribute data-use-current-slice. If this attribute has a value true, click on select-all checkbox will only apply to the current (visible) data slice, issue #1778

[x] Sidebar: added attribute data-close-outside="true|false" to close sidebar by a click outside the sidebar, issue #1777

[x] Marquee: added method setItems([...])

Source code(tar.gz)
Source code(zip)
4.4.3(Dec 27, 2020)
4.4.3

M4Q

[x] Attributes: fixed method attr when user defining one argument

[x] Animation: added methods stopAll(), pause(id), pauseAll(), resume(id), resumeAll()

Metro 4

[x] Color selector: added new component

[x] Color picker: added new a component

[x] Marquee: added new component

[x] NavView: fixed navview-pane item height and hover state, issue #1661

[x] Metro: improved function makePlugin(...), now you can use it for set of elements.

[x] Slider: fixed work vertical slider for touchable devices

[x] Colors: improve work with hsl, hsv

[x] Spinner: fixed input not a number value, value more or less than defined in options.

[x] Keypad: fixed internal value type mismatch.

[x] InfoBox: added attribute data-overlay-click-close=true|false, default false, issue #1668

[x] Table: added localization from i18n files, issue #1671

[x] Dropdown: fixed closing others when open current

[x] Timepicker: fixed error when step is not equals to 0, issue #1676

[x] Select: fixed clear button icon position in input-small mode, issue #1675

[x] Select: added attribute data-cls-group-name

[x] Select: for option added attribute data-display, issue #1677

[x] Input: added support for getting autocomplete list items with ajax, issue #1682

[x] Locales: added Croatian locale, thanks to dugi007

[x] Calendar: added showing events count in days, issue #1621

[x] Tag Input: added autocomplete feature, issue #1500

[x] Table: added showing inspector button with attributes data-show-inspector-button=true|false, data-inspector-button-icon.

[x] Table: set default value for data-cell-wrapper to true

[x] Table: improve table styles for table-contaner

[x] Table: fixed working with attribute data-horizontal-scroll-stop

[x] Metro: added method pluginExists(name) to check if specified plugin registered in registry

[x] Colors: fixed primitives RGBA, HSLA to create with specified alpha

[x] Utils: added lpad(), rpad() functions

[x] Calendar: improve visibility, fixed for using Utils.lpad()

[x] Calendar picker: fixed for using Utils.lpad()

[x] Metro: added method Component._fireEvents(...)

[x] Security alert: fixed from issue #1687

[x] Date extension: fixed method getWeek(), used in calendar for showing week numbers.

[x] Tag input: added closing autocomplete list on user click outside.

[x] Window: fixed holds zIndex when draggable, issue #1689

[x] i18n: fixed a chinese locales name, issue #1691

[x] Countdown: changed prop name data-animate-func to data-ease

[x] Additional colors: for opacity added op-*-hi, op-*-low classes

[x] Additional colors: default opacity changed to 0.5

[x] Keypad: added attributes data-except-keys, data-key-separator, data-key-delimiter, data-trim-separator.

[x] Table: fixed using attribute data-sortable for th.

Source code(tar.gz)
Source code(zip)
4.4.2(Nov 8, 2020)
4.4.2

Metro 4

[x] Button: fixed content position, issue #1648.

[x] Split-button: improved the layout, added subclass no-gap for split-button.

[x] Select: fixed minor bug for showing group name, when value sets with method val(...), issue #1652

[x] GradientBox: refactoring.

[x] ImageBox: fixed work of attribute data-repeat.

[x] Window: improve work with window content, now no require content wrapping into the block when defining content property.

[x] ImagePlaceholder: new component to create image placeholders.

[x] Button: added a button with loading state.

[x] Color: improved method parse().

[x] Validator: improved validating function color, now you can use any color string format: rgb, hex, ...

[x] Default icons: optimized styles.

[x] Media players: optimized default icons.

[x] Activity: added two new activity bars, atom.

[x] Tabs material: fixed tabs position.

[x] Utils: removed functions: hex2rgba(), getTransformMatrix(), computedRgbToHex(), computedRgbToRgba(), computedRgbToArray(), hexColorToArray(), hexColorToRgbA()

[x] i18n: added tr-TR turkish locale.

[x] Third party plugins: removed support for select2, datatables

[x] AppBar: added event onBeforeMenuOpen, onBeforeMenuClose, fixed firing events onMenuOpen, onMenuClose.

[x] Timepicker: added attributes data-cls-button, data-cls-ok-button, data-cls-cancel-button to modify picker buttons style, issue #1659.

[x] Datepicker: added attributes data-cls-button, data-cls-ok-button, data-cls-cancel-button to modify picker buttons style, issue #1659.

[x] TreeView: fixed ul default position to initial, issue #1660

[x] Dropdown: added classes .drop-down-left, .drop-down-right, .drop-up-left, .drop-up-right.

[x] Position: split position into position, position-ext, z-index.

[x] Utilities: removed function isColor(...), if need, use Metro.colors.isColor().

[x] Utilities: removed function embedObject(...), if need, use $(...).wrap().

[x] Utilities: removed function randomColor(...), if need, use Metro.colors.random().

[x] Utilities: updated function isVideoUrl(...), added twitch.

Source code(tar.gz)
Source code(zip)
4.4.1(Oct 19, 2020)
4.4.1

M4Q

[x] M4Q: updated to 1.0.9

[x] M4Q Core: added function $.isLocalhost([hostname]), true if host is localhost.

[x] M4Q Core: added property $.localhost, true if current location is localhost.

[x] M4Q Core: added property $.touchable, true if device detected as touchable.

[x] M4Q Manipulation: added methods appendText(...any_text...), prependText(...any_text...).

Metro 4

[x] Licensing: return MIT unified licensing model

[x] Tile: fixed double firing click event. Component internal event onClick renamed to onTileClick (attribute data-on-click => data-on-tile-click), issue #1636

[x] Export: added method arrayToCSV(array, filename, options).

[x] Utils: removed function isLocalhost, if you need, use $.localhost or $.isLocalhost([host]).

[x] Utils: removed function isArray.

[x] Utils: removed function isTouchDevice. if you need, use $.touchable.

[x] Tag input: improve method val(). Now you can use for new value(s) array or simple value.

[x] Tag input: added method append(val). For append tag(s) to existing value.

[x] Select: fixed using attribute data-cls-option-group, issue #1640

[x] Carousel: fixed usage attribute data-width, now this attribute applied to max-width css property, issue #1647

[x] ImageBox: added new component for issue #1647

[x] GradientBox: added new component for issue #1645

[x] ViewportCheck: added new component for check if element in viewport

[x] Shadows: added class shadowed, class defined in shadow.less, issue #1643

[x] Select: added attributes data-show-group-name="true|false" (default - false), data-short-tag="true|false" (default - true), issue #1642

Source code(tar.gz)
Source code(zip)
4.4.0(Sep 27, 2020)
4.4.0

M4Q

[x] M4Q: updated to 1.0.8

[x] M4Q Constructor: added short-tag for selecting by data-role with $('@rolename')

[x] M4Q Visibility: fixed method hide for detecting initial display value

[x] M4Q Init: improve init method

[x] M4Q: added property $.device, true for mobile a device.

Metro 4

[x] Components: switch to Component._fireEvent(...) method for firing component events data-on-*

[x] Calendar: added firing event onMonthChange when user clicks on outside day, issue #1589

[x] Window: added API methods pos(top, left), top(v), left(v), width(v), height(v), issue #1590

[x] Metro.window: added methods pos(top, left), top(v), left(v), width(v), height(v)

[x] Switch: added data-on, data-off attributes to show switch text state

[x] Checkbox: added API method toggle(state). The state must be -1 (indeterminate), 0 (unchecked), 1 (checked) or undefined (toggle between checked and unchecked), issue #1586

[x] Switch: added API method toggle(state). The state must be 0 (unchecked), 1 (checked) or undefined (toggle between checked and unchecked), issue #1586

[x] Double slider: fixed right-hand button moves when grabbing the left-hand hint, issue #1591

[x] Window: added property attr to custom button definition. This attribute must be a object with pairs key: value where key - attribute name, value - attribute value, issue #1592

[x] Input: added property attr to custom button definition

[x] Panel: added property attr to custom button definition

[x] Lightbox: new component to create a modal image gallery

[x] ImageGrid: new component to create a simple beautiful image grid

[x] Draggable: added attribute data-boundary-restriction="true|false", issue #1595

[x] Tokenizer: new component to create tokenized text

[x] Carousel: fixed active slide z-index, issue #1605

[x] Dropdown: added attributes data-drop-up=true|false (default false), data-check-drop-up=true|false (default: false), issue #1604

[x] Select: added attributes data-drop-up=true|false (default false), data-check-drop-up=true|false (default: true), issue #1604

[x] Table: fixed using template, issue #1606

[x] Select: fixed clear button work, issue #1610

[x] Input: remove metro style from input without role input. To added metro style to input without role input, use class metro-input.

[x] Textarea: remove metro style from input without role input. To added metro style to input without role input, use class metro-input.

[x] Utils Css: remove classes .neb, .neb2, .h-center, .v-center

[x] Input: added event onAutocompleteSelect. You can define this event with an attribute data-on-autocomplete-select. The event receives a one argument - selected value. issue #1615.

[x] Validator: fixed validating radio buttons with a name as indexed array, issue #1620

[x] Textarea: added attribute data-max-height=0..n, now you can set max height for textarea component.

[x] Components: now, you can use components without common styles from metro-common.css, metro-reset.css, issue #1609

[x] Window: disable a window maximized/minimized action when attribute data-btn-max=false and user use double-click on then window caption, issue #1625

[x] Input: added style prop min-width=0, issue #1626

[x] Component: fixed method _runtime() for updating attribute data-role.

[x] Input: added attribute data-label. If this attribute defined, label element for input will be created automatically.

[x] Calendar picker: added attribute data-label. If this attribute defined, label element for input will be created automatically.

[x] Time picker: added attribute data-label. If this attribute defined, label element for input will be created automatically.

[x] Date picker: added attribute data-label. If this attribute defined, label element for input will be created automatically.

[x] Input mask: added new component. Currently, only for desktop browsers.

[x] Icons: new icons external, new-tab

[x] Countdown: fixed draw function, issue #1632

[x] Color: added ColorPrimitive with color primitive objects

[x] Color: fixed color type constructor for creating colors from string

[x] Color: added method mix(...): ColorType.mix(color) and Colors.mix(color1, color2). This method allows you to mix colors.

[x] Color: added methods channel(channelName, val), channels(obj). This method change specified color channel. Color must be a required format.

[x] Date picker: added methods enable(), disable()), toggleState(), added observing for prop disabled, issue #1633

[x] Time picker: added methods enable(), disable()), toggleState(), added observing for prop disabled, issue #1633

Source code(tar.gz)
Source code(zip)
4.3.10(Jul 12, 2020)
4.3.10

[x] Input: add API method setAutocompleteList(array|string), issue #1576

[x] Scrollbars: add styles with classes .scrollbar-type-1, .scrollbar-type-2, .scrollbar-type-3, .scrollbar-type-4

[x] NavView: fix pane close on mobile devices when inputs, inside a pane, receive a focus, issue #1580

[x] NavView: add now caption for navview-menu for compacted mode dsplayed on the left of icon when user hovering item

[x] Grid: fix offset-*-0 are missing in the grid system, issue #1583

[x] Grid: add gaps with classes gap-*, where * is one of 0, 8, 16, 24, 32, 40 in pixels

[x] NavView: fix scrolling menu in compact mode, issue #1579

[x] NavView: add API method toggleMode() to toggle between expanded and compacted modes, issue #1538

[x] Select: for API method data(newOptions, selected, delimiter) added second argument. Must be a string or array, if selected is a string, you can use delimiter argument to split string into array, issue #1497

Source code(tar.gz)
Source code(zip)
4.3.9(Jul 2, 2020)
4.3.9

[x] Component: _fireEvent push __this to arguments. __this contains HTMLElement

[x] Utils: fix function github() for executing callback

[x] Counter: fix for starting when page scrolls

[x] Counter: add attributes data-from, data-prefix, data-suffix. Prefix and suffix must be a plain text.

[x] Observer: add firing event attrchange when component attribute was ben changed. e.detail contains an object {attr, newValue, oldValue, __this}.

[x] General: add firing event hotkeybonded when hotkey for component was ben bonded. e.detail contains an object {__this, hotkey, fn}.

[x] General: all components fired event create when init. The e.detail contains an object {name, __this}.

[x] General: the document fired event component-create when a component was ben initialized. The e.detail contains an object {element, name}.

[x] Window: fix makeRuntime calling, issue #1574

[x] Window: fix make window resizable

[x] Typography: add italic and underline text classes, issue #1577

Source code(tar.gz)
Source code(zip)
4.3.8(Jun 21, 2020)
4.3.8

M4Q

[x] Animation: fixed using String.includes for IE11. Change to String.indexOF.

[x] Animation: add operator / to _getRelativeValue().

[x] Events: fix fire. Now main is constructor CustonEvent, for old - createEvent

[x] Manipulation: add method wrap, wrapAll, wrapInner. The method puts elements inside the wrapper and return wrapper(s).

[x] Init: change throw Error to console.warn when selector is # or .

[x] setImmediate: add support for process and web workers

Metro 4

[x] General: new module system. All components now defined as alone IIFE modules.

[x] Validator: fixed functions compare, equals, notequals to work not inside a form, issue #1542

[x] Rtl: remove form-rtl, accordion-rtl less files. RTL Styles moved to component style.

[x] Locales: added pt-BR Brazilian Portuguese language

[x] Toast: added method Metro.createToast(). This eq to Metro.toast.create()

[x] Components: event on[Component]Create now have context a HTMLElement and receive $(HTMLElement) as argument

[x] Keypad: fix Keypad backspace button click behavior on keypad, created at runtime, issue #1547

[x] Utils: improve function isType

[x] Utils: remove functions camelCase(), dashedName(). Use String.camelCase or $.camelCase() and String.dashedName()) or $.dashedName().

[x] Clock: add events onTick, onSecond

[x] String: add extensions includes(), camelCase(), dashedName(), shuffle()

[x] Array: add extensions includes()

[x] ListView: fixed event onNodeDblclick, issue #1453

[x] Ribbon menu: fix hovering when button disabled, issue #1551

[x] Components: new constructor function

[x] Colors: full refactoring, now its full equals to ColorJS

[x] ColorType: new custom type for color variable. Var can be defined as var c = new Color(...) or var c = new Metro.Color(...)

[x] Material Tabs: update to work in all browsers

[x] Animation: redesign module

[x] Animation: add effects zoom, swirl

[x] Tiles: remove prefix animate-* for values for attribute data-effect

[x] Core: removed meta attribute metro4:init:mode. Now Metro is ALWAYS initialized after the content has been loaded.

[x] IE: removed file ie.less. Styles moved to components styles.

[x] ListView: add method selectByAttribute(attrName, attrValue, true|false) for select/deselect items, issue #1554

[x] Template: new component. This component allows you to use javascript templates inside HTML elements.

[x] Table: fix using wrapper for skip, issue #1557

[x] Calendar picker: fix using attribute clsPrepend, issue #1558

[x] Toast: add new arguments format Metro.createToast(message, options). Where options is a plain object.

[x] Draggable: add attribute dragContext, you can set it for access to any object with drag events, issue #1565

[x] Window: add second argument context for events onDragStart, onDragStop, onDragMove, issue #1565

[x] Calendar picker: fix work in dialog-mode

[x] Tabs: fix work attribute clsTabsListItemActive, issue #1568

[x] Locales: add danish locale da-DK, issue #1570

Source code(tar.gz)
Source code(zip)
4.3.7(May 17, 2020)
4.3.7

M4Q

[x] Animation: a new engine for animation. The animate function changed. Now function receives one argument. Also, you can use old syntax :)

[x] Init: fix minor bug for creating elements in context

[x] Ajax: add parameter contentType. If this param has value false, Content-type can't be defined.

[x] Contains: add checks with :visible to method is. Example: $(...).is(':visible')

[x] Utils: add methods $.random(array | a, b), $.getUnit(a), $.strip(where, what), $.hasProp(obj, prop), $.dashedName(val)

[x] Classes: add method $(...).removeClassBy(mask)

Metro 4

[x] Source: reposition source code

[x] Builder: new builder config, and new builder version 2020.1. New version not compatibility with 4.3.6

[x] Input: fix append size and padding, issue #1512

[x] Ripple: added ripple call for any element, issue #1515

[x] Splitter: added event onResizeWindow. Setup this event with prop data-on-resize-window or event $(...).on('resizewindow', ...), issue #1516

[x] Table: add skip to page functionality, issue #1511

[x] Table: add attributes data-show-skip, data-table-skip-title, data-skip-wrapper, data-cls-table-skip, data-cls-table-skip-input, data-cls-table-skip-button

[x] Table: add event data-on-skip

[x] Common css: optimize lists, reset

[x] UtilsJS: improve isFloat function, issue #1518

[x] Icons: add whatsapp icon, issue #1510

[x] AudioButton: add new component for the button with role audio-button

[x] Select: fix prepend, append for input-small, input-large. With multiple, append and prepend will not displayed.

[x] Input: fix prepend, append for input-small, input-large. Issue #1522

[x] Counter: fix start if element already in viewport

[x] CSS: added metro-reset.css, metro-common.css, metro-components.css as standalone.

[x] Image magnifier: fix glass image when user resize original image

[x] Notifies: minor improve notify create method

[x] Donut: update for using new animate function to draw stroke-dasharray

[x] Counter: update for using new animate function to draw

[x] File: fix clear when user fire reset on form in drop mode, issue #1524

[x] Adblock: a new component for hunting on the ads blockers

[x] Core: refactoring for new component definition

[x] Audio: rename component to audio-player

[x] Video: rename component to video-player

[x] Calendar: minor upd for action buttons

[x] i18n: refactoring definition. Now each lang defined in own file

[x] Third party: third party components styles select2, datatables move to components and include to main

[x] Container: remove prop display: block

[x] Select: add using empty value for option, issue #1527

[x] Action button: fix sub actions position

[x] Additional colors: refactoring

[x] Utils: remove method random, to get random value from an array or two values, use $.random(array | a, b) from m4q

[x] Utils: remove method uniqueID, to get unique GUID, use $.uniqueID(prefix) from m4q

[x] Utils: remove method formData, to get form data as array, use $.serializeToArray(form) from m4q and $.serialize(form) to get stringify value with & divider

[x] Utils: remove method strToArray, to transform string to array, use String.prototype method String.prototype.toArray(delimiter, type, format)

[x] Utils: remove method callback, execute function or code, use method Utils.exec(fn, args, context)

[x] Sidebar: add attribute data-menu-scrollbar="true|false". Attribute enable or disable scrollbar in the sidebar menu, issue #1528

[x] Tag: new component. Used in tag-input, select, can be used as standalone.

[x] Ribbon menu: fix sizes and positions for ribbon-icon-button, ribbon-tool-button

[x] Menus: removed text-decoration for anchors (a) inside any types of menus

[x] Cookie: new class for cookie manipulation Metro.cookie. Contains methods: setCookie(), getCookie(), delCookie()

[x] Cookie disclaimer: new component for accept cookies for GDPR, and not only, issue #1530

[x] Metro icon font: add 65 new icons cross-light, document-file-* (64)

[x] Select: improved performance for creating options, issue #1534

[x] Select: remove dependency from d-menu

[x] Navview: add scrollable to navview-menu in compacted mode

Source code(tar.gz)
Source code(zip)
4.3.6(Mar 15, 2020)
4.3.6

M4Q

[x] M4Q: upd to 1.0.6

[x] M4Q Init: fix minor bug for creating elements in context

[x] M4Q Ajax: add parameter contentType. If this param has value false, Content-type can't be defined.

Metro 4

[x] ColorJS: fix functions RGB, RGBA

[x] Select: add focus state, issue #1488

[x] Checkbox: add focus state

[x] Radio: add focus state

[x] Select: add attribute data-cls-drop-container

[x] Dropdown: add important to .drop-left, .drop-right, .drop-up classes

[x] Table: add support formatMask for fields defined in table head thead

[x] ResetCSS: remove duplicate declarations

[x] Toast: add global setup. Related to issue #1493

[x] Streamer: now you can set event time up to a minute

[x] Streamer: now you can use for event size half and one-third constants

[x] Streamer: add events onDrawEvent, onDrawGlobalEvent, onDrawStream

[x] TreeView: fix attribute data-show-child-count

[x] CalendarPicker: add attribute data-value to set init input value, issue #1506

[x] Streamer: data-wheel now true by default

[x] Streamer: add attribute data-wheel-step to define scroll step for horizontal scrolling with mouse

[x] Streamer: fix horizontal scrolling with mouse.

Source code(tar.gz)
Source code(zip)
v4.3.5(Jan 14, 2020)
4.3.5

M4Q

[x] M4Q: upd to 1.0.5

[x] M4Q Events: fix firing events, Metro 4 issue #1476

[x] M4Q Events: optimize method trigger, now this is a synonym of fire

Metro 4

[x] Tag input: change trigger defining

[x] Tag input: add clear button with attributes clearButton, clsClearButton, clearButtonIcon

[x] Tag input: add attributes clsComponent, clsInput

[x] Tag input: add event onClear

[x] List: add attribute data-sort-initial to sorts on create component, issue #1475

[x] Tag input: add attribute data-static and static mode for data-static='true' or if present attribute readonly

[x] Tag input: add method toggleStatic([true|false])

[x] Select: fix clearing select-input, issue #1477

[x] Calendar picker: fix closing calendar when user click on overlay, issue #1478

[x] Select: fix styles for input-large, input-small classes

[x] Tag input: change keyup to keydown for tag trigger event

[x] Tag input: add event onTagTrigger

[x] Tag input: add removing last tag on current value is empty end user press Backspace, you can disable it with attribute data-backspace='false'

[x] Draggable: add attribute data-timeout for set timeout before creating component

[x] Components: creating components can be deferred with attribute data-[componentName]-deferred=[ms]. Example: <div data-role='draggable' data-draggable-deferred='2000'>...</div>

[x] Counter: add attribute data-start-on-viewport. If attribute value is true, counter started after element showed in viewport. You can combine this with data-timeout

[x] Select: fix bug with data-filter='false'

[x] File: fix method clear for mode dropzone

[x] Select: add mode button

Source code(tar.gz)
Source code(zip)
v4.3.4(Nov 24, 2019)
4.3.4

M4Q

[x] M4Q: upd to 1.0.4

[x] M4Q Manipulation: optimise append, prepend to one definition for IE

[x] M4Q Script: add $.script, $.fn.script to execute scripts from element or create script object

[x] M4Q Manipulation: $.fn.append, $.fn.prepend now support script tag processing

[x] M4Q Clone: now support cloning data if second argument withDatais true - $(el).clone(true, true)

[x] M4Q Events: now you can define event name with hyphen or in camelCase notation. Example: mouse-down, accordionCreate

[x] M4Q Ajax: fix handler for sending data

[x] M4Q Ajax: fix $.json if returned value can't be parsed

[x] M4Q Ajax: fix post for object

[x] $: add $.serializeToArray(form), $serialize(form)

[x] M4Q Events: fixed removeEventListener

Metro 4

[x] Animations: put animations to separate less/css file metro-animations

[x] Object animations: add .flip-card

[x] Object animations: add .post-card

[x] Inputs: change placeholder font-size to 14px, add text-ellipsis

[x] Utils CSS: add class .stop-pointer

[x] Role naming: you can now use a hyphen to separate words in verbose component names for the data-role attribute. Example: data-role='button-group'' and data-role='buttongroup'' are equivalent.

[x] Drag Items: add new component, issue #1336

[x] Table: fix viewPath for getting view from server

[x] Table: fix colspan for message emptyTableTitle

[x] Checkbox: add using attribute readonly

[x] Switch: add using attribute readonly

[x] Table: fix viewPath for saving view on server

[x] Animation CSS: relocation

[x] AppBar: fix app-bar-menu behavior when user resize a window

[x] Slider: fix hint for IE11

[x] Window: fix interop m4q and jquery for Metro.window.create()

[x] Splitter: fix for IE11

[x] AppBar: add events onMenuOpen, onMenuClose, onMenuExpand, onMenuCollapse

Source code(tar.gz)
Source code(zip)
v4.3.3(Nov 3, 2019)
4.3.3

[x] m4q: upd to 1.0.3

[x] Toast: fix calculating toast position

[x] Progress: fix global setup function name

[x] Progress: percent value. To show set attribute data-show-value="true", data-value-position="free|center"

[x] Progress: add label. Use attributes data-show-label="true|false", data-label-position="before|after", data-label-template="Value is %VAL%"

[x] InfoBox: fix interop with Metro 4 and jQuery

[x] Table: add method clear(), issue #1426

[x] Table: fix cell data wrapping with attribute data-cell-wrapper="true"

[x] File: fix Input file inconsistent display when user cancel the choose dialog, issue #1443

[x] Slider: fix using accuracy with decimal value, issue #1447

[x] Calendar Picker: add attribute data-show-week-number

[x] Gravatar: fix global setup method name

[x] Activity: fix method open for undefined options

[x] Activity: fix interop with Metro 4 and jQuery

[x] Dialog: fix interop with Metro 4 and jQuery for dialog create method

[x] AppBar: set max-height for app-bar-menu opened with hamburger to visible viewport

[x] Buttons: refactoring - split to separate components from one file

[x] Calendar Picker: fix dialog mode, issue #1450

[x] Common CSS: add class -disabled

[x] General: Now Metro4 init after content was loaded. If you need to switch to old init method, use metro4:init:mode with value immediate

[x] Double Slider: add new component, issue #1441

[x] InfoButton: fix position and display change from inline-flex to inline-block, issue #1451

[x] M4Q Events: improve method on

[x] Select: fix for ie11, issue #1452

[x] ListView: add callback for onNodeDblClick event, issue #1453

[x] Table: add show activity when data loaded

[x] Table: you can set data with JS object and attribute data-source. Value for attribute must be a object name.

Source code(tar.gz)
Source code(zip)
v4.3.2(Oct 20, 2019)
4.3.2

[x] Slider: fix vertical slider marker position when slider is not visible, thx to thinkcpu, PR #1417

[x] Slider: improve events

[x] HotKey: extended anchor work with data-hotkey and attr href, issue #1420

[x] M4Q Events: fix function.name property for IE11, issue #1425

[x] Table: add methods addItem([...], redraw), addItems([...], redraw), issue #1426

[x] Select: attribute data-cls-drop-list now override default class d-menu if defined

[x] Lists: if list has class attribute, it resets with margin: 0; padding: 0; list-style: none inside;

[x] Select: if option not has value, used option text for value

[x] Table: add event onDataSaveError

[x] Table: fix save view to server

[x] M4Q Ajax: fix creating additional headers for request, issue #1427

[x] Init: add meta tag metro4:init:mode. The value must be immediate or contentloaded, default - immediate. If value is contentloaded and meta tag metro4:init not equal false, Metro 4 will be initiate after the content was loaded.

[x] Table: now you can define decimalSeparator and thousandSeparator in table head and global

[x] Table: add attributes data-head (object name, define table header), data-body (object name, define table data)

[x] Table: add attribute data-static. If true, search, pagination, info, rows count will be disabled and will not showing.

[x] Splitter: add method size(str) for change panel sizes at runtime, add observing for attribute data-split-sizes for change panel sizes at runtime

[x] Carousel: improve slide switching

[x] TreeView: add trigger change for checkboxes

[x] Common: fix h-auto-*

Source code(tar.gz)
Source code(zip)
v4.3.2-RC2(Oct 16, 2019)
4.3.2

[x] Slider: fix vertical slider marker position when slider is not visible, thx to thinkcpu, PR #1417

[x] Slider: improve events

[x] HotKey: extended anchor work with data-hotkey and attr href, issue #1420

[x] M4Q Events: fix function.name property for IE11, issue #1425

[x] Table: add methods addItem([...], redraw), addItems([...], redraw), issue #1426

[x] Select: attribute data-cls-drop-list now override default class d-menu if defined

[x] Lists: if list has class attribute, it resets with margin: 0; padding: 0; list-style: none inside;

[x] Select: if option not has value, used option text for value

[x] Table: add event onDataSaveError

[x] Table: fix save view to server

[x] M4Q Ajax: fix creating additional headers for request, issue #1427

[x] Init: add meta tag metro4:init:mode. The value must be immediate or contentloaded, default - immediate. If value is contentloaded and meta tag metro4:init not equal false, Metro 4 will be initiate after the content was loaded.

[x] Table: now you can define decimalSeparator and thousandSeparator in table head and global

[x] Table: add attributes data-head (object name, define table header), data-body (object name, define table data)

[x] Table: add attribute data-static. If true, search, pagination, info, rows count will be disabled and will not showing.

[x] Splitter: add method size(str) for change panel sizes at runtime, add observing for attribute data-split-sizes for change panel sizes at runtime

[x] Carousel: improve slide switching

[x] TreeView: add trigger change for checkboxes

Source code(tar.gz)
Source code(zip)
v4.3.1(Sep 25, 2019)
4.3.1

[x] Interop: fix interop with Metro4 and jQuery, issue #1408

[x] m4q: upd to 1.0.1

[x] m4q: fix initialization when metro4 added into head

[x] Init: fix issue #1409

[x] Dropdown: fix interop between Metro4 and jQuery, issue #1411

[x] Select: fix interop between Metro4 and jQuery, issue #1412

[x] Panel: fix interop between Metro4 and jQuery

[x] Windows: fix interop between Metro4 and jQuery

[x] VideoPlayer: fix interop between Metro4 and jQuery

[x] AudioPlayer: fix interop between Metro4 and jQuery

[x] Hotkey: fix interop between Metro4 and jQuery

[x] TimePicker: fix interop between Metro4 and jQuery

[x] SideBar: fix interop between Metro4 and jQuery

[x] Charms: fix interop between Metro4 and jQuery

[x] Select: fix close when user click document and jQuery used

[x] CalendarPicker: fix interop between Metro4 and jQuery, fix close when next[Year, Month] clicked

[x] Select: add works with disabled option. You can add attr disabled to option to create disabled option, issue #1413

[x] Window: fix toggle draggable, resizeable

[x] Tile: fix tile width in then tiles-grid when tile placed in specific column

[x] Metro: fix observing attributes

Source code(tar.gz)
Source code(zip)
v4.3.0(Sep 22, 2019)
4.3.0

[x] jQuery: Goodbye!!!

[x] M4Q: now built in for DOM manipulation and animation

[x] Keypad: rename property data-length to data-key-length

[x] Slider: fix show/hide hint

[x] Typo: fix margin-top for lists inside a lists, ex: ul > ul

[x] Animation: fix fadeIn, fadeOut

[x] NavView: rename attribute data-expanded to data-expand

[x] Examples: upd start screen

[x] Calendar picker: fix using locale for initial value, issue #1376

[x] Typo: set line-height for paragraph to 1.5

[x] Table: fire event onDataLoaded before table build

[x] Dialog: fix hide method

[x] File: add method "clear"

[x] Source: structure refactoring

[x] Typography: add background to remark with accent color

[x] Tests: begin tests with cypress

[x] Draggable: minor improve for mouseMove

[x] Chat: add attribute data-readonly and method toggleReadonly

[x] Schemes: fix colors for table tfoot

[x] Add checkRuntime to components

[x] Table: add attributes data-empty-table-title, data-cls-empty-table-title for issue #1403

[x] Table: fix padding for sortable columns

[x] Add destroy method to components. This method remove all event handlers and return core element

[x] Select: add props data-add-empty-value (default: false), data-empty-value (default: empty string)

[x] Select: add prop data-placeholder

[x] Select: add prop data-clear-button (default: false)

[x] Grid: optimise styles

[x] Hint: fix remove on leave element

[x] TreeView: add attribute data-show-child-count

Source code(tar.gz)
Source code(zip)
v4.2.49(Sep 15, 2019)
4.2.49

[x] Select: extended to interop with role=dropdown

[x] Docs: upd docs for cards, add icon-box, more-info-box, skill-box, social-box

[x] Sidebar: fix setup global function name

[x] Textarea: fix issue #1400

[x] MaterialTabs: fix issue #1402

[x] MaterialTabs: add method open(tab_num) for issue #1399

[x] Select: fix input autofocus when dropdown

[x] Textarea: fix resize when component was created

[x] File: fix firing change event on Safari

Source code(tar.gz)
Source code(zip)
v4.2.48(Aug 12, 2019)
4.2.48

[x] Select: fix error when using with pair to Select from Metro 4 for React

[x] Carousel: moved style props for slide background image from js to css

[x] Input: add attribute data-exclaim for defining exclamation symbol

[x] Input: fix no display clear button when input is readOnly

[x] Textarea: fix no display

Source code(tar.gz)
Source code(zip)
v4.2.47(Jul 29, 2019)
4.2.47

[x] Input: fix triggering change event, add trigger event clear when clear button is pressed

[x] Accordion: fixed glitch for frames who must be closed, but initiated as open

Source code(tar.gz)
Source code(zip)
v4.2.46(Jul 19, 2019)
4.2.46

[x] Table: fixed format value for sorting when value is empty, null or undefined

[x] Dropdown: fix set open on init

[x] DatePicker: add observation for attribute data-locale

[x] DatePicker: add observation for attribute data-format

[x] Utils: upd func isLocalhost

[x] Windows: fix make runtime

[x] Dialog: fix make runtime

[x] InfoBox: fix make runtime

[x] Validator: fix validating for integer and float rules, issue #1388

[x] Builder: fix builder config

[x] Embed objects: set default width and height to 100%

[x] Table: fix show/hide columns with inspector

Source code(tar.gz)
Source code(zip)
v4.2.45(Jun 17, 2019)
4.2.45

[x] Calendar picker: fix initial value for i18n

[x] Typography: set line-height: 1.5 for p

[x] Examples: fix desktop demo

[x] Examples: fix start screen demo

[x] Notify system: fix minor bug for creating notify after setup

Source code(tar.gz)
Source code(zip)
v4.3.0-beta1(Jun 10, 2019)
[x] update m4q

[x] fixes for m4q

[x] add docs for m4q

Source code(tar.gz)
Source code(zip)
v4.2.44(Jun 3, 2019)
4.2.44

[x] Calendar: fix methods setMaxDate, setMinDate, issue #1374

[x] Datepicker: fix offset for timezones, issue #1372

[x] Datepicker: fix val() method

Source code(tar.gz)
Source code(zip)
v4.3.0-alpha3(May 28, 2019)

fix use strict
Source code(tar.gz)
Source code(zip)
v4.3.0-alpha2(May 27, 2019)
[x] upd m4q

Source code(tar.gz)
Source code(zip)
v4.3.0-alpha(May 22, 2019)
4.3.0

[x] jQuery: remove dependency

[x] Keypad: rename property data-length to data-key-length

[x] Slider: fix show/hide hint

[x] Typo: fix margin-top for lists inside a lists, ex: ul > ul

[x] NavView: rename attribute data-expanded to data-expand, fix for using with m4q

Source code(tar.gz)
Source code(zip)
v4.2.43(May 19, 2019)
4.2.43

[x] Inputs: add class .input-small for using with input, select, spinner, tag-input, keypad, file , issue #1245

[x] Events: upd docs for subscribing events with $.on and addEventListener()

[x] Panel: new method customButtons() for add custom buttons at runtime

[x] Table: add margin-top: 1rem for class .table

[x] Lists: add margin-top: 1rem for ul, ol, dl

[x] Hotkey: full refactoring

[x] Datepicker: add attribute data-input-format

[x] Datepicker: fix hours timezone offset

[x] Datepicker: now you can use attribute value to setup component date

[x] Pickers: change default scroll speed factor to 4

[x] Window: fix methods setContent, setTitle, setIcon, changePlace

[x] Utils: rename method isJQueryObject to isJQuery

[x] Utils: add methods isM4Q, isQ. Method isQ return one of isJQuery or isM4Q

[x] Streamer: fix scrolling with apple magic mouse and firefox

[x] Streamer: fix scroll position for events-area when source changed

[x] TreeView: fix confused calls expandNode and collapseNode events

[x] Dialog: add attribute data-actions for predefined dialog

[x] DatePicker: fix scroll event handler

[x] TimePicker: fix scroll event handler

[x] Tabs material: add event data-on-tabs-scroll

[x] ScrollEvents: plugin for scrollStart, scrollStop events was removed

[x] Mousewheel: plugin was removed

Source code(tar.gz)
Source code(zip)
v4.2.42(May 7, 2019)
4.2.42

[x] General: improved components initialization

[x] Hotkeys: now you can add or change hotkey at runtime

[x] Select: fix cyclic error when Uncaught ReferenceError: function is not defined for onchange event

[x] Card: add class flex-card to create card in flex model

[x] ListView: fix works methods with jQuery object and\or HTMLElement

[x] Streamer: add event data-on-events-scroll

[x] Streamer: fix method source

[x] Streamer: rename method data to dataSet

[x] TreeView: fix methods for add nodes, issue #1150

Source code(tar.gz)
Source code(zip)

Metro 4 Components Library

Related tags

Overview

Metro 4 Components Library

License and Premium Features

Donation on Patreon

Community

Contributing

Docs

Releases

LTS

Browser Compatibility

Old version

Thanks

Credits

Comments

Releases(4.5.1)

4.5.1(Jun 23, 2022)

4.5.1

4.5.0(Aug 1, 2021)

4.5.0

4.4.3(Dec 27, 2020)

4.4.3

M4Q

Metro 4

4.4.2(Nov 8, 2020)

4.4.2

Metro 4

4.4.1(Oct 19, 2020)

4.4.1

M4Q

Metro 4

4.4.0(Sep 27, 2020)

4.4.0

M4Q

Metro 4

4.3.10(Jul 12, 2020)

4.3.10

4.3.9(Jul 2, 2020)

4.3.9

4.3.8(Jun 21, 2020)

4.3.8

M4Q

Metro 4

4.3.7(May 17, 2020)

4.3.7

M4Q

Metro 4

4.3.6(Mar 15, 2020)

4.3.6

M4Q

Metro 4

v4.3.5(Jan 14, 2020)

4.3.5

M4Q

Metro 4

v4.3.4(Nov 24, 2019)

4.3.4

M4Q

Metro 4

v4.3.3(Nov 3, 2019)

4.3.3

v4.3.2(Oct 20, 2019)

4.3.2

v4.3.2-RC2(Oct 16, 2019)

4.3.2

v4.3.1(Sep 25, 2019)

4.3.1

v4.3.0(Sep 22, 2019)

4.3.0

v4.2.49(Sep 15, 2019)

4.2.49

v4.2.48(Aug 12, 2019)

4.2.48

v4.2.47(Jul 29, 2019)

4.2.47

v4.2.46(Jul 19, 2019)

4.2.46

v4.2.45(Jun 17, 2019)

4.2.45