Skip to content

Commit 3ff1e5e

Browse files
oltonolton
committed
release 5.1.12
2 parents 69227a8 + 931e30a commit 3ff1e5e

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

50 files changed

+2183
-130080
lines changed

‎.junie/guidelines.md‎

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -173,7 +173,7 @@
173173
4. API methods (excluding those starting with an underscore)
174174
5. How to style the component using CSS variables and available CSS classes
175175
176-
Якщо є відповідний приклад компонента в теці `examples`, його слід використовувати як приклад використання компонента.
176+
Якщо є відповідний приклад компонента в теці `examples` (зазвичай це файл з назвою компонента: `component.html`, `component-{...}.html`, `component-....html`), його слід використовувати як приклад використання компонента.
177177
178178
### Компоненти, які реалізують логіку через завантаження даних
179179
Для компонентів, які використовують завантаження даних, слід описати, як це зробити, які параметри використовуються для цього, якій формат має бути в завантажених даних, та як обробляються дані.
@@ -272,6 +272,11 @@ const accordion = Metro.getPlugin("#myAccordion", "accordion");
272272
| `paramName` | type | default | Description of parameter |
273273
```
274274
275+
#### Example of Parameter Usage
276+
```html
277+
<div data-role="component-name" data-param-name="value"></div>
278+
```
279+
275280
#### **Events**
276281
```markdown
277282
## Events
@@ -281,6 +286,18 @@ const accordion = Metro.getPlugin("#myAccordion", "accordion");
281286
| `onEventName` | Description of event |
282287
```
283288
289+
#### Example of Event Usage
290+
```html
291+
<div data-role="component-name" data-on-{event-name}="onEvent"></div>
292+
293+
<script>
294+
function onEvent(event) {
295+
// Handle the event
296+
...
297+
}
298+
</script>
299+
```
300+
284301
#### **API Methods**
285302
```markdown
286303
## API Methods
@@ -345,10 +362,11 @@ For each component that needs documentation:
345362
1. **Examine the Component Files**:
346363
- Look at the JavaScript file (e.g., `component-name.js`) to understand:
347364
- Default configuration options (usually in a variable like `ComponentDefaultConfig`)
348-
- API methods (public methods that don't start with underscore or `#`)
349365
- Events (usually in the configuration with names like `onEvent`)
366+
- Styles options (usually in the configuration with names like `clsElementName`)
367+
- API methods (public methods that don't start with underscore or `#`)
350368
351-
- Look at the LESS file (e.g., `component-name.less`) to understand:
369+
- Look at the LESS (CSS)) file (e.g., `component-name.less` or `component-name.css`) to understand:
352370
- CSS variables (usually defined in `:root` and `.dark-side` selectors)
353371
- Available CSS classes and their purpose
354372

‎CHANGELOG-HISTORY.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
# Changelog
22

3+
### 5.1.11
4+
5+
+ [x] Updated `select` component: added event `onOptions` to `select` component, to remote data added `selected` prop.
6+
+ [x] `md5` moved to `common-js`
7+
+ [x] Fixed function `min`, `max` in `validator` component.
8+
39
### 5.1.10
410

511
- [x] Fixed `dropdown-caret` position on `d-menu` and `v-menu` components.

‎CHANGELOG.md‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
1-
## 5.1.11
1+
### 5.1.12
22

3-
+ [x] Updated `select` component: added event `onOptions` to `select` component, to remote data added `selected` prop.
4-
+ [x] `md5` moved to `common-js`
5-
+ [x] Fixed function `min`, `max` in `validator` component.
3+
+ [x] `select` - fixed method `val()` no icons were displayed when using this method
4+
+ [x] `select` - added method `clear()` to clear selected value(s)
5+
+ [x] `select` - refactored method `reset()` - now calling this method resets select to initial state
6+
+ [x] `typer` - fixed color change
7+
+ [x] `sidenav-m3` renamed to `sidenav` and has role `sidenav`

‎examples/accordion.html‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
</div>
2323
</div>
2424
<div class="container mt-10">
25-
<h3>Role</h3>
25+
<h3>Using data-role</h3>
2626
<div>
2727
<button onclick="$('#a1').data('accordion').close(0)">Close Frame</button>
2828
<button onclick="$('#a1').data('accordion').toggle(0)">Toggle Frame</button>
@@ -73,12 +73,6 @@ <h3>Runtime</h3>
7373
</div>
7474
</div>
7575

76-
<script>
77-
window.addEventListener('metroinitiated', function() {
78-
console.log('Welcome to Metro4');
79-
})
80-
</script>
81-
8276
<script src="../lib/metro.js"></script>
8377
<script>
8478
$(function(){

‎examples/any.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
66
<link href="../lib/metro.css" rel="stylesheet">
7+
<link href="../lib/icons.css" rel="stylesheet">
78

89
<title>Test Any - Metro UI :: Popular HTML, CSS and JS library</title>
910

‎examples/button.html‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -251,37 +251,37 @@ <h1>Button test page</h1>
251251
<div class="example">
252252
<div class="split-button mini">
253253
<button class="button">Reply</button>
254-
<button class="split"></button>
254+
<button class="split dropdown-toggle"></button>
255255
<ul class="d-menu" data-role="dropdown">
256256
</ul>
257257
</div>
258258
<div class="split-button small">
259259
<button class="button">Reply</button>
260-
<button class="split"></button>
260+
<button class="split dropdown-toggle"></button>
261261
<ul class="d-menu" data-role="dropdown">
262262
</ul>
263263
</div>
264264
<div class="split-button medium">
265265
<button class="button">Reply</button>
266-
<button class="split"></button>
266+
<button class="split dropdown-toggle"></button>
267267
<ul class="d-menu" data-role="dropdown">
268268
</ul>
269269
</div>
270270
<div class="split-button">
271271
<button class="button">Reply</button>
272-
<button class="split"></button>
272+
<button class="split dropdown-toggle"></button>
273273
<ul class="d-menu" data-role="dropdown">
274274
</ul>
275275
</div>
276276
<div class="split-button large">
277277
<button class="button">Reply</button>
278-
<button class="split"></button>
278+
<button class="split dropdown-toggle"></button>
279279
<ul class="d-menu" data-role="dropdown">
280280
</ul>
281281
</div>
282282
<div class="split-button largest">
283283
<button class="button">Reply</button>
284-
<button class="split"></button>
284+
<button class="split dropdown-toggle"></button>
285285
<ul class="d-menu" data-role="dropdown">
286286
</ul>
287287
</div>

‎examples/cutter.html‎

Lines changed: 27 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,35 @@
1818
</div>
1919
</nav>
2020

21-
<div class="container h-100 d-flex flex-center">
21+
<div class="container h-100 d-flex flex-column flex-center">
2222
<div class="cutter">
2323
<div class="content">
24-
Your cut message
24+
Default
25+
</div>
26+
</div>
27+
<div class="cutter line">
28+
<div class="content">
29+
line
30+
</div>
31+
</div>
32+
<div class="cutter dash">
33+
<div class="content">
34+
dash
35+
</div>
36+
</div>
37+
<div class="cutter dot">
38+
<div class="content">
39+
dot
40+
</div>
41+
</div>
42+
<div class="cutter line" style="--cutter-line-width: 4px">
43+
<div class="content">
44+
custom line width
45+
</div>
46+
</div>
47+
<div class="cutter line" style="--cutter-line-color: var(--color-green)">
48+
<div class="content">
49+
custom color
2550
</div>
2651
</div>
2752
</div>

‎examples/grid-{enclosed).html‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
6+
<link href="../lib/metro.css" rel="stylesheet">
7+
<link href="../lib/icons.css" rel="stylesheet">
8+
9+
<title>Test Any - Metro UI :: Popular HTML, CSS and JS library</title>
10+
11+
</head>
12+
<body class="cloak h-100-vh">
13+
<nav data-role="appbar" class="border-bottom bd-default" data-expand="true">
14+
<div class="app-bar-item-static no-hover">
15+
<div class="text-leader">Component Name</div>
16+
</div>
17+
<div class="app-bar-item-static no-hover ml-auto">
18+
<input type="checkbox" data-role="theme-switcher"/>
19+
</div>
20+
</nav>
21+
22+
<div class="container h-100">
23+
<div class="row">
24+
<div class="cell-md-8 border bd-default">
25+
<div class="row">
26+
<div class="cell-sm-4 border bd-default">1</div>
27+
<div class="cell-sm-4 border bd-default">2</div>
28+
<div class="cell-sm-4 border bd-default">3</div>
29+
</div>
30+
</div>
31+
<div class="cell-md-4 border bd-default">
32+
side
33+
</div>
34+
</div>
35+
</div>
36+
37+
<script src="../lib/metro.js"></script>
38+
<script>
39+
</script>
40+
</body>
41+
</html>

‎examples/select-{reset}.html‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
6+
<link href="../lib/metro.css" rel="stylesheet">
7+
<link href="../lib/icons.css" rel="stylesheet">
8+
9+
<title>Test Select reset() - Metro UI :: Popular HTML, CSS and JS library</title>
10+
11+
</head>
12+
<body class="cloak h-100-vh">
13+
<nav data-role="appbar" class="border-bottom bd-default" data-expand="true">
14+
<div class="app-bar-item-static no-hover">
15+
<div class="text-leader">Select.reset()</div>
16+
</div>
17+
<div class="app-bar-item-static no-hover ml-auto">
18+
<input type="checkbox" data-role="theme-switcher"/>
19+
</div>
20+
</nav>
21+
22+
<div class="container h-100 d-flex flex-column flex-center gap-2">
23+
<div class="d-flex gap-2">
24+
<div style="flex: 0 0 200px;">
25+
<select id="sel1"
26+
data-role="select"
27+
data-cls-select="text-bold fg-orange"
28+
data-clear-button="true"
29+
data-cls-label="text-bold fg-black" size="1">
30+
<option value="A">A</option>
31+
<option value="B">B</option>
32+
<option value="C">C</option>
33+
</select>
34+
</div>
35+
<button onclick="createItems()">Create Items</button>
36+
<button onclick="reset()">Reset</button>
37+
</div>
38+
</div>
39+
40+
<script src="../lib/metro.js"></script>
41+
<script>
42+
function reset(){
43+
$('#sel1').data('select').reset()
44+
}
45+
46+
function createItems(){
47+
let options = {};
48+
for (const tz of Intl.supportedValuesOf('timeZone')) {
49+
options[tz] = tz;
50+
}
51+
$('#sel1').data('select').data(options)
52+
}
53+
</script>
54+
</body>
55+
</html>

‎examples/select-{val}.html‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
6+
<link href="../lib/metro.css" rel="stylesheet">
7+
<link href="../lib/icons.css" rel="stylesheet">
8+
9+
<title>Test Select val() - Metro UI :: Popular HTML, CSS and JS library</title>
10+
11+
</head>
12+
<body class="cloak h-100-vh">
13+
<nav data-role="appbar" class="border-bottom bd-default" data-expand="true">
14+
<div class="app-bar-item-static no-hover">
15+
<div class="text-leader">Select.val()</div>
16+
</div>
17+
<div class="app-bar-item-static no-hover ml-auto">
18+
<input type="checkbox" data-role="theme-switcher"/>
19+
</div>
20+
</nav>
21+
22+
<div class="container h-100 d-flex flex-column flex-center gap-2">
23+
<div class="d-flex gap-2">
24+
<div style="flex: 0 0 200px;">
25+
<select id="sel1"
26+
data-role="select"
27+
data-cls-select="text-bold fg-orange"
28+
data-clear-button="true"
29+
data-cls-label="text-bold fg-black" size="1">
30+
<option value="">&nbsp;</option>
31+
<option value="M"
32+
data-icon="<SPAN class='mif-gamepad mif-2x fg-black'></SPAN>">Machines
33+
</option>
34+
<option value="C"
35+
data-icon="<SPAN class='mif-display mif-2x fg-black'></SPAN>">Computers
36+
</option>
37+
</select>
38+
</div>
39+
<button onclick="$('#sel1').data('select').val('C')">Set Val</button>
40+
<button onclick="$('#sel1').data('select').reset()">Reset</button>
41+
</div>
42+
<div class="d-flex gap-2">
43+
<div style="flex: 0 0 200px;">
44+
<select id="sel2" multiple
45+
data-role="select"
46+
data-cls-select="text-bold fg-orange"
47+
data-cls-label="text-bold fg-black" size="1">
48+
<option value="">&nbsp;</option>
49+
<option value="M"
50+
data-icon="<SPAN class='mif-gamepad mif-2x fg-black'></SPAN>">Machines
51+
</option>
52+
<option value="C"
53+
data-icon="<SPAN class='mif-display mif-2x fg-black'></SPAN>">Computers
54+
</option>
55+
</select>
56+
</div>
57+
<button onclick="$('#sel2').data('select').val(['C', 'M'])">Set Val</button>
58+
<button onclick="$('#sel2').data('select').reset()">Reset</button>
59+
</div>
60+
<div class="d-flex gap-2">
61+
<div style="flex: 0 0 200px;">
62+
<select id="sel3"
63+
data-role="select"
64+
>
65+
<option value="">&nbsp;</option>
66+
<option value="M"
67+
data-template="<SPAN class='fg-red text-bold mr-2'>M</SPAN>$1">Machines
68+
</option>
69+
<option value="C"
70+
data-template="<SPAN class='fg-green text-bold mr-2'>C</SPAN>$1">Computers
71+
</option>
72+
</select>
73+
</div>
74+
<button onclick="$('#sel3').data('select').val('M')">Set Val</button>
75+
<button onclick="$('#sel3').data('select').reset()">Reset</button>
76+
</div>
77+
</div>
78+
79+
<script src="../lib/metro.js"></script>
80+
<script>
81+
</script>
82+
</body>
83+
</html>

0 commit comments

Comments
 (0)