Metro-UI-CSS

4.2.28

• Sidebar: fix z-index
• Docs: fix mistakes in table options
• Utils css: fix class m4-cloak
• Validator: add argument data to events data-on-validate-form, data-on-error-form, data-on-submit. Data is a object and contains pairs: input-name: input-value for form elements.
• Popover: fix close popover
• v-menu: fix drop down for v-menu -> v-menu
• Validator: fix for issue #1254
• Utils: add functions parseCard(val), parsePhone(val). Functions remove all not numeric chars from value
• Table: add data formats card, phone
• List: add data formats card, phone
• Sorter: add data formats card, phone

4.2.27

• Input: remove -webkit-autofill background color
• App bar: fixed class ml-auto
• v-menu: add service class for-dropdown, added automatically, when add role `dropdown
• d-menu, v-menu: remove min-width for item
• d-menu: fix icon position in item
• Cloak: add class .m4-cloak for body to remove blinking initiated components
• Cloak: add meta tag metro4:cloak can receive values: show, fade (default)
• Cloak: add meta tag metro4:cloak_duration can receive integer values, default 500. Use for fade
• Dialog: add element as context to events
• Popovers: fix minor bugs, issue #1179, issue #1238
• Popovers: add attribute data-close-button="true|false""
• Popovers: now you can change popover content and position at runtime with attributes data-popover-text, data-popover-position
• Popovers: add attribute data-cls-popover-content
• Popovers: change context for events to element for which popover is created
• Colors: add branding color classes bg-* for facebook, twitter, github, gitlab, amazon, bootstrap
• Select: fix add, remove focused class
• Select: add class input-large
• Spinner: add class input-large
• Tag input: add class input-large
• Tag input: add auto resize to input
• Table: add methods deleteItem(field_index, val), deleteItemByName(field_name, val). Function return list instance. Val can be function or primitive value. Method can not redraw list, to redraw call method draw().
• Utils: add function arrayDeleteByMultipleKeys(arr, /*array*/ indexes). Function return new Array.
• Toolbar: fix for vertical layout
• Splitter: add attribute data-save-state, required element ID. If true, panes sizes stored into Storage
• Table: add method setData(obj)
• Table: add method setHeads(obj), setHeadItem(obj)
• Table: add method setItems(obj)
• List: add method deleteItem(val). Function return list instance. Val can be function or primitive value. Method can not redraw list, to redraw call method draw().

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.
If you'd like to join them, please consider:

• Become a backer or sponsor on Patreon
• Become a backer or sponsor on Open Collective

4.2.26

• Image compare: fix for touch devices
• Image magnifier: fix for touch devices
• Window: fix _setPosition method
• Buttons: fix size for dropdown-button, split-button and info-button
• Utils: add function iframeBubbleMouseMove(iframe)
• Input: add class .input-large
• Splitter: new component
• Popovers: fix minor bugs (forum issue)

4.2.25

• Sidebar: remove scroll-y from sidebar, add scroll-y to sidebar-menu
• Countdown: refactoring structure, add animation effects: slide, fade, zoom
• Hero: minor upd styles for background image
• Html container: new component, include HTML snippets in HTML element
• Utils: add function isLocalhost()
• Docs: upd for using htmlcontainer component
• Window: fix gradually disappear for children when window is hiding, issue #1222
• Utils: add methods getCursorPosition(...), getCursorPositionX(...), getCursorPositionY(...)
• Image compare: new component
• Image magnifier: new component

4.2.24

• Time picker: fix method val for issue #1221
• Calendar: fix method setToday for issue #1215
• ListView: fix method _createNode for structure option, issue #1220
• ListView: fix methods insertBefore, insertAfter
• Tabs: change expand behavior
• Tabs: fix expand/collapse behavior
• Select: add attribute data-cls-option-active
• Countdown: fix performance and minor bugs
• Countdown: fix deferred start setup
• Countdown: add methods resume(), reset()
• Notify: fix firing method onClose
• Notify: add methods onNotifyCreate, onAppend
• Input: fix custom search button click
• Calendar picker: add attribute data-null-value. If this attribute false and value empty, used current date
• Calendar picker: fix for null value, issue #1217
• Accordion: add attribute data-material='true'
• Switch: add attribute data-material='true'
• Mif: add new icons 50+
• Bottom navigation: add new CSS component
• Bottom sheet: add new component
• Items list: add new CSS component
• Feed list: add new CSS component
• Group list: add new CSS component
• Head bar: add new CSS component
• Material tabs: add new component
• Material input: add new component
• Chips: add new CSS component
• Swipe: add new JS component

4.2.23

• Select: fix native onchange event triggering, issue #1198
• Calendar: add attributes data-prev-month-icon, data-next-month-icon, data-prev-year-icon, data-next-year-icon
• Calendar: fix rendering for ie, issue #1202
• Calendar picker: add data-prepend attribute, issue #1201
• Calendar picker: fix close when clicked dropdown button issue #1210
• Calendar picker: fix disabled white text is unreadable, issue #1208
• Calendar picker: fix init null value, issue #1206
• Resizeable: fix resize, issue #1205
• Table: add attribute data-filters-operator="and|or"
• Table: fix init filters, defined in attribute data-filters
• Table: rename filterMinLength to searchMinLength
• Table: rename filterThreshold to searchThreshold
• Table: add attribute data-search-fields, issue #1195
• Table: add attributes data-cls-row, data-cls-even-row, data-cls-odd-row
• Table component: full rewrite docs

Project need financial support

4.2.22

• Appbar: remove classes app-bar-expanded-* and add attributes data-expand, data-exapnd-point
• Table: fix hidden class applying. issue #1194
• Table: add attribute data-cls-cell-wrapper
• Mif: set line-height: 1 for mif-*x classes
• File: add mode drop
• Select: fix for the long captions
• Select: add attribute data-cls-select-input
• Media players: set context for events to HTML element
• Builder: add Metro 4 Builder

4.2.21

• Docs: refactoring docs for form components
• Resizable: add attributes data-min-width, data-max-width, data-min-height, data-max-height, data-can-resize, issue #1100
• Input: add events onClearClick, onRevealClick
• Input: add methods clear(), toDefault()
• Input: rename data-cls-element to data-cls-component
• Input: add attribute data-cls-custom-button
• Input: add attribute data-history-divider and methods getHistory, setHistory, getHistoryIndex, setHistoryIndex
• Input: add search input functionality
• Search: remove search plugin
• Tag input: add observing attribute value
• Tag input: fix method val()
• Spinner: add events onArrowUp, onArrowDown, onArrowClick
• Spinner: add events onPlusClick, onMinusClick, onButtonClick
• Select: add event onItemSelect
• Select: add method reset(), getSelected()
• Select: fix method val(...)
• Textarea: add methods clear(), toDefault()
• Textarea: fix data-append attribute
• Calendar picker: fix error when value attribute is empty, issue #1191
• Calendar picker: add attributes data-dialog-mode, data-dialog-point, data-dialog-overlay, data-overlay-color, data-overlay-alpha
• Calendar: add compact class
• Calendar: for wide mode now use attributes data-wide or data-wide-point
• Extension: add method, if not exists, Array.from

Project need your financial support

4.2.20

• Table: fix default padding for th and td
• Select: fix custom classes apply for selected options for select with multiple option, issue #1184
• Input: add history option, issue #1162
• Spinner: new component, issue #1180
• AppBar: fix error creating hamburger when background-color is rgba or transparent, issue #1172
• Slider: add event onChange
• TreeView: change context for events
• Calendar: any input format with attribute data-input-format, issue #1186
• Calendar picker: any input format with attribute data-input-format, issue #1186
• Date: add extension function getWeek() - return week number

Project need your financial support

4.2.19

• Change contributing rules
• Tabs: add method open(tab_num | tab_el). Tab number counting from 1. Tab element - li HTML element or $("li") jquery wrapper
• Tabs: add methods next(), prev()
• Popover: add attribute data-popover-timeout. Timeout before popover show.
• Sidebar: add method isOpen to object Metro.sidebar
• Table: fix method loadData for string value from server
• Table: fix minor bugs
• Select: for multiple add attributes data-cls-selected-item, data-cls-selected-item-remover
• TagInput: add attribute data-tag-trigger. The attribute must contain integer values for keyCode for triggering tag creating event. Default: "13,188" - Enter and comma.
• ListView: fix checkbox position for selectable mode
• ListView: add attribute data-check-style. Value must be 1 or 2
• ListView: add methods getSelected(), selectAll() or selectAll(false) (for clear), clearSelected()
• Checkbox: add observing checkbox style attribute
• Radio: add observing checkbox style attribute
• Validator: add function notequals. Input value can't be equal to other input
• Validator: add function equals. Input value can be equal to other input. Different from compare - it use trim() for value
• Sizing: fix width classes w- for all media breakpoints

Project need your financial support

4.2.18

• Table: fix work attributes showTableInfo, showPagination when wrappers defined
• Table: fix pagination behavior when no items for table
• Table: add observing attributes data-check and data-rownnum
• Tabs: fix tab click behavior when <a> have a link in href attribute
• Calendar: add method clearSelected()
• Calendar: add method toDay()
• Table: add exception when data for table is not a object
• Table: add class fixed-layout
• Table: add data-filter-threshold attribute, this is a timeout before searching start
• Select: add attribute data-template for option. You can use this attribute to define html wrapper for option text in format ...any...$1. Where $1 used for replace by option text.
• Select: add attribute data-cls-drop-list to add additional class to drop down list.
• Select: add attribute data-append and minor css fixes
• Select: add multiple functionality
• Inputs: refactor inputs.less to specific files select.less, input.less, textarea.less, input-file.less
• Radio: add additional style for radio component. To use it, add attribute data-style="2" to your radio component.
• Checkbox: add additional style for checkbox component. To use it, add attribute data-style="2" to your checkbox component.
• Tag input: add new component

Help the project, become a backer
https://github.com/olton/Metro-UI-CSS/blob/master/BACKERS.md

4.2.17

• Tabs: change behavior and attribute. For details, read the docs
• Table: add second parameter review to methods reload and loadData. If true, table view will be recreated from init values.
• Table: add head parameter show
• Input: add attribute data-default-value="..." for set default if val is empty and set to this when click clear button
• Table: add class .subcompact to pair to .compact
• Table: add attribute data-cell-wrapper. This class add wrapper to cell data with no wrap and no overflow props.
• Sidebar: add classes .compact and .subcompact

Help the project, become a backer
https://github.com/olton/Metro-UI-CSS/blob/master/BACKERS.md

4.2.16

• Export: add object Metro.export. Now you can export any HTML tables to CSV with method Metro.export.tableToCSV(table, filename)
• Utils: add function copy(el) for copying element to clipboard
• Utils: add function bool(val). This func return true if value one of: true, 'true', 1, '1', 'on', 'yes'
• Table: fix show cell if stored value show for view have string type 'true' or 'false'
• Table: add second parameter heads for custom filter function
• Table: change padding and font-size for compact class
• Table: fix post method for save table view. Inspector post {id: table_id, view: table_view}
• Table: add method export(to, mode, filename, export_options). Argument to currently must value CSV. Argument mode: all, checked, view, all-filtered
• Table: add method resetView(save) reset table view to default
• Table: add method getView() return current view object
• Table: add method getHeads() return table internal heads
• Table: add method clearSelected(redraw). This method uncheck rows and redraw table if your need
• Dialog: add attributes data-to-top='true|false', data-to-bottom='true|false' for sticky dialog to top or bottom side.
• List: fix for issue ##1155 for IE11

Help the project, become a backer
https://github.com/olton/Metro-UI-CSS/blob/master/BACKERS.md

4.2.15

• Switch: fix works with collapse. issue #1148
• Input, Select, Textarea, File: add data-append attribute
• TreeView: fix node toggle marker position
• TreeView: fix checks nodes for tree options when inputs checked by default
• String: add extension toDate(mask)
• Media players: fix info box position
• Utils: add function nearest(val, prec, down) for search for the nearest integer, a multiple of required
• Select: fix trigger error for empty value. issue #1138
• Time picker: add steps attributes data-hours-step, data-minutes-step, data-seconds-step. issue #1122
• Time picker: fix sliders position when picker placed top or bottom of parent
• Input file: fix only shows the first file name for multiple option. issue #1140
• Calendar picker: add observing attributes data-min-date, data-max-date
• Input: remove webkit default clear button for type=time
• Table: fix create internal heads when header defining in html and data loaded from json
• Table: add attribute data-filter-min-length for number of symbols inputs and start searching
• Table: add column rownum. This column shows when attribute data-rownum="true"
• Table: add column row check. This column shows when attribute data-check="true"
• Table: add column row radio. This column shows when attribute data-check-type="radio"
• Table: add attribute data-check-store-key="..." used for store selected rows in the storage
• Table: add attribute data-view-save-mode="client|server" used for store table view
• Table: add attribute data-view-save-path="storage_key|url" used for store table view
• Table: add data-locale attribute
• Table: add table inspector to configure columns view
• Table: add methods openInspector(true|false), toggleInspector() to show/hide table inspector
• Table: add methods getFilteredItems(), getSelectedItems(), getStoredKeys()
• Table: add events onDrawCell, onAppendCell, onAppendRow, onViewSave, onViewGet, onCheckDraw

4.2.14

• Table: fix pagination calculator when rows count changed
• Table: pagination not displayed when rows count is -1 (show all rows)
• Table: rename attribute data-show-all-pages to data-pagination-short-mode

4.2.13

• Windows: fix execute method onCloseClick
• Table: add classes compact-{media} and normal-{media} where {media} is one of sm, md, lg, xl, xxl

4.2.12

• Sidebar: remove text decoration underline for menu item
• Sidebar: add menu item hover
• Tiles: fix col-* and row-* classes for tiles grid issue #1133
• Table: add all rows behavior with -1 value for data-rows and data-rows-steps
• Table: add data-all-records-title attribute
• Sidenav-m3: fix icon position when dropdown issue #1134
• Table: fix init sortable column
• Table: remove generating ghost tr

4.2.11

• Table: add setup for the number formatting. Add attributes data-thousand-separator, data-decimal-separator issue #1129
• Sorter: add setup for the number formatting. Add attributes data-thousand-separator, data-decimal-separator issue #1129
• List: add setup for the number formatting. Add attributes data-thousand-separator, data-decimal-separator issue #1129
• Table: fix for the colspan option issue #1129
• Table: fix behavior of attribute data-cls-column
• Tabs: fix error if tag a in tab have a valid formed url in href attribute

4.2.10

• Hint: fix hiding slider hint with data-hint-always=true when showing others hits issue #1126
• Streamer: change streamer data with attribute data-data
• Date picker: fix sliders position when picker placed top or bottom of parent issue #1107
• Floating action button: new component
• Toast: add classes .primary, .secondary, .success, .alert, .warning, .yellow, .info, .light

4.2.9

• Calendar: fix day item height for issue #1112
• Select: fix method val for issue #1116
• App bar: fix drop down for issue #1114
• Slider: fix marker position for non displayed slider fro issue #1119
• Time(date) picker: add classes .for-top, .for-bottom. Use with attribute data-cls-picker
• Time(date) picker: add action button border